Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active March 11, 2020 02:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save mbostock/7341714 to your computer and use it in GitHub Desktop.
Save mbostock/7341714 to your computer and use it in GitHub Desktop.
Bar Chart IIc
license: gpl-3.0
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
</style>
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width);
d3.tsv("data.tsv", type, function(error, data) {
x.domain([0, d3.max(data, function(d) { return d.value; })]);
chart.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", function(d) { return x(d.value); })
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d.value) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.value; });
});
function type(d) {
d.value = +d.value; // coerce to number
return d;
}
</script>
@DavidMzq
Copy link

DavidMzq commented Apr 9, 2019

Hi Mike,

Good afternoon.

I'm learning your series tutorial from https://bost.ocks.org/mike/bar/2/, which is really good for beginner like me to handle D3.

While all previous pages (no SVG, or Raw SVG) works by showing the bar chart, but for this one (use data.tsv) and the previous one (SVG+ embedded data), nothing showed up in the page.

should I add something within the index.html showed above?

Thanks,
David

@DavidMzq
Copy link

I figured it out. the problem is from this line: var x = d3.scale.linear()
"linear" cannot be identified by my d3 even use https://d3js.org/d3.v4.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment