After trying to draw an electoral map using Kartograph, this time I've tried with D3js.
This has some good things, such as being able to use topoJSON which reduces dramatically the size of the files or using all the visualization tools included in D3js. On the other hand, Kartogrph has some good styling aids that help a lot.
As usual, you can download all the source code
or take a look to the examples:
Simple Map -- source code
Select Order Map -- source code
Simple Tooltip Map -- source code
Pie Chart Tooltip Map -- source code
To convert it to TopoJSON, I have run first:This has some good things, such as being able to use topoJSON which reduces dramatically the size of the files or using all the visualization tools included in D3js. On the other hand, Kartogrph has some good styling aids that help a lot.
As usual, you can download all the source code
or take a look to the examples:
Simple Map -- source code
Select Order Map -- source code
Simple Tooltip Map -- source code
Pie Chart Tooltip Map -- source code
Simple map
Let's start with the basic choropleth map:
The complete code for the example can be found here.
The image will be an SVG, so web can add interactivity and style it easily.
The scripts included will be d3js, of course, and topojson, since this is the format of the data (see the last point):
The JavaScript part, then is:
var width = 600,
height = 600;
var projection = d3.geo.mercator()
.center([2,41.5])
.scale(50000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("mun_out_topo.json", function(error, topo) {
svg.selectAll()
.data(topojson.object(topo, topo.objects.mun_out).geometries)
.enter().append("path")
.attr("class", function(d) {
var maxVotes = 0;
var party = null;
if (d.properties["CiU"]>maxVotes){maxVotes = d.properties["CiU"]; party="CiU";}
if (d.properties["PSC"]>maxVotes){maxVotes = d.properties["PSC"]; party="PSC";}
if (d.properties["ERC"]>maxVotes){maxVotes = d.properties["ERC"]; party="ERC";}
if (d.properties["ICV-EUiA"]>maxVotes){maxVotes = d.properties["ICV-EUiA"]; party="ICV-EUiA";}
if (d.properties["CUP"]>maxVotes){maxVotes = d.properties["CUP"]; party="CUP";}
if (d.properties["C's"]>maxVotes){maxVotes = d.properties["C's"]; party="Cs";}
return "municipality " + party;
})
.attr("d", path);
});
- See, at line 4, how the projection is set. I have chosen Mecator and centered it at the coordinates I know are more or less at the center of my bounding box. Then with a lot of patience, just trying, I have found that the scale 50000 is the one that fits better for the image size.
- At line 9, the path object is set, and then at line 12, the SVG object is assigned to the div with the id=map. I prefer to put it into a div rather than directly to the body tag, as most of the d3js examples do.
- At line 16, the topoJSON is loaded, and the other stuff is run only after this is done. Do not put this code outside the function or it won't work.
- At line 17, the map drawing starts:
- The topoJSON elements are assigned as the data. In this case, the name of the elements is topo.objects.mun_out, but to find it, the best is to look directly into the topoJSON file.
- With the enter() method, the following methods will be applied to every element. The first thing done is appending a path element to the svg.
- The class is set, so the map can have different colours depending on the winning party. To do it, the function looks into the element properties. Again, take a look into the topoJSON file to see how the information is stored. The string returned is municipality and the winner party. The css at the header of the file sets the colour for the background and stroke.
- Finally, the path of the element is set to the svg, actually drawing the shape.
Selecting the order
The map above shows only the party that won in every municipality. What about changing that, choosing the position the user wants to show? With d3js is quite easy to do it.
The complete code for the example can be found here.
The part changed from the first example is after loading the topoJSON file:
The part changed from the first example is after loading the topoJSON file:
d3.json("mun_out_topo.json", function(error, topo) {
svg.selectAll("municipality")
.data(topojson.object(topo, topo.objects.mun_out).geometries)
.enter().append("path")
.attr("class", function(d) {return "municipality " + selectParty(d,1);})
.attr("d", path);
function selectParty(d,position){
var positions = new Array();
positions[0] = parseInt(d.properties["CiU"]);
positions[1] = parseInt(d.properties["PSC"]);
positions[2] = parseInt(d.properties["ERC"]);
positions[3] = parseInt(d.properties["PP"]);
positions[4] = parseInt(d.properties["ICV-EUiA"]);
positions[5] = parseInt(d.properties["CUP"]);
positions[6] = parseInt(d.properties["C's"]);
positions.sort(function(a,b) { return b-a; });
var party = null;
if (positions[position-1] == parseInt(d.properties["CiU"])){
party = "CiU";
} else if (positions[position-1] == parseInt(d.properties["PSC"])){
party = "PSC";
} else if (positions[position-1] == parseInt(d.properties["ERC"])){
party = "ERC";
} else if (positions[position-1] == parseInt(d.properties["PP"])){
party = "PP";
} else if (positions[position-1] == parseInt(d.properties["ICV-EUiA"])){
party = "ICV-EUiA";
} else if (positions[position-1] == parseInt(d.properties["CUP"])){
party = "CUP";
} else if (positions[position-1] == parseInt(d.properties["C's"])){
party = "Cs";
}
return party;
}
d3.select("#position").on("change", function() {
var position = parseInt(this.value);
svg.transition()
.selectAll(".municipality")
.attr("class", function(d) {return "municipality " + selectParty(d,position);});
});
});
- At line 8, note that a new function is defined. The function returns the class name depending on the order position, passed as a parameter. At line 5, the function is called for the first time, asking for the first position.
- At line 41, an event method is added. When the selector changes its value, a transition is passed to the svg, calling the selectParty method to re-calculate the classes.
As you can see, modifying the properties of all the svg objects is quite simple.
Adding tooltips
Showing the results for a selected municipality when the mouse is over is also quite simple and improves a lot the map.
The complete code of the example can be found here
The tooltip is created using the files from this example. (although styled to make it contrast a little, and commenting the line 20)
The tooltip is created using the files from this example. (although styled to make it contrast a little, and commenting the line 20)
d3.json("mun_out_topo.json", function(error, topo) {
svg.selectAll("municipality")
.data(topojson.object(topo, topo.objects.mun_out).geometries)
.enter().append("path")
.attr("class", function(d) {return "municipality " + selectParty(d,1);})
.attr("d", path)
.call(d3.helper.tooltip(function(d, i){return tooltipText(d);}));
function selectParty(d,position){
var positions = new Array();
positions[0] = parseInt(d.properties["CiU"]);
positions[1] = parseInt(d.properties["PSC"]);
positions[2] = parseInt(d.properties["ERC"]);
positions[3] = parseInt(d.properties["PP"]);
positions[4] = parseInt(d.properties["ICV-EUiA"]);
positions[5] = parseInt(d.properties["CUP"]);
positions[6] = parseInt(d.properties["C's"]);
positions.sort(function(a,b) { return b-a; });
var party = null;
if (positions[position-1] == parseInt(d.properties["CiU"])){
party = "CiU";
} else if (positions[position-1] == parseInt(d.properties["PSC"])){
party = "PSC";
} else if (positions[position-1] == parseInt(d.properties["ERC"])){
party = "ERC";
} else if (positions[position-1] == parseInt(d.properties["PP"])){
party = "PP";
} else if (positions[position-1] == parseInt(d.properties["ICV-EUiA"])){
party = "ICV-EUiA";
} else if (positions[position-1] == parseInt(d.properties["CUP"])){
party = "CUP";
} else if (positions[position-1] == parseInt(d.properties["C's"])){
party = "Cs";
}
return party;
}
function tooltipText(d){
return "" + d.properties["Name"] + ""
+ "
CiU: " + d.properties["CiU"]
+ "
PSC: " + d.properties["PSC"]
+ "
ERC: " + d.properties["ERC"]
+ "
PP: " + d.properties["PP"]
+ "
ICV-EUiA: " + d.properties["ICV-EUiA"]
+ "
CUP: " + d.properties["CUP"]
+ "
C's: " + d.properties["C's"];
}
d3.select("#position").on("change", function() {
var position = parseInt(this.value);
svg.transition()
.selectAll(".municipality")
.attr("class", function(d) {return "municipality " + selectParty(d,position);});
});
});
Again, the code needs only small changes:
- At line 7, the event is added to each feature. I have separated the text generation into a function to make it easier to understand.
- At line 42 the function tooltipText is defined. It just returns the desired text getting all the properties from each feature.
Cool tooltips using d3js
The best thing about using d3js is that you can mix all its visual possibilities, which are infinite. In the electoral map case, a donut chart helps a lot when interpreting the numbers, at least, much more than showing only the number of votes, that cchange a lot in every municipality.
The complete code for the example can be found here
I have taken the donut chart code from this example, and the label positions from this other example.
I have taken the donut chart code from this example, and the label positions from this other example.
d3.helper = {};
d3.helper.tooltip = function (accessor){
return function(selection){
var tooltipDiv;
var bodyNode = d3.select('body').node();
selection.on("mouseover", function(d, i){
d3.select('body').selectAll('div.tooltip').remove();
tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px')
.style('position', 'absolute')
.style('z-index', 1001);
var arc = d3.svg.arc()
.outerRadius(120)
.innerRadius(40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.votes; });
var svg = tooltipDiv.append("svg")
.attr("width", 270)
.attr("height", 300)
.append("g")
.attr("transform", "translate(" + 270 / 2 + "," + 270 / 2 + ")");
var data = [
{'party':"CiU",'votes':d.properties["CiU"]},
{'party':"PSC",'votes':d.properties["PSC"]},
{'party':"ERC",'votes':d.properties["ERC"]},
{'party':"PP",'votes':d.properties["PP"]},
{'party':"ICV",'votes':d.properties["ICV-EUiA"]},
{'party':"CUP",'votes':d.properties["CUP"]},
{'party':"C's",'votes':d.properties["C's"]}
];
data.forEach(function(d) {
d.votes = +d.votes;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.party); });
g.append("text")
.attr("transform", function(d) { var angle =(180/Math.PI) * (d.startAngle + (d.endAngle-d.startAngle)/2); return "translate(" + arc.centroid(d) + ") rotate("+angle+", 0,0)"; })
.attr("dy", "-2.5em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.party; });
var municipality = d.properties['Name'];
svg.append("text")
.attr("transform", "translate(0,140)")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(municipality);
})
.on('mousemove', function(d, i) {
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px');
var tooltipText = accessor(d, i) || '';
//tooltipDiv.html(tooltipText);
})
.on("mouseout", function(d, i){
tooltipDiv.remove();
});
};
};
This piece of code is put before loading the topoJSON. Is more or less this example, adapted to show the parties results (line 28) and puting the labels using an angle (line 52). Notice that first, the rotation is done, and only then the translation. At line 53, the label is moved outside the pie.
The tooltip is added as in the previous example.
The data
Preparing the data has been, again, a problem. Since the Government gives the maps with a code (INE code) and the electoral results with another (alphabetical order), I've had to manipulate the files to merge them, by comparing the municipalities names. Besides, some of the names contain different abbreviations in each file, so they have to be changed by hand...
The files used are:
- The election results. Is a CSV file with all the municipalities, plus some regions and Barcelona quarters. I have cleaned them so only the municipalities are present. Besides, the file is encoded in Latin1, and the shapefile in UTF-8, so I have converted it using:
iconv -f latin1 -t utf-8 OPENDATA_A2012_vots.csv > newfile - The municipalities shapefile. I have get it from the Vissir3 web site.
- To merge both, I have made a small python script, uploaded to GitHub if you are interested in the code.
ogr2ogr -simplify 0.001 -f GeoJSON municipis.json municipis.shp
Simplifying the data so the file is smaller (the number is guessed just by trying many times to get the best size/quality relation)
and later:
topojson -p Name=Name -p ERC=ERC -p CiU=CiU -p PP=PP -p PSC=PSC -p ICV-EUiA=ICV-EUiA -p CUP=CUP -p "C's"="Cs" -o mun_out_topo.json mun_out.json
To convert JSON to TopoJSON.
