xxxxxxxxxx<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 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) }); var mapCapital = svg.selectAll("circle") .data(json.features) .enter() .append("circle") .attr("class", "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); }); mapCapital.append("text") .attr("x", 550) .attr("y", 100) .attr("text-anchor", "start") .attr("fill", "none") .text(function(d) { return d.properties.capital; }) .append("tspan") .attr("x", 550) .attr("dy", 25) .text(function(d) { return "Unemployment rate: " + d.properties.capitalWojUR + "%"; }) .append("tspan") .attr("x", 550) .attr("dy", 25) .text(function(d) { return d.properties.name + "'s nemployment rate: " + d.properties.un_rate_woj; }) }); }); </script></div></body></html> https://d3js.org/d3.v3.min.js