Zoomable Reusable Line Chart with the possibility to choose a dataset.
In origin the datasets are retrieved by an XMLHttpRequest(); request.
Last active
December 12, 2015 08:19
-
-
Save vertighel/4743409 to your computer and use it in GitHub Desktop.
Zoomable Line Chart with dataset selection
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="utf8"></meta> | |
| <title>Zoomable Reusable Line Chart</title> | |
| <style type="text/css"> | |
| svg{border: 1px dashed gray} | |
| .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } | |
| text { font-family: sans-serif; font-size: 11px; } | |
| .rectzoom{fill: transparent} | |
| .line { fill: none; stroke-width: 3px; } | |
| </style> | |
| <body> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <select> | |
| <option value="dataset1" selected>dataset1</option> | |
| <option value="dataset2">dataset2</option> | |
| </select> | |
| <article></article> | |
| <script> | |
| //////////////////////////////////////////////////////////// | |
| d3.taos = function(config){ | |
| var margin = {top: 20, right: 20, bottom: 20, left: 60}, | |
| width = 960 - margin.left - margin.right, | |
| height = 400 - margin.top - margin.bottom, | |
| x = d3.scale.linear(), | |
| y = d3.scale.linear(), | |
| xaxis = d3.svg.axis().scale(x).orient("bottom").ticks(5), | |
| yaxis = d3.svg.axis().scale(y).orient("left").ticks(5), | |
| line = d3.svg.line(), | |
| color=d3.scale.category10(), | |
| zoom = d3.behavior.zoom().scaleExtent([0.5, 50]); | |
| var chart = function(selection){ | |
| dataset=selection.data()[0] | |
| // Select the svg element, if it exists. | |
| var svg = selection.selectAll("svg").data([dataset]) | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| // Otherwise, create the skeletal chart. | |
| var genter = svg.enter().append("svg") | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| genter.append("g").attr("class", "x axis"); | |
| genter.append("g").attr("class", "y axis"); | |
| genter.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("id", "clip-rect") | |
| .attr("x", "0") | |
| .attr("y", "0") | |
| .attr("width", width) | |
| .attr("height", height); | |
| x.range([0, width]) | |
| .domain(d3.extent(d3.merge(dataset), function (d) { return d.x; }) ) | |
| y.range([height, 0]) | |
| .domain(d3.extent(d3.merge(dataset), function (d) { return d.y; })) | |
| var g = svg.select("g") | |
| // Update the x-axis. | |
| g.select(".x.axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xaxis); | |
| // Update the y-axis. | |
| g.select(".y.axis") | |
| .call(yaxis); | |
| //Define lines | |
| line = d3.svg.line() | |
| .x(function (d) { return x(d.x); }) | |
| .y(function (d) { return y(d.y); }) | |
| var path = g.selectAll(".line") | |
| .data(dataset) | |
| .enter().append("path") | |
| .style('stroke',function(d,i){return color(i)}) | |
| path.attr("class", "line") | |
| .attr("d", line) | |
| .attr("clip-path", "url(#clip)") | |
| // Update the clip rectangle | |
| g.select("#clip-rect") | |
| .attr("width",width) | |
| .attr("height",height) | |
| // Update the line path. | |
| g.selectAll(".line") | |
| .attr("d", line); | |
| zoom.x(x).y(y) | |
| .on("zoom", draw); | |
| // rect for zoom | |
| genter.append("rect") | |
| .attr("class", "rectzoom") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .call(zoom); | |
| function draw() { | |
| g.select(".x.axis").call(xaxis); | |
| g.select(".y.axis").call(yaxis); | |
| g.selectAll("path.line").attr('d', line) | |
| // g.select("#clip-rect").attr("width",width).attr("height",height) | |
| } | |
| ///////// methods ///////// | |
| chart.width = function(_) { | |
| if (!arguments.length) return width; | |
| width = _; | |
| return this; | |
| }; | |
| chart.height = function(_) { | |
| if (!arguments.length) return height; | |
| height = _; | |
| return this; | |
| }; | |
| return chart | |
| } // chart | |
| return chart | |
| } // d3.taos | |
| ///////////// MAIN //////////////// | |
| var dataset1= [ | |
| [ | |
| {x:1,y:10}, | |
| {x:2,y:21}, | |
| {x:3,y:13}, | |
| {x:4,y:23}, | |
| ], | |
| [ | |
| {x:1,y:23}, | |
| {x:2,y:12}, | |
| {x:3,y:44}, | |
| {x:4,y:22}, | |
| ] | |
| ] | |
| var dataset2= [ | |
| [ | |
| {x:1,y:10}, | |
| {x:2,y:21}, | |
| {x:3,y:15}, | |
| {x:4,y:13}, | |
| ], | |
| [ | |
| {x:1,y:20}, | |
| {x:2,y:21}, | |
| {x:3,y:25}, | |
| {x:4,y:23}, | |
| ] | |
| ] | |
| // new instance | |
| var t = d3.taos(); | |
| var f = function(){} | |
| // Creation | |
| d3.select("article") | |
| .datum(dataset1) | |
| .call(t) | |
| // Update | |
| d3.select('select').on("change",function(){ | |
| var curve = $("select").val(); | |
| curve=="dataset1"? dataset=dataset1 : dataset=dataset2 | |
| d3.select("article") | |
| .datum(dataset) | |
| .call(t.width(800)); | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment