Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active October 10, 2017 14:06
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 romsson/194aa1ddc4735e82d7306dc69849db41 to your computer and use it in GitHub Desktop.
Save romsson/194aa1ddc4735e82d7306dc69849db41 to your computer and use it in GitHub Desktop.
Download ZIP
D3 bar chart with scales & dataset
Raw
.block
license: mit
Raw
dataset.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
name;value
A;22
B;32
C;21
D;23
E;10
F;22
G;11
H;19
I;30
J;50
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
rect {
fill: none;
stroke: black;
stroke-width: 1;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 260)
.attr("height", 500)
var max = d3.max([
{name: "B", value: "32"},
{name: "C", value: "21"}
], function(d) { return d.value; })
d3.text('dataset.csv', function(error, raw){
var dsv = d3.dsvFormat(';')
var data = dsv.parse(raw)
var h = 200;
var g = svg.selectAll("rect").data(data);
var xscale = d3.scaleLinear( )
.domain([0, d3.max(data, function(d) { return d.value; })])
.range([0, 120])
g.enter()
.append("rect")
.attr("y", function(d) { return 200 - xscale(d.value);})
.attr("x", function(d, i) { return 55 * i; })
.attr("width", 50)
.attr("height", function(d, i) { return xscale(d.value); });
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment