Skip to content

Instantly share code, notes, and snippets.

@scotthmurray
Forked from mbaba/index.html
Last active November 20, 2015 17:14
Show Gist options
  • Save scotthmurray/ab83762b1564e62d1f48 to your computer and use it in GitHub Desktop.
Save scotthmurray/ab83762b1564e62d1f48 to your computer and use it in GitHub Desktop.
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;
}
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment