Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active March 11, 2020 02:36
Show Gist options
  • Save mbostock/7341714 to your computer and use it in GitHub Desktop.
Save mbostock/7341714 to your computer and use it in GitHub Desktop.
Download ZIP
Bar Chart IIc
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
data.tsv
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42
Raw
index.html
<!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