Skip to content

Instantly share code, notes, and snippets.

@vertighel

vertighel/README.md

Last active December 12, 2015 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vertighel/4743409 to your computer and use it in GitHub Desktop.
Save vertighel/4743409 to your computer and use it in GitHub Desktop.
Download ZIP
Zoomable Line Chart with dataset selection
Raw
README.md

Zoomable Reusable Line Chart with the possibility to choose a dataset. In origin the datasets are retrieved by an XMLHttpRequest(); request.

Raw
index.html
<!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