forked from alignedleft‘s block: Map circles text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,400italic,900,700,100italic,300italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Voivodeships of Poland</title>
</head>
<body>
<div id="wrapper">
<div class="text">
<h1>Voivodeships of Poland</h1>
</div>
<script type="text/javascript">
d3.select("div", "#wrapper")
.append("div")
.attr("id", "content");
var margin = {top: 5, right: 25, bottom: 5, left: 5};
var width = 900 - margin.left - margin.right,
height = 750 - margin.top - margin.bottom;
var projection = d3.geo.mercator()
.center([22, 51])
.translate([ width/2, height/2 ])
.scale(3000);
var path = d3.geo.path()
.projection(projection);
var mapColor = d3.scale.quantize()
.range(["#ffffb2",
"#fed98e",
"#fe9929",
"#d95f0e",
"#993404"])
.domain([7, 16.5]);
var legendColor = ["#ffffb2", "#fed98e", "#fe9929", "#d95f0e", "#993404"];
var svg = d3.select("#content")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var formatNumbers = d3.format(",");
d3.csv("woj_stats.csv", function(data) {
d3.json("woj_maps.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataWoj = data[i].woj;
var areaWoj = parseFloat(data[i].area);
var populationWoj = parseFloat(data[i].population);
var densityWoj = parseFloat(data[i].density);
var unRateWoj = parseFloat(data[i].un_rate_woj);
var capitalWoj = data[i].capital;
var capitalWojUR = parseFloat(data[i].un_rate_capital);
var capitalLong = parseFloat(data[i].longitude);
var capitalLat = parseFloat(data[i].latitude);
for (var j = 0; j < json.features.length; j++) {
var jsonWoj = json.features[j].properties.name;
if (dataWoj == jsonWoj) {
json.features[j].properties.area = areaWoj;
json.features[j].properties.population = populationWoj;
json.features[j].properties.density = densityWoj;
json.features[j].properties.un_rate_woj = unRateWoj;
json.features[j].properties.capital = capitalWoj;
json.features[j].properties.capitalWojUR = capitalWojUR;
json.features[j].properties.longitude = capitalLong;
json.features[j].properties.latitude = capitalLat;
break;
}
}
}
var mapWoj = svg.selectAll("g")
.data(json.features)
.enter()
.append("g")
mapWoj.append("path")
.attr("d", path)
.attr("class", "path")
.style("fill", function (d) { return mapColor(d.properties.un_rate_woj);
});
mapWoj.append("text")
.attr("x", 550)
.attr("y", 100)
.attr("text-anchor", "start")
.attr("fill", "none")
.text(function(d) { return d.properties.name; })
.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return "Area: " + formatNumbers(d.properties.area) + " sq. km"; })
.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return "Population: " + formatNumbers(d.properties.population); })
.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return "Unemployment rate: " + d.properties.un_rate_woj + "%"; })
.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return "Capital: " + d.properties.capital ; })
.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return d.properties.capital + "'s unemployment rate: " + d.properties.capitalWojUR + "%"; });
mapWoj.on("mouseover", function() {
d3.select(this)
.classed("hover", true)
});
mapWoj.on("mouseout", function() {
d3.select(this)
.classed("hover", false)
});
//Create a new group for each capital
var mapCapitalGroups = svg.selectAll("g.capital")
.data(json.features)
.enter()
.append("g")
.attr("class", "capital");
//Within each group, append a circle
mapCapitalGroups.append("circle")
.attr("cx", function(d) {
return projection([d.properties.longitude, d.properties.latitude])[0];
})
.attr("cy", function(d) {
return projection([d.properties.longitude, d.properties.latitude])[1];
})
.attr("r", function(d) { return Math.sqrt(+d.properties.capitalWojUR * 50);
});
//Within each group, append a text element
//oh, and stores a reference to these text elements
//in a new variable, because we'll need this for appending
//tspans inside each one in a moment.
var capitalLabels = mapCapitalGroups.append("text")
.attr("x", 550)
.attr("y", 100)
.attr("text-anchor", "start")
.attr("fill", "none")
.text(function(d) { return d.properties.capital; });
//Append a new tspan inside of each element…
capitalLabels.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return "Unemployment rate: " + d.properties.capitalWojUR + "%"; });
//Append another new tspan inside of each element…
capitalLabels.append("tspan")
.attr("x", 550)
.attr("dy", 25)
.text(function(d) { return d.properties.name + "'s nemployment rate: " + d.properties.un_rate_woj; });
//No longer needed, as this hover effect can be handled with CSS!
/*
mapCapital.on("mouseover", function() {
d3.select(this)
.classed("hover", true)
});
mapCapital.on("mouseout", function() {
d3.select(this)
.classed("hover", false)
});
*/
for (var i = 0; i < 5; i++) {
svg.append("rect")
.attr("y", 490)
.attr("x", (i*20)+75)
.attr("width", 20)
.attr("height", 20)
.attr("fill", legendColor[i])
.attr("class", "rect")
};
svg.append("text")
.attr("x", 70)
.attr("y", 505)
.attr("text-anchor", "end")
.attr("class", "legend")
.text("7%");
svg.append("text")
.attr("x", 210)
.attr("y", 505)
.attr("text-anchor", "end")
.attr("class", "legend")
.text("16.5%");
});
});
</script>
</div>
</body>
</html>body {
background-color: #ededeb;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
}
h1 {
font-size: 30px;
font-family: "Lato", sans-serif;
font-weight: 400;
text-align: left;
color: dimgrey;
}
.text {
padding: 0 1%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 0px;
background-color: #ededeb;
text-align: left;
text-indent: 30px;
}
.path {
opacity: 0.75;
stroke: dimgrey;
}
.path:hover {
opacity: 1;
cursor: crosshair;
}
.capital circle {
stroke: dimgrey;
stroke-opacity: 0.75;
fill: lightgrey;
opacity: 0.75;
}
/* Hover pseudoclass is applied to the GROUP,
although visual changes occur on the child
elements WITHIN each group */
.capital:hover circle {
stroke-width: 1.5px;
stroke: dimgrey;
stroke-opacity: 1;
cursor: crosshair;
opacity: 1;
}
.capital:hover text {
fill: red;
font-weight: 700;
font-size: 18px;
}
.capital:hover tspan {
fill: dimgrey;
font-weight: 300;
font-size: 16px;
}
.legend {
font-size: 12px;
font-family: "Lato", sans-serif;
font-weight: 300;
color: dimgrey;
}
.rect {
opacity: 0.75;
stroke: lightgrey;
stroke-width: 0;
}
#wrapper {
width: 50%;
height: 100%;
margin: 0 auto;
position: relative;
}
#content {
padding: 0;
background-color: #ededeb;
margin: 0 1%;
text-align: center;
}
woj,area,population,density,un_rate_woj,capital,un_rate_capital,latitude,longitude
Dolnośląskie,19947,2909997,146,9.4,Wrocław,3.5,51.11,17.022222
Kujawsko-pomorskie,17972,2092564,116,13.8,Bydgoszcz,5.7,53.125,18.011111
Lubelskie,25122,2156150,86,11.5,Lublin,8,51.248056,22.570278
Lubuskie,13988,1021470,73,11.3,Gorzów Wielkopolski,4.8,52.730833,15.238333
Łódzkie,18219,2513093,138,11.2,Łódź,9.9,51.776667,19.454722
Małopolskie,15183,3360581,221,8.8,Kraków,4.6,50.061389,19.938333
Mazowieckie,35558,5316840,150,9,Warszawa,3.7,52.232222,21.008333
Opolskie,9412,1004416,107,10.6,Opole,5.3,50.664722,17.926944
Podkarpackie,17846,2129294,119,13.1,Rzeszów,7.3,50.033611,22.004722
Podlaskie,20187,1194965,59,12.1,Białystok,10.9,53.135278,23.145556
Pomorskie,18310,2295811,125,9.8,Gdańsk,4.5,54.3475,18.645278
Śląskie,12333,4599447,373,8.8,Katowice,3.9,50.264167,19.023611
Świętokrzyskie,11711,1268239,108,13,Kielce,8.4,50.874167,20.633333
Warmińsko-mazurskie,24173,1446915,60,16.5,Olsztyn,5.9,53.773056,20.476111
Wielkopolskie,29826,3467016,116,7,Poznań,2.5,52.408333,16.934167
Zachodniopomorskie,22892,1718861,75,13.7,Szczecin,7.4,53.438056,14.542222