Presentera data

Om du vill visualisera mängder av tabelldata på ett snyggt sätt på webben så är just tabeller inte ofta det bästa sättet.

Ett alternativ kan vara att använda ”Data-Driven Documents” eller D3 som javaskriptet brukar kallas.

Screenshot from 2014-05-11På hemsidan (klicka på bilden ovan) så finns bland annat massor av exempel på hur data kan visualiseras på olika sätt.

När man tittar på dessa exempel så skall man ha klart för sig att det inte är bilder som är gjorda i ett ritprogram, utan skript och data som genererar dessa diagram dynamiskt och många av exemplen är till och med interaktiva.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
    function rita(data) {
       "use strict";
       // Visualiseringskoden skrivs in här.
    }
 </script>
</head>
<body>
 <script>
    d3.json("data.json",rita);
    // Här ovan hämtas data och funktionen för att rita anropas.
 </script>
</body>
</html>

Koden för D3-visualiseringarna behöver en ”hållare” i html (rutan ovan), men sedan är det traditionellt javaskript som används. För att ladda in data som JSON så krävs det någon form av webbserver dock, så det går inte att testa vad som helst utan en sådan, men det finns massor med guider och exempel för hur man kan göra detta.

Är man sedan intresserad av att lära sig mer så verkar http://alignedleft.com/tutorials/d3 vara en bra sida att börja med.

D3 används i ”iD” som är redigeraren för Open Street Map och det finns stöd i D3 för såväl GeoJSON com TopoJSON. Upphovsmannen bakom D3, Mike Bostock, har en ”tutorial” för att visa hur man kan skapa en enkel karta med D3 (http://bost.ocks.org/mike/map/). På hans sida kan man även hitta en massa ytterligare exempel.

Jag kan initialt tycka att det blir lite omständligt att skapa kartor med D3, men skall man presentera data snyggt eller till och med interaktivt så kan det absolut vara motiverat att lära sig lite D3.

Jobbar man redan med Leaflet eller OpenLayers så ser jag inga problem alls med att lägga till funktionalitet från D3 för just ett sådant ändamål. Tänk att använda kartan för att göra ett urval av geografiska data, hämta dessa som JSON via exempelvis GeoServer och visualisera deras data med D3 i en snygg grafik. Jag säger inte att det är enkelt, men möjligheterna till att skapa mycket snygga geo-portaler med Open Source är mycket goda!

Annonser

Taggar:, ,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: