|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis--x path { |
|
display: none; |
|
} |
|
|
|
.line { |
|
fill: none; |
|
stroke: steelblue; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
.myline { |
|
fill: none; |
|
stroke: black; |
|
stroke-width: 3px; |
|
} |
|
|
|
.axis line { |
|
fill: none; |
|
stroke: #D4D8DA; |
|
stroke-width: 2px; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
|
|
.overlay { |
|
fill: none; |
|
pointer-events: all; |
|
} |
|
|
|
.focus circle { |
|
fill: white; |
|
stroke: black; |
|
stroke-width: 4px; |
|
} |
|
|
|
.hover-line { |
|
stroke: #6F257F; |
|
stroke-width: 2px; |
|
stroke-dasharray: 3,3; |
|
} |
|
|
|
</style> |
|
<h2> <center> Colombian politics by lastname</center></h2> |
|
<h3> <center>¿Would they be your relatives?</center></h3> |
|
<svg width="960" height="500"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
margin = {top: 20, right: 80, bottom: 30, left: 50}, |
|
width = svg.attr("width") - margin.left - margin.right, |
|
height = svg.attr("height") - margin.top - margin.bottom, |
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"), |
|
currentlastname= 'Herrera'; |
|
|
|
//var parseTime = d3.timeParse("%Y%m%d"); |
|
var parseTime = d3.timeParse("%Y"); |
|
bisectDate = d3.bisector(function(d) { return d.year; }).left; |
|
|
|
var x = d3.scaleTime().domain([1962,2011]).range([0, width]), |
|
y = d3.scaleLinear().domain([0,maxY]).range([height, 0]), |
|
z = d3.scaleOrdinal(d3.schemeCategory10); |
|
|
|
var maxY = 25; |
|
|
|
var line = d3.line() |
|
.curve(d3.curveBasis) ///<= comment if you want it uncurved |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.count); }); |
|
|
|
var myline = d3.line() |
|
.curve(d3.curveMonotoneX) //curveCardinal curveMonotoneX,curveCatmullRom |
|
.x(function(d) { return x(d.year); }) |
|
.y(function(d) { return y(d.value); }); |
|
|
|
|
|
// - Lineas pintadas |
|
|
|
|
|
politicosPaths(); //Tiene que ir primero |
|
var mY = |
|
//mypath("mylastname.json"); |
|
// mypath("http://157.253.208.17:3000/lastnamesByYear?lastname="+currentlastname); |
|
mypath("https://visualelections.herokuapp.com/lastnamesByYear?lastname="+currentlastname); //Nor workkin yet because connection failure |
|
//console.log("my recibido "+mY); |
|
|
|
|
|
|
|
|
|
// - Funciones |
|
|
|
function politicosPaths() { |
|
d3.csv("familiasFuertes.csv", type, function(error, data) { |
|
if (error) throw error; |
|
|
|
var lastnames = data.columns.slice(1).map(function(id) { |
|
return { |
|
id: id, |
|
values: data.map(function(d) { |
|
return {date: d.date, count: d[id]}; |
|
}) |
|
}; |
|
}); |
|
|
|
x.domain(d3.extent(data, function(d) { return d.date; })); |
|
|
|
maxY = d3.max(lastnames, function(c) { return d3.max(c.values, function(d) { return d.count; }); }); |
|
|
|
y.domain([ 0, maxY ]); |
|
|
|
|
|
|
|
z.domain(lastnames.map(function(c) { return c.id; })); |
|
|
|
g.append("g") |
|
.attr("class", "axis axis--x") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x)); |
|
|
|
/* |
|
//Supr provisional. supose that politics data are |
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y)) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y",6) |
|
.attr("dy", "0.71em") |
|
.attr("fill", "#000") |
|
.text("Cantidad de políticos"); |
|
*/ |
|
|
|
var lastname = g.selectAll(".politicos.lastname") |
|
.data(lastnames) |
|
.enter().append("g") |
|
.attr("class", "lastname"); |
|
|
|
lastname.append("path") |
|
.attr("class", "line") |
|
.attr("d", function(d) { return line(d.values); }) |
|
.style("stroke", function(d) { return z(d.id); }); |
|
|
|
lastname.append("text") |
|
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) |
|
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.count) + ")"; }) |
|
.attr("x", 3) |
|
.attr("dy", "0.35em") |
|
.style("font", "10px sans-serif") |
|
.text(function(d) { return d.id; }); |
|
|
|
lastname.append("text") |
|
.attr("x", width -281) |
|
.attr("y", 150 ) |
|
.attr("dy", "0.34em") |
|
.style("font", "11px sans-serif") |
|
.text("First elections after \n\r 1991 constitucional");//TODO print lastname |
|
|
|
|
|
|
|
}); |
|
} |
|
|
|
function type(d, _, columns) { |
|
d.date = parseTime(d.date); |
|
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; |
|
return d; |
|
} |
|
|
|
|
|
function mypath(ruta) |
|
{ |
|
|
|
{d3.json(ruta, function(error, data) |
|
{ |
|
if (error) throw error; |
|
|
|
|
|
data.forEach(function(d) { |
|
d.year = parseTime(d.year); |
|
d.value = +d.value; |
|
}); |
|
console.log(JSON.stringify(data) ) ; |
|
|
|
//x.domain(d3.extent(data, function(d) { return d.year; })); |
|
|
|
maxY = Math.max(d3.max(data, function(d) { return d.value; }) * 1.005, maxY); |
|
|
|
y.domain([0, maxY]); //comentelo y sencillo |
|
|
|
|
|
|
|
|
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y)) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y",6) |
|
.attr("dy", "0.71em") |
|
.attr("fill", "#000") |
|
.text("Cantidad de políticos"); |
|
|
|
|
|
var mypath = g//.selectAll("lastname") |
|
.append("g") |
|
.attr("class", "lastname"); |
|
/*.datum(data) |
|
.enter()*/; |
|
|
|
mypath.append("path") |
|
.datum(data) |
|
.attr("class", "myline") //myline |
|
.attr("d", myline);// function(d) { return myline(d.values); }); |
|
|
|
|
|
mypath.append("text") |
|
.attr("x", width +-780) |
|
.attr("dy", "0.34em") |
|
.style("font", "30px serif") |
|
.text(currentlastname+" last name");//TODO print lastname |
|
|
|
|
|
//Interactivity |
|
|
|
var focus = g.append("g") |
|
.attr("class", "focus") |
|
.style("display", "none"); |
|
|
|
focus.append("myline") |
|
.attr("class", "x-hover-line hover-line") |
|
.attr("y1", 0) |
|
.attr("y2", height); |
|
|
|
focus.append("myline") |
|
.attr("class", "y-hover-line hover-line") |
|
.attr("x1", width) |
|
.attr("x2", width); |
|
|
|
focus.append("circle") |
|
.attr("r", 7.5); |
|
|
|
focus.append("text") |
|
.attr("x", 15) |
|
.attr("y", -15) |
|
.attr("dy", ".31em"); |
|
|
|
svg.append("rect") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") |
|
.attr("class", "overlay") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.on("mouseover", function() { focus.style("display", null); }) |
|
.on("mouseout", function() { focus.style("display", "none"); }) |
|
.on("mousemove", mousemove); |
|
|
|
console.log("maxY0 "+maxY); |
|
|
|
function mousemove() { |
|
var x0 = x.invert(d3.mouse(this)[0]), |
|
i = bisectDate(data, x0, 1), |
|
d0 = data[i - 1], |
|
d1 = data[i], |
|
d = x0 - d0.year > d1.year - x0 ? d1 : d0; |
|
focus.attr("transform", "translate(" + x(d.year) + "," + y(d.value) + ")"); |
|
focus.select("text").text(function() { return d.value; }); |
|
focus.select(".x-hover-line").attr("y2", height - y(d.value)); |
|
focus.select(".y-hover-line").attr("x2", width + width); |
|
} |
|
|
|
console.log("maxY1 "+maxY); |
|
|
|
//update politicos |
|
|
|
y.domain([0, maxY]); |
|
|
|
return maxY; |
|
|
|
}); |
|
} |
|
} |
|
|
|
y.domain([0, maxY]); //comentelo y sencillo |
|
|
|
/* |
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y)) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y",6) |
|
.attr("dy", "0.71em") |
|
.attr("fill", "#000") |
|
.text("Cantidad de políticos");*/ |
|
|
|
|
|
</script> |