-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscript.coffee
133 lines (111 loc) · 3.56 KB
/
script.coffee
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
padding = 35
height = 450
width = 940
lineClassMap = {}
axisMap = {}
allAxis = {}
indexUpdateSub = (event) ->
if event.type is 'mouseenter'
title = $(event.target).text()
text = 'indice: ' + title
cl = lineClassMap[title]
display = ''
else
title = $(event.target).text()
text = 'Andamento di alcuni indici italiani negli ultimi anni'
cl = ''
display = 'none'
$('div#submessage').text(text)
$('div#submessage').attr('class', cl)
axisMap[title].transition().duration(300).style('display', display)
responsibleUpdateSub = (event) ->
if event.type is 'mouseenter'
text = 'governo: ' + ($(event.target).text())
color = 'gray'
else
text = 'Andamento di alcuni indici italiani negli ultimi anni'
color = ''
$('div#submessage').text(text).css('color', color)
log = (m) ->
if console?
console.log(m)
class Chart
constructor: (selector) ->
selector = selector or 'body'
@svg = d3.select(selector).append('svg')
.attr('width', width)
.attr('height', height)
@x = d3.scale.linear().domain([2000, 2012]).range([padding, width-padding])
@axis = d3.svg.axis().scale(@x).ticks(13)
.tickFormat(d3.format '0')
@axisSelection = @svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0, ' + (height - padding) + ')')
.call(@axis)
@delay = 0
load: ->
d3.json('data.json', (data) => @handle(data))
detach: -> $(@svg.node).detach()
handle: (@data) ->
# Draw governments
@governments = @data[0]
@data = @data[1..]
@svg.selectAll('rect.responsible')
.data(@governments)
.enter()
.append('rect')
.attr('class', 'responsible')
.attr('y', padding)
.attr('height', height - 2*padding)
.attr('x', (d) => @x(d.start))
.attr('width', (d) => @x(d.end) - @x(d.start))
.append('title')
.text((d) -> d.responsible)
@svg.selectAll('line.elections')
.data(@governments.slice(1))
.enter()
.append('line')
.attr('class', 'elections')
.attr('y1', padding)
.attr('y2', height - padding)
.attr('x1', (d) => @x(d.start))
.attr('x2', (d) => @x(d.start))
$('rect.responsible').hover(responsibleUpdateSub);
# Draw indexes
for index in @data
@draw(index)
draw: (index) ->
yScale = d3.scale.linear().range([height-2*padding, 2*padding])
line = d3.svg.line()
.x((d) => @x(Number(d[0])))
.y((d) -> yScale(d[1]))
.interpolate('cardinal')
.tension(0.9)
path = @svg.append('path')
.attr('class', 'line ' + index.class)
path.append('title')
.text(index.description)
lineClassMap[index.description] = index.class
extent = d3.extent(index.data.body, (d) -> d[1])
yScale.domain(extent)
init = index.data.body[0][1] # initial value
zero = ([d[0], init] for d in index.data.body) # needed for animation
path.datum(zero).attr('d', line)
path.datum(index.data.body).transition()
#.duration(duration).ease('elastic')
.duration(4000)
.delay(200 * @delay)
.attr('d', line)
@delay += 1
@axis = d3.svg.axis().scale(yScale).ticks(13)
.tickFormat(d3.format '0.0f')
.orient('left')
@axisSelection = @svg.append('g')
.attr('class', 'axis')
.attr('id', index.description)
.attr('transform', 'translate(' + (30+Number(padding)) + ', 0)')
.call(@axis)
.style('display', 'none')
axisMap[index.description] = @axisSelection
allAxis[index.description.slice(0,5)] = @axis # for debug
$('path.line').hover(indexUpdateSub);