This example shows how to plot XY data (in two separate arrays) on a D3-based line chart using the method described in Towards Reusable Charts. View the example at http://bl.ocks.org/crayzeewulf/9719255.
Last active
April 7, 2019 09:41
-
-
Save crayzeewulf/9719255 to your computer and use it in GitHub Desktop.
Line Chart of XY Datasets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid path, | |
| .grid line { | |
| fill: none; | |
| stroke: rgba(0, 0, 0, 0.25); | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .line { | |
| fill: none; | |
| stroke-width: 2.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var data = [ { label: "Data Set 1", | |
| x: [0, 1, 2, 3, 4], | |
| y: [0, 1, 2, 3, 4] }, | |
| { label: "Data Set 2", | |
| x: [0, 1, 2, 3, 4], | |
| y: [0, 1, 4, 9, 16] } ] ; | |
| var xy_chart = d3_xy_chart() | |
| .width(960) | |
| .height(500) | |
| .xlabel("X Axis") | |
| .ylabel("Y Axis") ; | |
| var svg = d3.select("body").append("svg") | |
| .datum(data) | |
| .call(xy_chart) ; | |
| function d3_xy_chart() { | |
| var width = 640, | |
| height = 480, | |
| xlabel = "X Axis Label", | |
| ylabel = "Y Axis Label" ; | |
| function chart(selection) { | |
| selection.each(function(datasets) { | |
| // | |
| // Create the plot. | |
| // | |
| var margin = {top: 20, right: 80, bottom: 30, left: 50}, | |
| innerwidth = width - margin.left - margin.right, | |
| innerheight = height - margin.top - margin.bottom ; | |
| var x_scale = d3.scale.linear() | |
| .range([0, innerwidth]) | |
| .domain([ d3.min(datasets, function(d) { return d3.min(d.x); }), | |
| d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ; | |
| var y_scale = d3.scale.linear() | |
| .range([innerheight, 0]) | |
| .domain([ d3.min(datasets, function(d) { return d3.min(d.y); }), | |
| d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ; | |
| var color_scale = d3.scale.category10() | |
| .domain(d3.range(datasets.length)) ; | |
| var x_axis = d3.svg.axis() | |
| .scale(x_scale) | |
| .orient("bottom") ; | |
| var y_axis = d3.svg.axis() | |
| .scale(y_scale) | |
| .orient("left") ; | |
| var x_grid = d3.svg.axis() | |
| .scale(x_scale) | |
| .orient("bottom") | |
| .tickSize(-innerheight) | |
| .tickFormat("") ; | |
| var y_grid = d3.svg.axis() | |
| .scale(y_scale) | |
| .orient("left") | |
| .tickSize(-innerwidth) | |
| .tickFormat("") ; | |
| var draw_line = d3.svg.line() | |
| .interpolate("basis") | |
| .x(function(d) { return x_scale(d[0]); }) | |
| .y(function(d) { return y_scale(d[1]); }) ; | |
| var svg = d3.select(this) | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") ; | |
| svg.append("g") | |
| .attr("class", "x grid") | |
| .attr("transform", "translate(0," + innerheight + ")") | |
| .call(x_grid) ; | |
| svg.append("g") | |
| .attr("class", "y grid") | |
| .call(y_grid) ; | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + innerheight + ")") | |
| .call(x_axis) | |
| .append("text") | |
| .attr("dy", "-.71em") | |
| .attr("x", innerwidth) | |
| .style("text-anchor", "end") | |
| .text(xlabel) ; | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(y_axis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", "0.71em") | |
| .style("text-anchor", "end") | |
| .text(ylabel) ; | |
| var data_lines = svg.selectAll(".d3_xy_chart_line") | |
| .data(datasets.map(function(d) {return d3.zip(d.x, d.y);})) | |
| .enter().append("g") | |
| .attr("class", "d3_xy_chart_line") ; | |
| data_lines.append("path") | |
| .attr("class", "line") | |
| .attr("d", function(d) {return draw_line(d); }) | |
| .attr("stroke", function(_, i) {return color_scale(i);}) ; | |
| data_lines.append("text") | |
| .datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; }) | |
| .attr("transform", function(d) { | |
| return ( "translate(" + x_scale(d.final[0]) + "," + | |
| y_scale(d.final[1]) + ")" ) ; }) | |
| .attr("x", 3) | |
| .attr("dy", ".35em") | |
| .attr("fill", function(_, i) { return color_scale(i); }) | |
| .text(function(d) { return d.name; }) ; | |
| }) ; | |
| } | |
| chart.width = function(value) { | |
| if (!arguments.length) return width; | |
| width = value; | |
| return chart; | |
| }; | |
| chart.height = function(value) { | |
| if (!arguments.length) return height; | |
| height = value; | |
| return chart; | |
| }; | |
| chart.xlabel = function(value) { | |
| if(!arguments.length) return xlabel ; | |
| xlabel = value ; | |
| return chart ; | |
| } ; | |
| chart.ylabel = function(value) { | |
| if(!arguments.length) return ylabel ; | |
| ylabel = value ; | |
| return chart ; | |
| } ; | |
| return chart; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank, @artyil. I've fixed the gist as you suggested.