xxxxxxxxxx
<meta charset="utf-8">
<style>
.counties {
fill: none;
}
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 1em auto 4em auto;
position: relative;
tab-size: 2;
width: 960px;
}
.key path {
display: none;
}
.key line {
stroke: #000;
shape-rendering: crispEdges;
}
.states {
/*fill: none;
stroke: #000;*/
/* stroke-linejoin: round;*/
stroke: #fff;
/*stroke-dasharray: 2,2;*/
stroke-linejoin: round;
}
.black { fill: #000000;}
.title {
font-size: 25px;
font-weight: 300;
}
.tick text {
font-size: 10px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="colorbrewer.js"></script>
<script>
///////////////////////
/* buttons */
(function () {
function pickRandomProperty(obj) {
var result;
var count = 0;
for (var prop in obj)
if (Math.random() < 1/++count)
result = prop;
return result;
};
var buttonData = ["Scheme1", "Scheme2", "Scheme3", "Random"];
var buttonDiv = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 50);
var buttons = buttonDiv.selectAll(".updateButton")
.data(buttonData)
.enter()
.append('g')
.attr("class", "updateButton")
.on("click", function(d, i) {
if (d === "Scheme1") {
setup(colorbrewer.Blues["8"]); //Greys, Oranges, Blues, YlOrRd
}
if (d === "Scheme2") {
setup(colorbrewer.Greys["8"]);
}
if (d === "Scheme3") {
setup(colorbrewer.Oranges["8"]);
}
if (d === "Random") {
var nProperty = pickRandomProperty(colorbrewer);
console.log(nProperty);
setup(colorbrewer[nProperty]["8"]);
}
});
buttons.append("rect")
.attr("x", function(d, i) { return (i * 100) + 270; })
.attr("y", 18)
.attr("width", 98)
.attr("height", 25)
.attr("ry", 5)
.style("stroke", "#787878")
.style("fill", "steelblue");
buttons.append("text")
.attr("x", function(d, i) { return (i * 100) + (100 / 2) + 260; })
.attr("y", 30)
.attr("dy", "0.35em")
.style("text-anchor", "middle")
.style("font-size", "15px")
.style("pointer-events", "none")
.text(function(d) { return d; });
}());
///////////////////////
var setup = function (color) {
d3.select("svg.myChart").remove();
var width = 960,
height = 500;
var projection = d3.geo.albersUsa()
.scale(900)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("class", "myChart")
.attr("width", width)
.attr("height", height);
//d3.select("svg.myChart").append("text").text("Population in states")
// .attr("transform", "translate(360,30)").attr("class", "title")
queue()
.defer(d3.json, "usa4.topo.json")
.defer(d3.csv, "population.csv")//, function(d) { rateById.set(d["GEO.id2"], +d["HD01_VD01"]); })
.await(ready);
function ready(error, data, data1) {
//console.log(d3.min(data1, function(d) { return +d["HD01_VD01"]; }));
//console.log(d3.max(data1, function(d) { return +d["HD01_VD01"]; }));
var rateById = {};
data1.forEach(function(d) { rateById[d.id] = +d["HD01_VD01"]; });
//console.log(rateById)
var min = d3.min(data1, function(d) { return +d["HD01_VD01"]; });
var max = d3.max(data1, function(d) { return +d["HD01_VD01"]; });
var colorScale = d3.scale.threshold()
//.domain([min, max]) //568158 37691912
.domain([800000, 2000000, 3300000, 5000000, 7000000, 10000000, 20000000])
//.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
//.range(colorbrewer.YlGn["5"]);
.range(color);
var circleScale = d3.scale.linear()
.domain([min, max]) //568158 37691912
//.domain([800000, 2000000, 3300000, 5000000, 7000000, 10000000, 20000000])
//.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
//.range(colorbrewer.YlGn["5"]);
.range([10, 25]);
//console.log(quantize(15691912));
//colorbrewer.Greens["9"]
//formatValue = d3.format(".2s");
formatValue = d3.format("s");
// A position encoding for the key only.
var x = d3.scale.linear()
.domain([568158, 37691912])
.range([0, 600]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(13)
.tickValues(colorScale.domain())
.tickFormat(function(d) { return formatValue(d)});
// key
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(170,30)");
g.selectAll("rect")
.data(colorScale.range().map(function(d, i) {
return {
x0: i ? x(colorScale.domain()[i - 1]) : x.range()[0],
x1: i < colorScale.domain().length ? x(colorScale.domain()[i]) : x.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { console.log(d); return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });
g.call(xAxis).append("text")
.attr("class", "caption")
.attr("y", -6)
.text("Population in states");
// key end
var formatNumber = d3.format(",.0f");
function getCentroid(selection) {
// get the DOM element from a D3 selection
// you could also use "this" inside .each()
var element = selection.node(),
// use the native SVG interface to get the bounding box
bbox = element.getBBox();
// return the center of the bounding box
return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
};
var states = svg.append("g")
.attr("transform", "translate(0,35)")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(data, data.objects["usa.geo"]).features)
.enter();
states.append("path")
//.style("fill", function(d, i) { return colorScale(rateById[d.id]); })
.style("fill", "#ddd")
.attr("d", path)
.attr("class", function (d, i) {return "state" + d.id;})
//.append("title")
// .text(function(d, i) { return d.properties.name + ": " + formatNumber(rateById[d.id]); })
states.append("circle")
.attr("transform", function (d, i) { /*console.log(this.parent.firstChild);*/ return "translate(" + getCentroid(d3.select(".state" + d.id)) + ")";})
.attr({
cx: 0,
cy: 0,
r: function (d, i) { /*console.log(rateById[d.id]);*/ return circleScale(rateById[d.id]);}
})
.style("fill", function(d, i) { return colorScale(rateById[d.id]); })
.append("title")
.text(function(d, i) { return d.properties.name + ": " + formatNumber(rateById[d.id]); })
/*
svg.append("path")
.datum(topojson.mesh(data, data.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
*/
}
d3.select(self.frameElement).style("height", height + 80 + "px");
};
setup(colorbrewer.Blues["8"])
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js