Skip to content

Instantly share code, notes, and snippets.

@ibtimoussi
Last active November 9, 2017 10:40
Show Gist options
  • Save ibtimoussi/7bbc212a041cd82c50e9458749844ceb to your computer and use it in GitHub Desktop.
Save ibtimoussi/7bbc212a041cd82c50e9458749844ceb to your computer and use it in GitHub Desktop.
simple bar chat dataset
license: mit
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
K;10
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
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];
// No domain (yet!)
var x = d3.scaleLinear().range([0, 500]);
var y = d3.scaleLinear().range([0, 100])
var g = svg.append("g").attr("transform", "translate(100, 0)");
d3.text('dataset.csv', function(error, raw) {
console.log(raw);
// https://github.com/d3/d3-dsv
var dsv = d3.dsvFormat(';')
var data = dsv.parse(raw);
// Domain after data have been loaded!
x.domain([0, data.length]);
// Accessor for value
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.selectAll("text").data(data).enter().append("text")
.text(function(d) { return d.name; })
.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("y", function(d) {return 190 - y(d.value);})
.attr("x", function(d, i) { return x(i) + 5; })
.attr("width",40 )
.attr("height", function(d){return y(d.value);})
/* setInterval(function() {
data.forEach(function(d){
} )
}) */
setInterval(function(d) {
data.forEach(function(d) { d.value = Math.random(); });
y.domain([0, d3.max(data, function(d) { return d.value; })]);
g.selectAll("rect").data(data).transition().duration(100).delay(function(d)){
return i * 50;
}
.attr("y", function(d) { return 170 - y(d.value); })
.attr("height", function(d) { return y(d.value); }) }, 500)
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment