{"id":165,"date":"2015-07-23T09:59:49","date_gmt":"2015-07-23T09:59:49","guid":{"rendered":"http:\/\/datablog.cde.unibe.ch\/?page_id=165"},"modified":"2018-11-19T06:53:58","modified_gmt":"2018-11-19T06:53:58","slug":"coding","status":"publish","type":"page","link":"https:\/\/datablog.cde.unibe.ch\/index.php\/coding\/","title":{"rendered":"Coding"},"content":{"rendered":"

The CDEdatablog Team provides code snippet for all interactive graphs used in our posts. A very good overview to find a graph which is most appropriate for your data and story you want to tell is provided by The Data Visualisation Catalogue<\/a><\/strong>.<\/p>\n

Code snippets used in our posts:
\n
\n

\n
<\/a><\/div>\n
\n
Interactive maps<\/h5>\n

Interactive maps can be used to display any information aggregated on subnational levels, such as state, provincial, or regional levels. This graph is based on a JSON file. You can use Mapstarter<\/a> to transform your shapefile into a JSON file.<\/div>\n<\/div><\/div><\/div>\n

\n
Download code<\/a><\/div>\n
<\/div>\n<\/div><\/div><\/div>\n<\/span><\/p>\n
\n
\n
<\/a><\/div>\n
\n
Interactive circle graphs<\/h5>\n

The Circos website<\/a> contains a number of circle graphs along with tutorials and documentations on how to visualize your own data. The Circos website focuses mainly on medical data, but the graphs can easily be adapted to suit other topics.<\/div>\n<\/div><\/div><\/div>\n

\n
Download code<\/a><\/div>\n
<\/div>\n<\/div><\/div><\/div>\n<\/span>\n
\n
\n
<\/a><\/div>\n
\n
Dygraphs.js for visualizing time series<\/h5>\n

This interactive dygraph<\/a> time series graph offers several possibilities:<\/p>\n

    \n
  • zooming in and zooming out<\/li>\n
  • zooming into multiple time lines simultaneously<\/li>\n
  • direct comparison of results of several timelines<\/li>\n
  • zooming width and height simultaneously<\/li>\n
      \n<\/div>\n<\/div><\/div><\/div>\n
      \n
      Download code<\/a><\/div>\n
      <\/div>\n<\/div><\/div><\/div>\n<\/span>\n
      \n
      \n
      <\/a><\/div>\n
      \n
      Interactive doughnut charts<\/h5>\n

      A doughnut chart is useful for visualizing the contributions of different subgroups to a total. For example, you can use a doughnut chart to visualize the percentage contribution of different economic sectors to the annual economic growth rate.<\/div>\n<\/div><\/div><\/div>\n

      \n
      Download code<\/a><\/div>\n
      <\/div>\n<\/div><\/div><\/div>\n<\/span>\n
      \n
      \n
      <\/a><\/div>\n
      \n
      Interactive node charts<\/h5>\n

      Node charts are generally used to visualize networks. In the CDEdatablog we used a node chart to visualize the composition of an index.<\/div>\n<\/div><\/div><\/div>\n

      \n
      Download code<\/a><\/div>\n
      <\/div>\n<\/div><\/div><\/div>\n<\/span>\n
      \n
      \n
      <\/a><\/div>\n
      \n
      Interactive treemap<\/h5>\n

      Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. You can zoom into the rectangles, and you have the option of adding hyperlinks.<\/div>\n<\/div><\/div><\/div>\n

      \n
      Download code<\/a><\/div>\n
      <\/div>\n<\/div><\/div><\/div>\n<\/span>\n
      \n
      \n
      <\/a><\/div>\n
      \n
      Interactive two-sided bar chart<\/h5>\n

      This interactive two-sided bar chart can be used to compare two groups. In the CDEdatablog we used this chart to visualize the poverty and wealth gaps for each county in Kenya.<\/div>\n<\/div><\/div><\/div>\n

      \n
      Download code<\/a><\/div>\n
      <\/div>\n<\/div><\/div><\/div>\n<\/span>\n
      \n
      \n
      <\/a><\/div>\n
      \n
      Map your world with cartoDB<\/h5>\n

      CartoDB<\/a> is a location intelligence and visualization engine that enables you to transform data into insights without much effort. With cartoDB you can easily locate your points on a webmap or produce heatmaps over time.<\/div>\n<\/div><\/div><\/div>\n<\/span>\n