Built with blockbuilder.org
forked from romsson's block: simple bar chat with interaction
forked from RomyRatolojanahary's block: simple bar chat with interaction
forked from romsson's block: simple bar chat with interaction
license: mit |
Built with blockbuilder.org
forked from romsson's block: simple bar chat with interaction
forked from RomyRatolojanahary's block: simple bar chat with interaction
forked from romsson's block: simple bar chat with interaction
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
rect { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500); | |
var data = [22, 32, 21, 23, 10, 22, 11, 19, 30, 50]; | |
var x = d3.scale.linear().range([0, 500]).domain([0, data.length]); | |
var y = d3.scale.linear().range([0, 100]).domain([0, d3.max(data)]); | |
var g = svg.append("g").attr("transform", "translate(100, 0)"); | |
g.selectAll("text").data(data).enter().append("text") | |
.text(function(d) { return d; }) | |
.attr("y", 200) | |
.attr("x", function(d, i) { return x(i) + 20; }) | |
.style("font-size", 12) | |
.style("font-family", "monospace"); | |
g.selectAll("rect").data(data).enter().append("rect") | |
.attr("x", function(d, i) { return x(i); }) | |
.attr("y", function(d) { return 170 - y(d); }) | |
.attr("height", function(d) { return y(d); }) | |
.attr("width", 500 / data.length - 10 ) | |
var line = d3.svg.line() | |
.x(function(d, i) { return x(i) + x.bandwidth() /2 ; }) | |
.y(function(d) { return 200 - y(d); }); | |
var s = svg.selectAll("path").data([data]).enter() | |
.append("path") | |
.attr("d", function(d) { return line(d); }) | |
</script> | |
</body> |