-
Notifications
You must be signed in to change notification settings - Fork 0
/
004_bar2_tsv.js
56 lines (42 loc) · 1.13 KB
/
004_bar2_tsv.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
* Reference: https://bost.ocks.org/mike/bar/2/
* Note #1: tsv use Promise to load data
*
*/
const width = 800;
const barHeight = 30;
const height = 600;
const x = d3.scaleLinear()
.range([0,width]);
/* The wrapper: chart */
const chart = d3.select(".chart")
.attr("width", width);
// .attr("height", height);
/**
* Note #1
*/
d3.tsv("tsv/data_004_bar2_tsv.tsv", d => {
d.value = +d.value;
return d;
}).then( data => {
console.log(data);
x.domain([0, d3.max( data, d => d.value )]);
chart.attr("height", barHeight * data.length);
const bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", (d,i) => "translate(0," + i * barHeight + ")" );
bar.append("rect")
.attr("width", d => x(d.value) )
.attr("height", barHeight-1);
bar.append("text")
.attr("x", d => x(d.value) - 3 )
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text( d => d.value );
bar.append("text")
.attr("x", "6em" )
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text( d => d.name );
});