https://info-design-lab.github.io/TN2021/js/map1.js

1
2function loadall(){
3        var tooltip = d3.select('.toolt1');
4
5        var width =500,
6            height = 550;
7        
8
9        var win;
10        var cberror;
11        d3.tsv("csv/finalwinners.tsv",function(error,data){
12            cberror=error;
13            win=data;
14        });
15
16
17
18        var svg = d3.select(".map-1").append("svg")
19            .attr("width", width)
20            .attr("height", height)
21            .attr("class", "map-1");
22        
23        var scale2=d3.scale.linear()
24                    .domain([0,100])
25                    .range(["#d0e0f5","#0a4591"]);
26
27        var scale3=d3.scale.linear()
28                    .domain([0,100])
29                    .range([2,1]);
30        //debugger;
31        var margin_data;
32        var cberror;
33        d3.csv("csv/women-votes.csv",function(error,data){
34                          cberror=error;
35                          agg_data=data;
36        d3.csv("csv/women-margin.csv",function(error,data){
37                          cberror=error;
38                          margin_data=data;})
39                          
40        //debugger;
41
42        d3.json("csv/tngeo2.json", function(error,topology) {
43        
44                  var data=topology;
45                  //debugger;
46                  var center=d3.geo.centroid(topology)
47                  var offset = [250,230];
48                  var projection = d3.geo.mercator()
49                            .center(center)
50                            .scale(5000).translate(offset);    
51                  var path = d3.geo.path()
52                            .projection(projection);
53                  
54                 // debugger;
55                  svg.selectAll("path")
56                           .data(topology.features)
57                           .enter()
58                           .append("path")
59                           .attr("d", path)
60                           .attr("class",function(d){
61                            return "a"+d.properties["AC_NO"];
62                          })
63                           //debugger;
64        
65                           .style("fill", function(d){
66                            if(((agg_data[+(d.properties.AC_NO)-1]).Margin) == 0){
67                              return ("#F98811");}
68                              else {
69                                return scale2((agg_data[+(d.properties.AC_NO)-1]).Margin);}
70                              })
71                           .style("opacity",function(d){ 
72                              return 1/scale3(+agg_data[+(d.properties.AC_NO)-1].Margin);
73                         })
74                           .style("stroke","grey")
75                           .on("mouseover",function(d){
76                            var map1=d3.select(".map-1");
77                            var map2=d3.select(".map-2");
78                           mouse=d3.mouse(this);
79                           var consti=".a"+d.properties["AC_NO"];
80                           d3.select(this).style("stroke","red").style("stroke-width","2");
81                           map2.select(consti).style("stroke","red").style("stroke-width","2"); 
82
83                           map1.select(".toolt1")
84                          .classed('hidden', false)
85                          .attr('style', 'left:' + (mouse[0] + 50) +
86                                'px; top:' + (mouse[1] +40) + 'px')
87                          .html(function(){
88                            if (((agg_data[+(d.properties.AC_NO)-1]).Margin) == 0){
89                              return ("<b>"+d.properties.AC_NAME+"</b>"+"\nNo Candidates");}
90                            else {
91                              return("<b>"+d.properties.AC_NAME+"</b>"+"\nPercentage of Votes: "+agg_data[+(d.properties.AC_NO)-1].Margin)}
92                          
93                          });
94
95                          map2.select(".toolt2")
96                          .attr('style', 'left:' + (mouse[0] + 150) +
97                                'px; top:' + (mouse[1] +40) + 'px')
98                          .classed("hidden",false)
99                          .html(function(){
100                            if (((margin_data[+(d.properties.AC_NO)-1]).Margin) < 0 ){
101                              return ("<b>"+d.properties.AC_NAME+"</b>"+"\nVictory Margin: "+Math.abs(margin_data[+(d.properties.AC_NO)-1].Margin));
102                            }
103                            else if (((margin_data[+(d.properties.AC_NO)-1]).Margin) == 0){
104                              return ("<b>"+d.properties.AC_NAME+"</b>"+"\nNo Candidates");
105                            }
106                            else {
107                              return ("<b>"+d.properties.AC_NAME+"</b>"+"\nLoss Margin: "+Math.abs(margin_data[+(d.properties.AC_NO)-1].Margin));
108                            }
109                            
110                          });
111                          
112                           
113                          })
114 
115                           
116                           .on("mouseout", function(d) {
117
118                          var map1=d3.select(".map-1");
119                          var map2=d3.select(".map-2");
120                          var consti=".a"+d.properties["AC_NO"];
121
122                          map2.select(".toolt2").classed('hidden', true);
123                          map1.select(".toolt1").classed('hidden', true);
124                          d3.select(this).style("fill", function(d){if(((agg_data[

124+(d.properties.AC_NO)-1]).Margin) == 0){
125                            return ("#F98811");}
126                            else {
127                              return scale2((agg_data[+(d.properties.AC_NO)-1]).Margin);}
128                            })
129                          .style("stroke","grey").style("stroke-width","1");
130                          
131                          map2.select(consti).style("stroke","grey").style("stroke-width","1");
132
133                           });
134            });
135          
136          });
137      d3.json("csv/TNS2.json",function(error,topo){
138          
139                  //debugger;
140                  var center=d3.geo.centroid(topo)
141                  var offset = [250,230];
142                  var projection = d3.geo.mercator()
143                            .center(center)
144                            .scale(5000).translate(offset);    
145                  var path = d3.geo.path()
146                            .projection(projection);
147                  //debugger;
148                  
149
150                  svg.data(topo.features)
151                                            
152                                            .append("path")
153                                            .attr("d",path)
154                                            .style("stroke","black")
155                                            .style("fill","none");
156        });
157
158
159
160        
161
162}