xxxxxxxxxx<html lang='en-GB'><head></head><style> body { font-family: sans-serif; font-size: 16px; line-height: 1.4; display: block; margin: 0; padding: 0; color: #333; -webkit-font-smoothing: antialiased; } p { font-family: sans-serif; font-size: 14px; } /*chart styles*/ .gia-chart { max-width: 620px; } .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; } .line { stroke: #4bc6df; stroke-width: 2px; fill: none; } .area { fill: #4bc6df; opacity: 0.1; } .g-label-text { font-family: sans-serif; font-size: 14px; } .g-label-circle { fill: #4bc6df; } .gia-key { margin-bottom: 10px; } button { background-color: #ffffff; border: 1px solid #dcdcdc; border-radius: 15px; color: #333333; padding: 5px 8px; cursor: pointer; display: inline-block; margin-right: 10px; text-align: center; text-decoration: none; font-size: 12px; line-height: 20px; font-family: sans-serif; } button:focus { outline: 0; } .active { background-color: #333333; color: #ffffff; }</style><body> <main> <div class='gia-key'></div> <div class='gia-chart'></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: 10, right: 10, bottom: 30, left: 50}; var widther = d3.select(".gia-chart").node().clientWidth; var width = widther - margin.left - margin.right, height = 350 - margin.top - margin.bottom; //Parses date for correct time format var parseDate = d3.time.format("%d-%b-%y").parse; //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) .tickFormat(function(d) { return "$" + d + ".00"; }) .orient("left"); //Defines the y axis styles var xAxis = d3.svg.axis() .scale(xScale) .tickPadding(8) .orient("bottom") .ticks(8) .tickFormat(d3.time.format("%Y")); //line function convention (feeds an array) var line = d3.svg.line() .interpolate("step-after") .x(function(d) { return xScale(d.date); }) .y(function(d) { return yScale(d.dollar); }); //Loads the data d3.csv("minwage.csv", ready); function ready(err, data) { if (err) throw "error loading data"; //FORMAT data data.forEach(function(d) { d.dollar = +d.dollar; d.date = parseDate(d.date); }); //Organizes the data data.sort(function(a,b) { return a.date - b.date; }); var maxY = d3.max(data, function(d) { return d.dollar; }); var maxX = d3.max(data, function(d) { return d.date; }); //Defines the xScale max xScale.domain(d3.extent(data, function(d) { return d.date; })); //Defines the yScale max yScale.domain([0, 10]); //Organizes buttons data var types = data.map(function(d) { return d.type;}); var uniq = d3.set(types).values(); //Buttons var button = d3.select(".gia-key").selectAll("button") .data(uniq) .enter() .append("button") .attr("class", function (d) { if ( d === "Unadjusted dollars" ) { return 'active'; } else { return 'not-active'; } }) .text(function(d) {return d;}) .on("click", function(d) { updateChartForType(d); d3.select(".active").classed("active", false); d3.select(this).classed("active", true); }); //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); //Filters the data initialType = data.filter(function(d) { return d.type === "Unadjusted dollars";}); //Binds the data to the line var drawline = svg.append("path") .datum(initialType) .attr("class", "line") .attr("d", line); //Update chart on click function updateChartForType(typeId) { var typeData = data.filter(function(d) { return d.type === typeId;}); drawline .datum(typeData) .transition().duration(1000) .attr("d", line); } //RESPONSIVENESS d3.select(window).on("resize", resized); function resized() { //new margin var newMargin = {top: 10, right: 10, bottom: 30, left: 50}; 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 line line = d3.svg.line() .interpolate("step-after") .x(function(d) { return xScale(d.date); }) .y(function(d) { return yScale(d.dollar); }); d3.selectAll('.line') .attr("d", line); //Updates xAxis xAxisGroup .call(xAxis); //Updates ticks xAxis .scale(xScale) .ticks(6); //Updates yAxis yAxis .tickSize(-newWidth) }; } </script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js