Skip to content

Instantly share code, notes, and snippets.

@chrisbrich

chrisbrich/index.html

Created June 19, 2012 02:22
Show Gist options
  • Save chrisbrich/2951960 to your computer and use it in GitHub Desktop.
Save chrisbrich/2951960 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart with defaults example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Line Chart</title>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<link href="lineplot.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript">
function linePlot() {
//Defaults//
var margin = {"top": 20, "right": 20, "bottom": 20, "left": 20},
width = 400,
height = 400,
xAxis = d3.svg.axis().orient("bottom").tickSize(-height),
yAxis = d3.svg.axis().orient("left").tickSize(-width);
//Plot/Replot//
function chart(selection) {
selection.each(function(data) {
// Update the x-scale.
xScale = d3.scale.linear()
.domain([data[0][0],data[9][0]])
.range([0, width]);
// Update the y-scale.
yScale = d3.scale.linear()
.domain([data[0][1],data[9][1]])
.range([height, 0]);
xAxis.scale(xScale);
yAxis.scale(yScale);
//////////
//Enters//
//////////
// The Plot
var svg = d3.select(this),
container = svg.selectAll("g").data([data]),
gEnter = container.enter().append("g")
.attr("class","container");
// Axis
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class", "y axis");
// Plotarea
var plotarea = gEnter.append("g")
.attr("class","plotarea");
plotarea.append("rect")
.attr("class", "plotarea");
// Datapoints
var dp = svg.selectAll("g.container").select("g.plotarea").selectAll("g.circle")
.data(function(d){return d});
dp.enter().append("circle")
.attr("class", "circle");
var myline = d3.svg.line()
.interpolate("linear")
.x(function(b) {return xScale(b[0]); })
.y(function(b) {return yScale(b[1]); });
var path = svg.selectAll("g.container").select("g.plotarea").selectAll("path").data(function(d){return [d]})
path.enter().append("path");
// Updates //
// Update the outer dimensions.
svg.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// Update the inner dimensions.
var g = svg.selectAll("g.container")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update plotarea
var pa = g.select("g.plotarea");
pa.select("rect.plotarea")
.attr("width",width)
.attr("height",height);
// Update the axes.
g.select(".x.axis")
.attr("transform", "translate(0," + yScale.range()[0] + ")")
.call(xAxis);
g.select(".y.axis")
.attr("transform", "translate(0," + xScale.range()[0] + ")")
.call(yAxis);
// Update datapoints/line
g.selectAll("circle").attr("r",5)
.attr("transform",function(d){return "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")"})
g.selectAll("path")
.attr("d",function(d){return myline(d)})
// Exits //
dp.exit().remove()
});
}
//Accessors//
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.xScale = function(_) {
if (!arguments.length) return xScale;
xScale = _;
return chart;
};
chart.yScale = function(_) {
if (!arguments.length) return yScale;
yScale = _;
return chart;
};
return chart;
}
var data = [[0,0],[1,1],[2,4],[3,9],[4,16],[5,25],[6,36],[7,49],[8,64],[9,81]],
plot1 = linePlot().width(200).height(200),
plot2 = linePlot();
d3.select("body").append("svg").datum(data).style("float","left").call(plot1);
d3.select("body").append("svg").datum(data).style("float","left").call(plot2);
</script>
</body>
</html>
Raw
lineplot.css
.axis line,.axis path {
fill: none;
stroke: lightgrey;
}
rect {
fill-opacity: 0.0;
stroke: grey;
}
.plotarea path {
fill:none;
stroke-width:1.5px;
stroke:blue;
}
.plotarea circle {
stroke:blue;
fill:blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment