Skip to content

Instantly share code, notes, and snippets.

@blockspring
Last active August 29, 2015 14:02
Show Gist options
  • Save blockspring/4bd3abbab344a312d4b1 to your computer and use it in GitHub Desktop.
Save blockspring/4bd3abbab344a312d4b1 to your computer and use it in GitHub Desktop.
BlockSpring - A Basic Stream Graph.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
renderStream();
function renderStream(){
// Set width and height.
var width = 950,
height = 500;
// Hardcode the csv data.
var csv =
[
{value: 10, series: "one"},
{value: 20, series: "one"},
{value: 90, series: "one"},
{value: 30, series: "one"},
{value: 90, series: "one"},
{value: 50, series: "one"},
{value: 10, series: "one"},
{value: 40, series: "one"},
{value: 10, series: "one"},
{value: 30, series: "one"},
{value: 50, series: "one"},
{value: 20, series: "one"},
{value: 30, series: "one"},
{value: 40, series: "two"},
{value: 30, series: "two"},
{value: 10, series: "two"},
{value: 20, series: "two"},
{value: 30, series: "two"},
{value: 50, series: "two"},
{value: 30, series: "two"},
{value: 90, series: "two"},
{value: 30, series: "two"},
{value: 20, series: "two"},
{value: 60, series: "two"},
{value: 80, series: "two"},
{value: 75, series: "two"},
];
// Hardcode series headers.
var streamHeightHeader = "value";
var seriesHeader = "series";
// Get unique list of series
var uniqueSeries = findUniqueSeries(csv);
var m = uniqueSeries.length; // number of series
// Transform csv data
var data = transformCSV(csv, uniqueSeries);
var n = data[0].length; // number of values assuming each series has equal # of values.
// set scales for x and y positions, and area size.
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangePoints([0, height], 1);
var z = d3.scale.linear()
.domain(d3.extent(csv, function(d){ return d[streamHeightHeader]; }))
.range([0, height / (2*m)]);
// set scales for color.
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
// instantiate area function.
var area = d3.svg.area()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y0(function(d) { return -z(d); })
.y1(function(d) { return z(d); });
// add svg to dom.
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
// add area plots to dom.
svg.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
.style("fill", function(d, i) { return color(i); })
.attr("d", area);
function findUniqueSeries(csv){
// Get a unique list of series.
var uniqueSeries = d3.set(csv.map(function(row){
return row[seriesHeader];
})).values();
return uniqueSeries;
}
function transformCSV(csv, uniqueSeries){
// Transform csv data into array of arrays.
var dataObject = {};
uniqueSeries.forEach(function(series){
dataObject[series] = [];
})
csv.forEach(function(row){
dataObject[row[seriesHeader]].push(row[streamHeightHeader]);
})
return d3.values(dataObject);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment