xxxxxxxxxx<html lang='en-GB'><head></head><style> p { font-family: sans-serif; font-size: 14px; margin-bottom: 0; } /*template styles*/ .gia-chart-wrapper { max-width: 620px; margin: 0 auto; } /*chart styles*/ .y.axis line { fill: none; stroke: #dcdcdc; stroke-dasharray: 1px 1px; shape-rendering: crispEdges; stroke-width: 1px; } .x.axis line { fill: none; stroke: #333333; shape-rendering: crispEdges; stroke-width: 1px; } .tick.g-baseline line { stroke: #333333; stroke-dasharray: 0; stroke-width: 1px; } .axis text { font-family: sans-serif; font-size: 12px; pointer-events: none; fill: #bdbdbd; } .y.axis text { text-anchor: end !important; font-size:12px; fill: #bdbdbd; } .domain { display: none; } .area { fill: #eaeaea; opacity: 0.5; } .g-label-text { font-family: sans-serif; font-size: 14px; } .g-label-circle { fill: #4bc6df; } .blueLine { stroke: #005689; stroke-width: 2px; fill: none; } .redLine { stroke: #d61d00; stroke-width: 2px; fill: none; } .labelBlue { font-family: sans-serif; font-size: 14px; font-weight: 700; fill: #005689; text-anchor: end; } .labelRed { font-family: sans-serif; font-size: 14px; font-weight: 700; fill: #d61d00; text-anchor: start; }</style><body> <main> <div class='gia-chart-wrapper'> <div class='gia-chart'></div> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <script> //Margin conventions var margin = {top: 20, right: 10, bottom: 30, left: 65}; var widther = d3.select(".gia-chart").node().clientWidth; var width = widther - margin.left - margin.right, height = 330 - margin.top - margin.bottom; //Parses date for correct time format var parseDate = d3.time.format("%Y").parse; //Comma format format = d3.format("0,000"); //Appends the svg to the chart-container div var svg = d3.select(".gia-chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Creates the xScale var xScale = d3.time.scale() .range([0, width]); //Creates the yScale var yScale = d3.scale.linear() .range([height, 0]); //Defines the y axis styles var yAxis = d3.svg.axis() .scale(yScale) .tickSize(-width) .tickPadding(8) .ticks(6) .tickFormat(function(d) { return "$" + format(d); }) .orient("left"); //line function convention (feeds an array) var blueLine = d3.svg.line() .x(function(d) { return xScale(d.year); }) .y(function(d) { return yScale(d.blueValue); }); var redLine = d3.svg.line() .x(function(d) { return xScale(d.year); }) .y(function(d) { return yScale(d.redValue); }); //Loads the data d3.csv("homeValue.csv", ready); function ready(err, data) { if (err) throw "error loading data"; //FORMAT data data.forEach(function(d) { d.blueValue = +d.blueValue; d.redValue = +d.redValue; d.year = parseDate(d.year); }); //Organizes the data data.sort(function(a,b) { return a.year - b.year; }); var maxY = d3.max(data, function(d) { return d.blueValue; }); var maxX = d3.max(data, function(d) { return d.year; }); //Area var indexes = d3.range(data.length); var area = d3.svg.area() .x(function(d) {return xScale(d.year); }) .y0(function(d) { return yScale(d.blueValue); }) .y1(function(d) { return yScale(d.redValue); }); //Defines the y axis styles var xAxis = d3.svg.axis() .scale(xScale) .tickPadding(8) .orient("bottom") .ticks(6) .tickFormat(d3.time.format("%Y")); //Defines the xScale max xScale.domain(d3.extent(data, function(d) { return d.year; })); //Defines the yScale max yScale.domain([0, maxY]); //Appends the y axis var yAxisGroup = svg.append("g") .attr("class", "y axis") .call(yAxis) .selectAll("g") .classed("g-baseline", function(d) {return d == 0}); //Appends the x axis var xAxisGroup = svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); //Area in between var drawarea = svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); //Data join for paths var drawBlueLine = svg.append("path") .datum(data) .attr("class", "blueLine") .attr("d", blueLine); //Data join for paths var drawRedLine = svg.append("path") .datum(data) .attr("class", "redLine") .attr("d", redLine); //Append labels var labelBlue = svg.append("text") .text("Blue states") .attr("class", "labelBlue") .attr("x", width/1.625) .attr("y", height/5); var labelRed = svg.append("text") .text("Red states") .attr("class", "labelRed") .attr("x", width/1.575) .attr("y", height/1.55); //RESPONSIVENESS d3.select(window).on("resize", resized); function resized() { //new margin var newMargin = {top: 20, right: 10, bottom: 30, left:65}; var newWidther = d3.select(".gia-chart").node().clientWidth; var newWidth = newWidther - newMargin.left - newMargin.right; //Change the width of the svg d3.select("svg") .attr("width", newWidth + newMargin.left + newMargin.right); //Change the xScale xScale .range([0, newWidth]); //Update the blue line blueLine = d3.svg.line() .x(function(d) { return xScale(d.year); }) .y(function(d) { return yScale(d.blueValue); }); d3.selectAll('.blueLine') .attr("d", blueLine); //Update the red line redLine = d3.svg.line() .x(function(d) { return xScale(d.year); }) .y(function(d) { return yScale(d.redValue); }); d3.selectAll('.redLine') .attr("d", redLine); //Updates xAxis d3.selectAll(".x.axis") .call(xAxis); //Updates ticks xAxis .scale(xScale) .ticks(6); //Updates yAxis d3.selectAll(".y.axis") .call(yAxis); yAxis .tickSize(-newWidth); //Updates labels labelBlue .attr("x", newWidth/1.625); labelRed .attr("x", newWidth/1.575); //Updates area area = d3.svg.area() .x(function(d) {return xScale(d.year); }) .y0(function(d) { return yScale(d.blueValue); }) .y1(function(d) { return yScale(d.redValue); }); d3.selectAll('.area') .attr("d", area); }; } </script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js