-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
102 lines (88 loc) · 3.83 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
const drawBarChart = (data) => {
const graphWidth = 900
const graphHeight = 460
const paddingBottom = 50
const paddingLeft = 80
const paddingRight = 50
const paddingTop =50
const barWidth = 3.3
const svg = d3.select('svg')
.attr('width', graphWidth + paddingLeft + paddingRight)
.attr('height', graphHeight + paddingBottom + paddingTop)
const xScale = d3.scaleBand()
.domain(data.map(d => new Date(d[0])))
.range([0, graphWidth])
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d[1])])
.range([graphHeight, 0])
const xAxis = d3.axisBottom()
.scale(xScale)
.tickValues(xScale.domain().filter(d => {
const quarter = Math.floor((d.getMonth() + 3) / 3);
return d.getFullYear() % 5 === 0 && quarter === 1
}))
.tickFormat(d3.timeFormat('%Y'));
const yAxis = d3.axisLeft()
.scale(yScale)
const tooltip = d3.select('#tooltip')
const graph = svg.append('g')
.selectAll('rect')
.data(data)
.join('rect')
.classed('bar', true)
.attr('data-date', d => d[0])
.attr('data-gdp', d => d[1])
.attr('x', d => xScale(new Date(d[0])))
.attr('y', d => yScale(d[1]))
.attr('width', barWidth)
.attr('height', d => graphHeight - yScale(d[1]))
.style('fill', '#33adff')
.on('mouseover', function(e) {
_this = d3.select(this)
_this.style('fill', '#ffffff')
const [date, gdp] = _this.datum()
const year = date.split('-')[0]
const month = date.split('-')[1]
const quarter = Math.floor((+month + 2) / 3);
const formatter = d3.format(",")
const animation = d3.transition().duration(100)
tooltip
.html(`
${year} Q${quarter}
<br />
$${formatter(gdp)} Billion
`)
.attr('data-date', date)
.style('left', `${e.clientX + paddingLeft}px`)
.style('transform', `translateY(${paddingTop + paddingBottom}px)`)
.transition(animation)
.style('opacity', '0.9')
})
.on('mouseout', function() {
d3.select(this).style('fill', '#33adff')
tooltip.style('opacity', 0)
})
svg.append('g')
.attr('id', 'x-axis')
.call(xAxis)
.attr('transform', `translate(${paddingLeft}, ${graphHeight + paddingTop})`)
svg.append('g')
.attr('id', 'y-axis')
.call(yAxis)
.attr('transform', `translate(${paddingLeft}, ${paddingTop})`)
graph.attr('transform', `translate(${paddingLeft}, ${paddingTop})`)
svg.append('text')
.text('Gross Domestic Product')
.attr('transform', `translate(${paddingLeft + 20}, ${paddingTop*3})rotate(-90)`)
.attr('text-anchor', 'middle')
svg.append('text')
.text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf')
.attr('transform', `translate(${graphWidth - paddingLeft - paddingRight}, ${graphHeight + paddingTop + paddingBottom - 10})`)
.attr('text-anchor', 'middle')
d3.select('body').on('mousemove', () => tooltip.style('opacity', 0))
}
fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then(resp => resp.json())
.then(resp => {
drawBarChart(resp.data)
})