This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Multi-Series Line Chart
forked from damayor's block: Politican Last Names Line Chart
xxxxxxxxxx<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("https://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> https://d3js.org/d3.v4.min.js