├── app.js
└── index.html
/app.js:
--------------------------------------------------------------------------------
1 | const DUMMY_DATA = [
2 | { id: 'd1', value: 10, region: 'USA' },
3 | { id: 'd2', value: 11, region: 'India' },
4 | { id: 'd3', value: 12, region: 'China' },
5 | { id: 'd4', value: 6, region: 'Germany' },
6 | ];
7 |
8 | const xScale = d3
9 | .scaleBand()
10 | .domain(DUMMY_DATA.map((dataPoint) => dataPoint.region))
11 | .rangeRound([0, 250])
12 | .padding(0.1);
13 | const yScale = d3.scaleLinear().domain([0, 15]).range([200, 0]);
14 |
15 | const container = d3.select('svg').classed('container', true);
16 |
17 | const bars = container
18 | .selectAll('.bar')
19 | .data(DUMMY_DATA)
20 | .enter()
21 | .append('rect')
22 | .classed('bar', true)
23 | .attr('width', xScale.bandwidth())
24 | .attr('height', (data) => 200 - yScale(data.value))
25 | .attr('x', data => xScale(data.region))
26 | .attr('y', data => yScale(data.value));
27 |
28 | setTimeout(() => {
29 | bars.data(DUMMY_DATA.slice(0, 2)).exit().remove();
30 | }, 2000);
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | D3.js
7 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------