DataVisualizationProject/bubbles.js at master · Tanvi141/DataVisualizationProject · GitHub

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
var colorBubbles = {}
attributes.map((d) => {colorBubbles[d]=getRandomColor()})
// labeling the gases
div_map
.append('text')
.attr('x',215)
.attr('y',85)
.attr('font-weight','bold')
.attr('font-size',24)
.text('Gases')
// representing bubbles as circle
div_map.selectAll('.bubble').data(bubbles)
.enter()
.append('circle')
.attr('cx',function(d){return d+100})
.attr('cy',40)
.attr('r',20)
.attr('id',function(d,i){return ('bubble'+i)})
.attr('fill',function(d){return colorBubbles[attributes[(d/50)-1]]})
.on('click',function(d,i){
    if(selected_view=='City View'){
        console.log(gas_selected)

    gas_selected = i;
    d3.select(this)
    .transition()
    .duration(time*2)
    .attr('r',30)
    .transition()
    .duration(time*2)
    .attr('r',20)
    restartGraph();}
})

//adding text inside the bubble
div_map.selectAll('.text').data(bubbles)
.enter()
.append('text')
.attr('x',function(d){return d+100})
.attr('y',45)
.attr('id','bubble')
.attr('font-weight','bold')
.attr('text-anchor',"middle")
.text(function(d,i){return attributes[i].slice(0,2)})
.append('tspan')
.text(function(d,i){return attributes[i].slice(2)})
.style('font-size', '.9rem')
    .attr('dx', '.01em')
    .attr('dy', '.3em')
.on('click',function(d,i){
    if(selected_view=='City View'){
    console.log(d,i)
    gas_selected = i;
    d3.select('#bubble'+gas_selected)
    .transition()
    .duration(time*2)
    .attr('r',30)
    .transition()
    .duration(time*2)
    .attr('r',20)
    restartGraph();}
})