Skip to content

Instantly share code, notes, and snippets.

@kpq

kpq/index.html

Created June 29, 2013 03:11
Show Gist options
  • Save kpq/5889542 to your computer and use it in GitHub Desktop.
Save kpq/5889542 to your computer and use it in GitHub Desktop.
Download ZIP
refactoring a little for will
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/*whole page*/
body {
width:900px;
margin:20px auto;
font-family:georgia, sans-serif;
font-size:15px;
line-height:1.4em;
}
.readin {
width:700px;
}
/* this css applies to BOTH maps*/
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
.counties {
fill:#f0f0f0;
}
.legend-title {
text-align: left;
margin-bottom: 8px;
font-weight: bold;
font-size: 90%;
}
.legend-scale ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.legend-scale ul li {
display: block;
float: left;
width: 50px;
margin-bottom: 6px;
text-align: center;
font-size: 80%;
list-style: none;
}
ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 50px;
}
.legend-source {
font-size: 70%;
color: #999;
clear: both;
}
/*COLD colors*/
.cold-section .q0-9 { fill:rgb(158,202,225); }
.cold-section .q1-9 { fill:rgb(107,174,214); }
.cold-section .q2-9 { fill:rgb(66,146,198); }
.cold-section .q3-9 { fill:rgb(33,113,181); }
.cold-section .q4-9 { fill:rgb(8,81,156); }
.cold-section .q5-9 { fill:rgb(8,48,107); }
.cold-section .q6-9 { fill:rgb(6,37,83); }
.cold-section .q7-9 { fill:rgb(4,27,60); }
.cold-section .q8-9 { fill:rgb(3,16,36); }
/*HOT colors*/
.hq0-9 { fill:rgb(254,140,140); }
.hq1-9 { fill:rgb(253,63,63); }
.hq2-9 { fill:rgb(253,24,24); }
.hq3-9 { fill:rgb(235,2,2); }
.hq4-9 { fill:rgb(196,2,2); }
.hq5-9 { fill:rgb(157,2,2); }
.hq6-9 { fill:rgb(118,1,1); }
.hq7-9 { fill:rgb(79,1,1); }
.hq8-9 { fill:rgb(41,0,0); }
</style>
<body>
<h1>You should have a headline, Will</h1>
<h6 class="byline">ANd a byline that you style</h6>
<p class="readin">A little copy about each map would go a long way. Why are we seeing what we're seeing? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="cold-section">
<p>Some like it... Cold????</p>
<p>since 2000</p>
<div class='my-legend'>
<div class='legend-title'>Record Cold Temperature Months</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:rgb(197,223,237);'></span>0</li>
<li><span style='background:rgb(158,202,225);'></span>1-2</li>
<li><span style='background:rgb(107,174,214);'></span>3-4</li>
<li><span style='background:rgb(66,146,198);'></span>5-6</li>
<li><span style='background:rgb(33,113,181);'></span>7-8</li>
<li><span style='background:rgb(8,81,156);'></span>9-10</li>
<li><span style='background:rgb(8,48,107);'></span>11-12</li>
<li><span style='background:rgb(6,37,83);'></span>13-14</li>
<li><span style='background:rgb(4,27,60);'></span>15-16</li>
<li><span style='background:rgb(3,16,36);'></span>17+</li>
</ul>
</div>
</div>
</div>
<div class="hot-section">
<p>Some like it... Hot????</p>
<div class='my-legend'>
<div class='legend-title'>Record Hot Temperature Months</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:rgb(255,214,214);'></span>0</li>
<li><span style='background:rgb(254,140,140);'></span>1-5</li>
<li><span style='background:rgb(253,63,63);'></span>6-11</li>
<li><span style='background:rgb(253,24,24);'></span>12-17</li>
<li><span style='background:rgb(235,2,2);'></span>18-23</li>
<li><span style='background:rgb(196,2,2);'></span>24-29</li>
<li><span style='background:rgb(157,2,2);'></span>30-35</li>
<li><span style='background:rgb(118,1,1);'></span>36-41</li>
<li><span style='background:rgb(79,1,1);'></span>42-47</li>
<li><span style='background:rgb(41,0,0);'></span>48+</li>
</ul>
</div>
</div>
</div>
<!-- note you need to load these only once -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
// this applies to BOTH
var width = 960,
height = 500;
var path = d3.geo.path();
// this is code for the COLD map --------------
var rateById = d3.map();
var quantize = d3.scale.quantize()
.domain([0, 20])
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
var coldSvg = d3.select(".cold-section").append("svg")
.attr("width", width)
.attr("height", height);
// hot map
var hotRateById = d3.map();
var hotQuantize = d3.scale.quantize()
.domain([0, 54])
.range(d3.range(9).map(function(i) { return "hq" + i + "-9"; }));
var hotSvg = d3.select(".hot-section").append("svg")
.attr("width", width)
.attr("height", height);
queue()
.defer(d3.json, "us.json")
.defer(d3.tsv, "cold-data.tsv", function(d) { rateById.set(d.id, +d.rate); })
.defer(d3.tsv, "warm-data.tsv", function(d) { hotRateById.set(d.id, +d.rate); })
.await(ready);
// this function fires ONCE, once all your data is loaded.
function ready(error, us) {
// make a cold map -----
coldSvg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("class", function(d) { return quantize(rateById.get(d.id)); })
.attr("d", path);
coldSvg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
// make a hot map
hotSvg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("class", function(d) { return hotQuantize(hotRateById.get(d.id)); })
.attr("d", path);
hotSvg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
}
// var coldrateById = d3.map();
// var quantize = d3.scale.quantize()
// .domain([0, 54])
// .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
// var path = d3.geo.path();
// var svg = d3.select("body").append("svg")
// .attr("width", width)
// .attr("height", height);
// queue()
// .defer(d3.json, "us.json")
// .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
// .await(ready);
// function ready(error, us) {
// svg.append("g")
// .attr("class", "counties")
// .selectAll("path")
// .data(topojson.feature(us, us.objects.counties).features)
// .enter().append("path")
// .attr("class", function(d) { return quantize(rateById.get(d.id)); })
// .attr("d", path);
// svg.append("path")
// .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
// .attr("class", "states")
// .attr("d", path);
// }
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment