•  
  • Easy map visualisations with Mapstarter

    Media Hack data journalism, hacks Easy map visualisations with Mapstarter
    Easy map visualisations with Mapstarter

    data journalism hacks

    Easy map visualisations with Mapstarter

    Posted By Alastair Otter

    In the world of data visualisation d3.js is the toolset of choice for most interactive journalists. But D3 also comes with a steep learning curve that makes it relatively inaccessible to the average journalist with just a small amount of coding experience.

    I’ve done some very basic D3 stuff in the past but it took absolutely ages to get it working properly and I broke the visualisations more often than I improved them. And I certainly never got close to making anything that even resembled a map visualisation in all the time I spent trying to learn D3. So Mapstarter is something of a blessing.

    Mapstarter makes it simple to create a basic interactive map from shapefiles as well as GeoJSON and TopoJSON files. And even if you do know how to programme your own D3 map, Mapstarter speeds up the time to get a map from concept to reality.

    I heard about Mapstarter a couple of days ago (ht: @siyafrica) and decided to give it a spin. I downloaded a shape file from the South African Demarcation Board website (in this case an election ward map for Johannesburg) and 10 minutes later I had a functioning map of the number of registered voters in each ward.

    Mapstarter is literally that, a “starter”. Once you have the map created you can tweak the information and styles and, if you know some programming, you can build out even more impressive map visualisations.

    The original map I made popped up the number of voters in each ward when you hovered over it but it was extremely basic. So I opened up the shape file database file in LibreOffice, added another column for label text and rebuilt the map. This version is still very basic but at least you can tell what the numbers represent.

    Once the map is created you can download it as a SVG or image file which you could use in Illustrator as the basis for an illustration, or you can download the code and include that in your website. That’s what I’ve done above.

     

    Written by Alastair Otter

    Data visualisation & design, journalist, hacker.

    http://mediahack.co.za/alastair

    Leave a Reply

    Your email address will not be published. Required fields are marked *