Skip to content

Commit 6a5487e

Browse files
adityavashisthaadityavashistha
committed
Replaced the files to accommodate the new changes
1 parent 18ea93e commit 6a5487e

File tree

2 files changed

+84
-13
lines changed

2 files changed

+84
-13
lines changed

‎index.html

+22-9
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,20 @@
1414
color: white;
1515
width: 40px;
1616
height: 40px;
17-
display:inline-block;
17+
display: inline-block;
18+
}
19+
20+
div.tooltip {
21+
position: absolute;
22+
text-align: center;
23+
width: 150px;
24+
height: 25px;
25+
padding: 2px;
26+
font-size: 10px;
27+
background: #FFFFE0;
28+
border: 1px;
29+
border-radius: 8px;
30+
pointer-events: none;
1831
}
1932

2033
body {
@@ -109,14 +122,14 @@ <h2>Select a Week</h2>
109122
<h2 id="time-label"></h2>
110123
</div>
111124
<!--<div class="chart">-->
112-
<!--<b>Total Calls &nbsp;</b>-->
113-
<!--<div style="background-color: rgb(198,219,239); color:black">< 29</div>-->
114-
<!--<div style="background-color: rgb(158,202,225); color: black">< 145</div>-->
115-
<!--<div style="background-color: rgb(107,174,214); color: black">< 322</div>-->
116-
<!--<div style="background-color: rgb(66,146,198)">< 472</div>-->
117-
<!--<div style="background-color: rgb(33,113,181)">< 977</div>-->
118-
<!--<div style="background-color: rgb(8,81,156)">< 2259</div>-->
119-
<!--<div style="background-color: rgb(8,48,107)">< 8861 </div>-->
125+
<!--<b>Total Calls &nbsp;</b>-->
126+
<!--<div style="background-color: rgb(198,219,239); color:black">< 29</div>-->
127+
<!--<div style="background-color: rgb(158,202,225); color: black">< 145</div>-->
128+
<!--<div style="background-color: rgb(107,174,214); color: black">< 322</div>-->
129+
<!--<div style="background-color: rgb(66,146,198)">< 472</div>-->
130+
<!--<div style="background-color: rgb(33,113,181)">< 977</div>-->
131+
<!--<div style="background-color: rgb(8,81,156)">< 2259</div>-->
132+
<!--<div style="background-color: rgb(8,48,107)">< 8861 </div>-->
120133
<!--</div>-->
121134

122135

‎scripts/content.js

+62-4
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ define(['jquery',
3333
.attr('width', width)
3434
.attr('height', height);
3535

36+
var timepoint = 1;
37+
3638
// These are the quantiles Aditya set up to use.
3739
var domain = [29, 145, 322, 472, 977, 2259, 8861];
3840
// These are the colors we're going to set to fill values, a la:
@@ -60,6 +62,9 @@ define(['jquery',
6062
'< 8861',
6163

6264
];
65+
var div = d3.select("body").append("div")
66+
.attr("class", "tooltip")
67+
.style("opacity", 0);
6368

6469
// This is the function that actually performs the visualization. It
6570
// expects to get the loaded TopoJSON of the states as well as the
@@ -185,8 +190,7 @@ define(['jquery',
185190
.attr('cx', 550)
186191
.attr('cy', 200)
187192
.attr('r', 50);
188-
// .style('fill', 'rgb(8,81,156)');
189-
193+
190194
d3.select('svg').append('text')
191195
.attr('x', 510)
192196
.attr('y', 200)
@@ -238,6 +242,7 @@ define(['jquery',
238242
return d.id.replace(/ /g, '_');
239243
})
240244
.attr('d', path);
245+
241246

242247
}
243248

@@ -270,9 +275,20 @@ define(['jquery',
270275
}
271276

272277
function onSlide(event, ui) {
278+
timepoint = ui.value;
273279
colorMap(ui.value);
274280
}
275281

282+
function getValueForState(state) {
283+
var weekHeading = timeNames[timepoint - 1];
284+
var stateWithoutSpaces = state.replace(/ /g, '_');
285+
for (var row = 0; row < csvData.length; row++) {
286+
if ($.inArray(stateWithoutSpaces, states[row]) !== -1) {
287+
return csvData[row][weekHeading];
288+
}
289+
}
290+
}
291+
276292
function colorMap(timeIndex) {
277293
var weekHeading = timeNames[timeIndex - 1];
278294
$('#time-label').text(weekHeading);
@@ -286,12 +302,54 @@ define(['jquery',
286302
for (var state = 0; state < states[row].length; state++) {
287303
var stateName = states[row][state];
288304
if (stateName !== 'Not_defined') {
305+
306+
console.log("value is:" + value);
307+
289308
d3.select('svg').select('.' + stateName)
290-
.style('fill', color);
309+
.style('fill', color)
310+
.on("mouseover", function (d) {
311+
d3.select(this).transition().duration(300).style("opacity", 1);
312+
div.transition().duration(300)
313+
.style("opacity", 1)
314+
div.text(function() {
315+
var val = getValueForState(d.id);
316+
console.log('val for ' + d.id + ' is: ' + val);
317+
return d.id + ':\n' + val;
318+
})
319+
.style("left", (d3.event.pageX) + "px")
320+
.style("top", (d3.event.pageY - 30) + "px");
321+
})
322+
.on("mouseout", function () {
323+
d3.select(this)
324+
.transition().duration(300)
325+
.style("opacity", 1);
326+
div.transition().duration(300)
327+
.style("opacity", 0);
328+
});
291329
}
292330
else {
293331
d3.select('svg').select('circle')
294-
.style('fill', color);
332+
.style('fill', color)
333+
.on("mouseover", function (d) {
334+
d3.select(this).transition().duration(300).style("opacity", 1);
335+
div.transition().duration(300)
336+
.style("opacity", 1)
337+
div.text(function() {
338+
var val = getValueForState('Not defined');
339+
return 'Undefined Region:\n' + val;
340+
})
341+
.style("left", (d3.event.pageX) + "px")
342+
.style("top", (d3.event.pageY - 30) + "px");
343+
})
344+
.on("mouseout", function () {
345+
d3.select(this)
346+
.transition().duration(300)
347+
.style("opacity", 1);
348+
div.transition().duration(300)
349+
.style("opacity", 0);
350+
});
351+
352+
295353
}
296354
}
297355
}

0 commit comments

Comments
 (0)