xxxxxxxxxx
<meta charset="utf-8">
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
background: green;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#title {
font-size: 36px;
}
#byline{
font-size: 12px;
}
#subtitle{
font-size: 18px;
}
#legendholder {
font-size: 12px;
}
#chart {
font-size: 12px;
}
#footer {
font-size: 12px;
}
#decorative_bar {
background-color: #bcbd22;
height: 10px;
}
/* CSS goes here. */
</style>
<body>
<!-- <div id="title">Georgians crowd into metro Atlanta. Here's how much. </div>
<div id="byline">
By Maggie Lee<br>
June 28, 2015<br>
</div> -->
<div id="subtitle">
<br>
<img src="https://greencracker.net/wp-content/uploads/2015/06/noun_23892_cc.png" align="left"><br>
About 10 million people were living in Georgia as of 2014.<br>
Of those, about 4.5 million cluster in Fulton and neighboring counties.<br><br><br>
</div>
<div id="legendholder">
<button id="click_to_run" onclick="do_update()">
View by Population
</button>
<button id="click_to_normal" onclick="do_normal()">
View Normal
</button><br><br>
</div> <!-- close legendholder -->
<div id="decorative_bar"></div>
Hover over a county for details
<div id="chart">
</div>
<div> <img src="https://greencracker.net/wp-content/uploads/2015/06/sharealike.svg"></div>
<div id="decorative_bar"></div>
<div id="footer">
<h1>Notes, Thanks & How-to:</h1>
<p>Thanks to <a href="https://greencracker.net/wp-content/uploads/2015/06/cartogram.js">cartogram.js</a>, a JavaScript implementation of
<a href="https://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf">an algoritm to construct continuous area cartograms</a>,
by James A. Dougenik, Nicholas R. Chrisman and Duane R. Niemeyer,
©1985 by the Association of American Geographers.
<p>Cartogram.js is designed and built by <a href="https://stamen.com/studio/shawn">Shawn Allen</a> at
<a href="https://stamen.com">Stamen</a> and has a home on <a href="https://github.com/shawnbot/d3-cartogram/" target="_blank">Github</a>. It runs with
<a href="https://d3js.org">d3.js</a> by Mike Bostock.
<p>
This Georgia example runs with d3.v2, an older version.
It's based on a tutorial from <a href="https://www.limn.co.za/2013/10/making-a-cartogram/" target="_blank">Jeff Fletcher on his South Africa dataviz blog Limn</a>. He bundles up the <a href="https://www.limn.co.za/dev/assets/cartogram.zip">appropriate versions of cartogram, topojson and d3 here.</a>
<p>
Data source: Population as of July, 2014 from the <a href ="https://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?src=bkmk" target="_blank">U.S. Census</a>, downloaded June 26, 2015.
<p>Population icon <a href ="https://thenounproject.com/search/?q=population&i=23892" target="_blank">by Wilson Joseph from the Noun Project.</a>
<script src="https://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js"></script>
<script src="https://greencracker.net/wp-content/uploads/2015/06/topojson.js"></script>
<script src="https://greencracker.net/wp-content/uploads/2015/06/cartogram.js"></script>
<!--<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> -->
<script>
var width = 1000,
height = 775,
margin = {top: 10, bottom: 10, left: 10, right: 10};
var tooltip_div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("#chart").append("svg")
.attr("width", width-margin.left-margin.right)
.attr("height", height-margin.top-margin.bottom);
// var map = d3.select("#map");
var counties = svg.append("g")
.attr("id", "counties")
.selectAll("path");
var projection = d3.geo.albers()
.origin([-83, 33.5])
.parallels([30, 36])
.scale(9000);
var topology,
geometries,
carto_features;
var number_formatter = d3.format("0,000");
var pop_data = d3.map();
var carto = d3.cartogram()
.projection(projection)
.properties(function (d) {
// this add the "properties" properties to the geometries
return d.properties;
});
d3.csv("pop_data.csv", function (data) {
data.forEach(function (d) {
pop_data.set(d.GEOID10, [d.NAME10, d.POP]);
})
});
d3.json("topo_GA_counties_simple.json", function (data) {
topology = data;
geometries = topology.objects['geo_GA_counties_simplified'].geometries;
var features = carto.features(topology, geometries),
path = d3.geo.path()
.projection(projection);
//add this jive to make up for counties with a space in the name: .replace(/\s+/g, '')
counties = counties.data(features)
.enter()
.append("path")
.attr("class", "county")
// .attr("id", function (d) {return d.properties.GEOID10})
// .attr("fill", function (d, i) {return color(i);} )
.attr("id", function (d) {return d.properties.NAME10.replace(/\s+/g, '');})
.on("mouseover", function (d) {
console.log(number_formatter(pop_data.get(d.properties['GEOID10'])[1]))
d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "green")
tooltip_div.transition()
.duration(200)
.style("opacity", 0.9)
tooltip_div .html(d.properties.NAME10 + "<br>" +
number_formatter(pop_data.get(d.properties['GEOID10'])[1]))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY -28) + "px");
})
.on("mouseout", function (d) {
d3.selectAll("#"+d.properties.NAME10.replace(/\s+/g, '')).style("fill", "white")
tooltip_div.transition()
.duration(500)
.style("opacity", 0);
})
.attr("fill", "white")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "0.3px")
do_update();
// NB population estimate as of July 14!
})
function do_normal() {
d3.select("#click_to_normal").text("thinking...");
setTimeout(function () {
console.log("doing normal")
var features = carto.features(topology, geometries),
path = d3.geo.path()
.projection(projection);
counties.data(features)
.transition()
.duration(3750)
.each("end", function () {
d3.select("#click_to_normal").text("View Normal")
})
.attr("d", path);
}, 10);
};
function do_update() {
d3.select("#click_to_run").text("thinking...");
setTimeout(function () {
carto.value(function (d) {
console.log(+pop_data.get(d.properties['GEOID10'])[1])
return +pop_data.get(d.properties['GEOID10'])[1];
});
if (carto_features == undefined)
carto_features = carto(topology, geometries).features;
counties.data(carto_features)
.text(function (d) {return d.properties.GEOID10;})
// .on("mouseover", console.log("moused"));
// console.log("line 118")
counties.transition()
.duration(3750)
.each("end", function () {
d3.select("#click_to_run").text("View by Population")
})
.attr("d", carto.path);
}, 10);
}
</script>
</body>
</html>
Modified http://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js to a secure url
Modified http://greencracker.net/wp-content/uploads/2015/06/topojson.js to a secure url
Modified http://greencracker.net/wp-content/uploads/2015/06/cartogram.js to a secure url
Modified http:// to a secure url
https://greencracker.net/wp-content/uploads/2015/06/d3.v2.min_.js
https://greencracker.net/wp-content/uploads/2015/06/topojson.js
https://greencracker.net/wp-content/uploads/2015/06/cartogram.js
https://