Skip to content

Instantly share code, notes, and snippets.

@crayzeewulf
Last active April 7, 2019 09:41
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save crayzeewulf/9719255 to your computer and use it in GitHub Desktop.
Line Chart of XY Datasets
<!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>
@artyil
Copy link

artyil commented Mar 11, 2015

won't really effect anything but in case I'm wrong - remove the . from the class name:
.attr("class", ".d3_xy_chart_line") ;

And thanks for the example !

@crayzeewulf
Copy link
Author

Thank, @artyil. I've fixed the gist as you suggested.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment