Tagged: mapbox

Malofiej24 Award 2016 for Best Map in printed media

Share Button

This is just a short recap of the project that was awarded a Miguel Urabayen Award as the Best Map in printed media and a gold medal for a feature article at Malofiej24. The whole list of awarded projects is available on their website, our project is listed first, and then again under the Features / Reportajes heading. My colleagues – Aljaž Vesel, Ajda Bevc, Aljaž Vindiš and the graphics editor Samo Ačko – got two more awards, and I congratulate them sincerely. Read more about the award here. The article in dnevnik.si about the awards is here (Slovenian).

The project was my first collaboration with the Dnevnik newspaper for the Objektivno feature section, which mainly features various data visualizations. It was a done in a  somewhat ad-hoc fashion for lack of anything else to do. I realized I’ve been scraping the site where the list of towed cars is published for the owners to check if the car suddenly disappears from a public parking in Ljubljana.  The list doesn’t exist anymore, but it used to be on this page. It contained the car make and model, registration plate number, the location from where it was towed, and datetime stamp. We decided to put it all on the map, and analyze it a bit to see where the luxury makes are towed most.

Here’s the map printout from the newspaper. Click it for the PDF, or click this link.


It’s in Slovenian language, so for English speakers:

  • street segment thickness is for number of cars towed (legend top left)
  • color is for ratio between better and ordinary car makes – we arbitrarily decided what is “better”, but we generally considered more expensive cars, like Audi, Mercedes-Benz, etc. as better. Yellow is for uniform distribution, red is for slightly more better cars, blue for mostly better cars, and black for exclusively better cars. Circles denote regions where mostly better cars were towed. That usually happens in the center and around the new sports stadium.
  • on the bottom left there are some statistics, as well as the list of car makes we used.
  • on the bottom right there are some map cutouts of neuralgic points on the map with some commentary.

One wonders if owners of better cars are more prone to get parking tickets than owners of ordinary cars. I believe that is so, and the sad reason must be an inflated sense of self-importance, which translates in the said persons being convinced that the law doesn’t apply to them, leaving their shiny cars parked in inappropriate places. There’s another side to the story – the underpaid traffic wardens, who are all too happy to make a point by immediately calling the tow truck and ignoring the owners’ pleas even if they come before the towing itself. So there is a social undertone to this project, and I’m happy if the jury members realized this as they deliberated.

The whole project was done on Mapbox platform, except for street geocoding and geometry, which comes from my privately curated database, derived from public dataset, which is in turn managed by this public agency. Many thanks to Mapbox team for the turf.js library, which I used in node.js to properly annotate the geometry with numbers and calculate the ratios. The resulting geojson file was then imported into MapBox Studio, styled by the gifted designer Aljaž Vindiš, and prepared for print.

Some time ago, I released a much more comprehensive project with many visualizations of traffic infractions in Slovenia, which took me months to make, but failed to make any significant traffic or impact in public sphere.

The raw development version is still on my server, see it here. I forgot what I meant with the coloring, but I guess it’s the car make ratio.

The whole thing took us around two days to make. After that, we collaborated on a number of interesting projects, but sadly, as is inevitable in life, the merry group self-disbanded and left the newspaper for greener pastures. I’m looking forward to collaborating again with any of them.


Image courtesy of Matjaž Erker.


Corruption visualized: Global Corruption Barometer 2013 on world map

Share Button

Interactive map of data from Global Corruption Barometer 2013 (Transparency report), showing corruption levels per country for political parties, educational sector, private companies, media, civil servants, judicial and medical institutions, military, NGOs, parliament, police and religious institutions.

Launch interactive map

Global Corruption Barometer 2013 on interactive world map
Global Corruption Barometer 2013 on interactive world map

Made with TileMill, data: Transparency International.

Noise pollution caused by church towers in Ljubljana

Share Button

One Sunday I woke up to incessant and very loud tolling of nearby church bell. It was 9 o’clock in the morning. It didn’t seem fair that an institution can cause so much noise so early. As I work hard during the week, run almost every day, and write software, sometimes until late, I would very much prefer to sleep. The clergy would probably say that honest Christians are already awake at that time, so I’m no good anyway.

I then decided to research the matter. A number of facts surfaced, the most startling of which is a state decree, which states that church bells are not categorized as noise. If an inspector came to my house, measured sound levels while this was going on, and found out that they exceed proscribed levels, he would not be able to fine the aforementioned institution. He would probably bill me for the expenses of his time. But I digress.

Action was taken: city geometry was imported into computer along with church bell coordinates. Aggregate sound pressure for each building was calculated, then ranged so it could be visualized. Additionally, a point where there is least such noise was calculated. You can see results below. The point with least noise is on the green marker in the lower left corner. Lucky owner of that house.

Note: please notify me before embedding this map in your page.

I have to admit that the calculation is naive. It doesn’t take into account the elevation model, neither it accounts for building heights. Sound reflection is also ignored. But my curiosity was satisfied. I do live in the red zone.

Here are same maps on different scales. One is for entire country of Slovenia.

Edit: after this post went viral and other media (Dnevnik.si) published their own versions linking to me, I feel compelled to clarify my position about church bells. Personally, that is, as a person, and not a member of any organization, I’m bothered by long intervals of loud tolling on Sunday mornings. I’m told by other people they don’t like that either, and some other people point out that any attempt at playing music at this volume at similar hour of day would not end well.

I do somewhat like single chimes announcing hours of day, even at night. It’s a part of urban environment, and I’d probably subconsciously miss it should they quit. I’m not against Catholicism, the Church, or faith of any denomination.

When you toll so loudly next time please consider:

  • do unto others as you would have them do to you,
  • would Christ approve of that?


How to publish Gephi graphs on MapBox with TileMill

Share Button

This is a simple how-to on publishing Gephi graphs in a tile-based, zoomable map suitable for online presentation. It’s intended for Gephi users, who find other solutions lacking, or would simply like to learn to publish in a free, cloud-based service.

If you have a Gephi graph and would like to publish it, you can export node and edge data in one of standard formats and use it to render tiles to use in Leaflet, Google Maps or other suitable APIs. This requires a server to store the tiles and some knowledge to render them and use the API.

There’s another possibility – you can use TileMill to render the tiles and free online service MapBox to host and display them. So here’s how to do it. I used this procedure to render the map here.

Exporting the graph data to TileMill

There’s more ways to do that. This one is relatively easy,  but it requires some programming knowledge, as you have to use the Gephi Toolkit.

First make the graph. You can use Gephi or Gephi Toolkit. I use Gephi, since it allows to visually inspecting the graph, run additional correcting layout algorithms and so on. Save the graph as a .gephi file.


The graph is already spatialized and analyzed for modularity classes, so the node information in .gephi file contains at least coordinates (x, y), modularity classes, labels and sizes. TileMill can import CSV, so this is what we are going to do using Gephi Toolkit.

Here is the Java code:

 public class RGraph {
private static final String root = “C:\\Users\\solipsy\\Documents\\!Data\\Gephi\\”;

public void openGephi (File file) {
//Init a project – and therefore a workspace
ProjectController pc = Lookup.getDefault().lookup(ProjectController.class);
if (pc.getCurrentProject() != null) {
Workspace workspace = pc.getCurrentWorkspace();

ImportController importController = Lookup.getDefault().lookup(ImportController.class);
GraphModel graphModel = Lookup.getDefault().lookup(GraphController.class).getModel();
AttributeModel attributeModel = Lookup.getDefault().lookup(AttributeController.class).getModel();

//Append imported data to GraphAPI
//See if graph is well imported
DirectedGraph graph = graphModel.getDirectedGraph();
System.out.println(“Nodes: ” + graph.getNodeCount());
System.out.println(“Edges: ” + graph.getEdgeCount());

//export to CSV
try {
CSVWriter writer = new CSVWriter(new FileWriter(root + file.getName() + “.csv”), ‘\t’);
String[] header  = “Latitude#Longitude#Modularity#Size#Label”.split(“#”);
for ( Node n: graphModel.getGraph().getNodes().toArray()) {
if (Math.sqrt(n.getNodeData().x() * n.getNodeData().x() + n.getNodeData().y() * n.getNodeData().y()) > 3500) {
String [] entry = new String[5];
entry[0] = String.valueOf(n.getNodeData().x());
entry[1] = String.valueOf(n.getNodeData().y());
entry[2] = String.valueOf(n.getAttributes().getValue(Modularity.MODULARITY_CLASS));
entry[3] = String.valueOf(n.getNodeData().getRadius());
entry[4] = String.valueOf(n.getNodeData().getLabel());
System.out.println (“modclass: ” + n.getAttributes().getValue(Modularity.MODULARITY_CLASS) +
“\tx: ” + n.getNodeData().x() +
” \ty:” + n.getNodeData().y() +
“\tsize: ” + n.getNodeData().getRadius() +
“\tlabel: ” + n.getNodeData().getLabel());


} catch (IOException e) {
// TODO Auto-generated catch block

ExportController ec = Lookup.getDefault().lookup(ExportController.class);
try {
ec.exportFile(new File(root + file.getName() + System.currentTimeMillis() + “.png”));
} catch (IOException ex) {

You’ll need to import Gephi Toolkit and OpenCSV. Incorporate the export class in your project and call the “openGephi” method. Correct paths to reflect directory structure on your computer. The method should produce a CSV file with following attributes: latitude (x), longitude (y),  size, label, modularity class. Open the file in Notepad and replace out the quotes. Now it’s ready to import into TileMill.

Importing data into TileMill and setting up a project


This is not what you’ll get when you import the data. Its’ a look of a finished project. First you open Tilemill and add a new layer:


Give it a name and choose “900913” (Google) in SRS dropdown. That’ll place your graph right in the center of the map. You’ll notice that it’s just a tiny dot on the first zoom level. Zoom in, until you can clearly see the distinct dots. Zoom some more to decide the zoom bracket for your map, then set it using the slider. For the map above, I used zooms from 14 to 19. You should really use this option, or else the map will be huge, result in thousands of GBs of data and render for a year. You should also mark a part of the whole map to later export. Shift and drag around your graph to select the smallest possible area.

2-tilemill-project settings

The metatile setting is important, but leave it on 1 for now. It’s used to prevent marker and label clipping on closer zoom levels. Larger means less clipping, but also less responsive map during editing.

Now it’s time to style your map so the nodes and labels are displayed in correct sizes and colors.

Styling the map

TileMill uses something called CartoCSS for styling labels, lines, markers, etc. It’s a simple conditional CSS. You can adjust values for each zoom level, and that’s what we are going to do. We’ll use markers to display the nodes, and set marker sizes so that they reflect the values in the “Size” column of your CSV file.


We’ll have to set the marker size to read the data in the column. This if for the biggest zoom level. Marker sizes get lower on lower levels by a factor 2, so for zoom levels 19 and 18 the marker size is specified like this:

[zoom = 19] {
marker-width: [Size] * 8;


[zoom = 18] {
marker-width: [Size] * 4;


You can guess the rest, it’s just dividing down the marker size. Unfortunately, it’s impossible to do something like that for labels. So we have to generate a list of node size brackets and corresponding marker sizes for each zoom level separately. I use Excel to do this, but maybe it’d be better to just write another method to generate all that during export. So, for zoom 19 we have:

[zoom = 19] {
marker-width: [Size] * 8;
[Size >0][Size <= 5] {text-size:8 }
[Size >5][Size <= 10] {text-size:13 }
[Size >10][Size <= 20] {text-size:20 }
[Size >20][Size <= 30] {text-size:40 }
[Size >30][Size <= 40] {text-size:60 }
[Size >40][Size <= 50] {text-size:80 }
[Size >50][Size <= 60] {text-size:100 }
[Size >60][Size <= 70] {text-size:120 }
[Size >70][Size <= 80] {text-size:140 }
[Size >80][Size <= 90] {text-size:160 }
[Size >90][Size <= 100] {text-size:180 }
[Size >100][Size <= 110] {text-size:200 }
[Size >110][Size <= 120] {text-size:220 }
[Size >120][Size <= 130] {text-size:240 }
[Size >130][Size <= 140] {text-size:260 }
[Size >140][Size <= 150] {text-size:280 }
[Size >150][Size <= 160] {text-size:300 }
[Size >160][Size <= 170] {text-size:320 }
[Size >170][Size <= 180] {text-size:340 }
[Size >180][Size <= 190] {text-size:360 }
[Size >190][Size <= 200] {text-size:380 }
[Size >200][Size <= 210] {text-size:400 }
[Size >210][Size <= 220] {text-size:420 }
[Size >220][Size <= 230] {text-size:440 }
[Size >230][Size <= 240] {text-size:460 }
[Size >240][Size <= 250] {text-size:480 }
[Size >250][Size <= 260] {text-size:500 }
[Size >260][Size <= 270] {text-size:520 }
[Size >270][Size <= 280] {text-size:540 }
[Size >280][Size <= 290] {text-size:560 }
[Size >290][Size <= 300] {text-size:580 }
[Size >=300][Size <= 310] {text-size:600 }

and for 18:

[zoom=18] {
marker-width: [Size] * 4;
[Size >0][Size <= 5] {text-size:2 }
[Size >5][Size <= 10] {text-size:5 }
[Size >10][Size <= 20] {text-size:10 }
[Size >20][Size <= 30] {text-size:20 }
[Size >30][Size <= 40] {text-size:30 }
[Size >40][Size <= 50] {text-size:40 }
[Size >50][Size <= 60] {text-size:50 }
[Size >60][Size <= 70] {text-size:60 }
[Size >70][Size <= 80] {text-size:70 }
[Size >80][Size <= 90] {text-size:80 }
[Size >90][Size <= 100] {text-size:90 }
[Size >100][Size <= 110] {text-size:100 }
[Size >110][Size <= 120] {text-size:110 }
[Size >120][Size <= 130] {text-size:120 }
[Size >130][Size <= 140] {text-size:130 }
[Size >140][Size <= 150] {text-size:140 }
[Size >150][Size <= 160] {text-size:150 }
[Size >160][Size <= 170] {text-size:160 }
[Size >170][Size <= 180] {text-size:170 }
[Size >180][Size <= 190] {text-size:180 }
[Size >190][Size <= 200] {text-size:190 }
[Size >200][Size <= 210] {text-size:200 }
[Size >210][Size <= 220] {text-size:210 }
[Size >220][Size <= 230] {text-size:220 }
[Size >230][Size <= 240] {text-size:230 }
[Size >240][Size <= 250] {text-size:240 }
[Size >250][Size <= 260] {text-size:250 }
[Size >260][Size <= 270] {text-size:260 }
[Size >270][Size <= 280] {text-size:270 }
[Size >280][Size <= 290] {text-size:280 }
[Size >290][Size <= 300] {text-size:290 }
[Size >300][Size <= 310] {text-size:300 }

Then just continue dividing, until you reach your last zoom level. It’s important not to use too many intervals in a zoom level, or TileMill will crash, at least on Windows.

Now set up colors. If you used modularity, look up the the numbers for modularity classes in Gephi and use them in CSS. In my example, I use Modularity column in CSS to determine node colors:

[Modularity = 43]  {marker-fill:#0000FF;}
[Modularity = 72]  {marker-fill:#008B00;}
[Modularity = 5]  {marker-fill:#EEB422;}
[Modularity = 3]  {marker-fill:#8E388E;}
[Modularity = 9]  {marker-fill:#FF1493;}
[Modularity = 0]  {marker-fill:#CD0000;}
[Modularity = 25]  {marker-fill:#388E8E;}
[Modularity = 38]  {marker-fill:#8E8E38;}
[Modularity = 6]  {marker-fill:#1E90FF;}
[Modularity = 10]  {marker-fill:#000080;}
[Modularity = 7]  {marker-fill:#00EE00;}
[Modularity = 21]  {marker-fill:#B8860B;}

Before exporting, don’t forget to set the metatile size to at least 7 to prevent clipping.

Exporting to MapBox

Create an account on MapBox. It’s free for up to 50 MB of data and 5000 views in a rolling month.

In TileMill, select “Export / MBTiles”. Name your map, review the settings and click “Export”, if you want to save tiles to disk, or “Upload” if you want them to immediately appear in your MapBox account. Then make your map visible and share!