Skip to content

Instantly share code, notes, and snippets.

@aendrew aendrew/_.md

Created Jun 3, 2013
Embed
What would you like to do?
Single-stack line chart
{"description":"Single-stack line chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
var margin = {top: 20, right: 10, bottom: 20, left: 10}
var width = 800 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom
var terms = [
{"node": "spicy",
"weight": "1000",
"edges": ["peaty", "earthy", "citrus", "fruit"]
},
{"node": "peaty",
"weight": "300",
"edges": ["spicy", "earthy"]
},
{"node": "citrus",
"weight": "200",
"edges": ["spicy", "fruit"]
},
{"node": "fruit",
"weight": "400",
"edges": ["spicy", "citrus"]
},
{"node": "earthy",
"weight": "700",
"edges": ["spicy", "peaty"]
},
{"node": "malt",
"weight": "700",
"edges": ["spicy", "peaty"]
}
]
var svg = d3.select('svg')
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.linear()
.domain([0, d3.sum(terms, function(d, i) {return d.weight;})])
.range([0, width])
var color = d3.scale.category20();
svg.selectAll("rect")
.data(terms, function(d){return d.node})
.enter().append("rect")
.attr("x", function(d, i){var x_return = 0; for (var inc=0; inc < i; inc++) {x_return += x(terms[inc].weight) + 2} return x_return;})
.attr("y", 0)
.attr("width", function(d, i) { return x(d.weight) })
.attr("height", 20)
.attr("fill", function(d,i){return color(i);});
var lines = svg.append("g")
lines.selectAll("rect").data(terms, function(d){return d.node})
.enter().append("rect").attr("x", function(d, i){var x_return = 0; for (var inc=0; inc < i; inc++) {x_return += x(terms[inc].weight) + 2} return x_return;})
.attr("y", 22)
.attr("width", function(d, i) { return x(d.weight) })
.attr("height", 20)
.attr("fill", "black");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.