Skip to content

Instantly share code, notes, and snippets.

Last active Mar 11, 2020
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">
.chart rect {
fill: steelblue;
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
<svg class="chart"></svg>
<script src="//"></script>
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.range([0, width]);
var chart =".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")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
.attr("width", function(d) { return x(d.value); })
.attr("height", barHeight - 1);
.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;
Copy link

DavidMzq commented Apr 9, 2019

Hi Mike,

Good afternoon.

I'm learning your series tutorial from, 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?


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

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