Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Mar 11, 2020
Embed
What would you like to do?
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

DavidMzq commented Apr 11, 2019

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