Skip to content

Instantly share code, notes, and snippets.

@trinary

trinary/README.md

Last active November 2, 2015 22:09
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 trinary/a1755cf188ca83fab952 to your computer and use it in GitHub Desktop.
Save trinary/a1755cf188ca83fab952 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
font: 10px sans-serif;
}
svg { width: 100%; height: 100%; }
.line path { fill: none; stroke-width: 1.5px}
.domain { fill: none; stroke-width: 2px;}
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 11, bottom: 30, left: 20};
var width = 905 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = {
class_1: [
["2015-10-15", 550],
["2015-10-16", 550],
["2015-10-17", 550],
["2015-10-18", 550],
["2015-10-19", 550],
["2015-10-20", 400],
["2015-10-21", 400],
["2015-10-22", 400],
["2015-10-20", 550]
],
class_2: [
["2015-10-15", 550],
["2015-10-16", 400],
["2015-10-17", 400],
["2015-10-18", 400],
["2015-10-19", 550],
["2015-10-20", 550],
["2015-10-21", 550],
["2015-10-22", 550],
["2015-10-20", 550]
]
};
var transformedData = d3.entries(data);
console.log(transformedData); // go from nested object to array of key/value.
// this is what d3's data() function expects.
var xScale = d3.time.scale()
.domain([new Date("2015-10-15"),new Date("2015-10-22")])
.range([0,width]);
var yScale = d3.scale.linear()
.domain([0,600])
.range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + (height) + ")")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(" + margin.left + ", 0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) { return xScale(new Date(d[0]));})
.y(function(d) { return yScale(d[1]);})
.interpolate("basis");
var lineContainer = svg.append("g").classed("lines", true)
.attr("transform", "translate(" + margin.left + ", 0)");
var lines = lineContainer.selectAll(".line")
.data(transformedData)
.enter()
.append("g")
.classed("line", true)
.append("path")
.attr("d", function(d) { return lineGen(d.value);} )
.attr("stroke", function(d, i) { return i === 0 ? "green" : "blue"});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment