Skip to content

Instantly share code, notes, and snippets.

@terrysmith2000

terrysmith2000/a_chart.js

Forked from jhaubrich/a_chart.js
Created August 13, 2012 14:22
Show Gist options
  • Save terrysmith2000/3341196 to your computer and use it in GitHub Desktop.
Save terrysmith2000/3341196 to your computer and use it in GitHub Desktop.
Download ZIP
multiline chart using nvd3's preferred json structure
Raw
a_chart.js
var chart = d3.select("#chart").append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("id", "plotarea")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// DRAW DATALINES
path = chart.selectAll("path.dataline")
.data(data)
path.enter().append("path")
.attr("id", function (d) { return d.key; })
.attr("class", function (d) { return d.key.replace("-", " ")+" dataline"; })
.style("stroke-width", 2)
.style("stroke", "black")
.style("fill", "none")
.style("stroke-opacity", 0)
.transition()
.duration(1500)
.delay(1500)
.style("stroke-opacity", .1)
.attr('d', function (d) { return line(d.values)});
// DRAW DATAPOINTS
var group = chart.selectAll("g.datapoint") // need a svg:g for the outer loop
.data(data)
var g = group.enter().append("g")
.attr("class", function (d) { return d.key.replace("-", " ") + " datapoint"; })
.selectAll('circle')
.data(function (d) { return d.values; })
var circle = g.enter().append("circle")
.attr("cx", function(d) { return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); })
.attr("r", 3)
// .attr("stroke-opacity", 0)
.attr("fill-opacity", 0)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", selectpoint);
group.exit().remove()
Raw
data.json
data = [
{
"key":"brw-a",
"values":[
["2012-07-05T00:00:00", 0.0 ],
["2012-07-06T23:59:59", 1.0 ],
["2012-07-07T06:31:47", 0.0 ],
["2012-07-08T23:59:59", 3.0 ]
]
},
{
"key":"brw-c",
"values":[
["2012-07-11T00:00:00", 0.0 ],
["2012-07-07T00:00:00", 2.0 ],
["2012-07-05T23:59:59", 4.0 ]
]
},
{
"key" : "yfb-b",
"values" : [
[ "2012-07-11T00:00:00", 10.0 ],
[ "2012-07-11T02:33:56", 8.0 ],
[ "2012-07-11T02:55:58", 6.0 ],
[ "2012-07-11T10:58:04", 4.0 ],
[ "2012-07-11T11:16:48", 0.0 ],
[ "2012-07-11T14:36:35", 4.0 ],
[ "2012-07-11T15:08:25", 6.0 ],
[ "2012-07-11T15:12:15", 8.0 ],
[ "2012-07-11T15:26:40", 10.0 ],
[ "2012-07-11T23:59:59", 10.0 ],
[ "2012-07-10T12:53:56", 2.0 ],
[ "2012-07-10T12:55:41", 4.0 ],
[ "2012-07-10T12:59:12", 6.0 ],
[ "2012-07-10T13:01:59", 8.0 ],
[ "2012-07-10T14:15:49", 10.0 ],
[ "2012-07-10T23:59:59", 10.0 ],
[ "2012-07-09T00:00:00", 6.0 ],
[ "2012-07-09T08:29:41", 2.0 ],
[ "2012-07-08T12:03:59", 0.0 ],
[ "2012-07-08T14:28:47", 2.0 ],
[ "2012-07-08T15:19:16", 4.0 ],
[ "2012-07-05T20:47:41", 0.0 ],
[ "2012-07-05T23:59:59", 0.0 ]
]
},
{
"key" : "zau-b",
"values" : [
[ "2012-07-10T00:31:25", 10.0 ],
[ "2012-07-10T00:31:26", 6.0 ],
[ "2012-07-10T00:31:27", 0.0 ],
[ "2012-07-10T01:08:33", 4.0 ],
[ "2012-07-10T01:47:55", 6.0 ],
[ "2012-07-10T01:51:17", 12.0 ],
[ "2012-07-10T02:41:40", 14.0 ],
[ "2012-07-10T09:38:11", 10.0 ],
[ "2012-07-10T14:46:26", 12.0 ],
[ "2012-07-10T14:46:28", 14.0 ],
[ "2012-07-10T14:50:17", 16.0 ],
[ "2012-07-10T22:05:23", 14.0 ],
[ "2012-07-10T23:59:59", 14.0 ],
[ "2012-07-09T14:59:29", 6.0 ],
[ "2012-07-09T16:10:27", 2.0 ],
[ "2012-07-09T23:59:59", 2.0 ],
[ "2012-07-08T00:00:00", 0.0 ],
[ "2012-07-08T14:55:30", 2.0 ],
[ "2012-07-08T14:58:35", 4.0 ],
[ "2012-07-08T15:02:43", 6.0 ],
[ "2012-07-08T23:59:59", 6.0 ],
[ "2012-07-07T00:00:00", 0.0 ],
[ "2012-07-07T02:55:25", 2.0 ],
[ "2012-07-07T03:00:25", 4.0 ],
[ "2012-07-07T06:07:55", 6.0 ],
[ "2012-07-07T06:12:00", 8.0 ],
[ "2012-07-07T09:52:22", 6.0 ],
[ "2012-07-07T23:59:59", 6.0 ],
[ "2012-07-06T00:00:00", 10.0 ],
[ "2012-07-06T08:14:45", 8.0 ],
[ "2012-07-06T08:38:38", 6.0 ],
[ "2012-07-06T09:56:11", 4.0 ],
[ "2012-07-06T15:10:44", 6.0 ],
[ "2012-07-06T22:20:08", 2.0 ],
[ "2012-07-06T22:20:09", 0.0 ],
[ "2012-07-06T23:59:59", 0.0 ],
[ "2012-07-05T00:00:00", 0.0 ],
[ "2012-07-05T15:15:43", 2.0 ],
[ "2012-07-05T15:15:44", 4.0 ],
[ "2012-07-05T23:59:59", 4.0 ]
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment