Razpudding / fed3-d3events

This repo functions as an example of how you can load an online JSON file with D3 and visualize it

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This repo functions as an example of how you can load an online JSON file with D3 and how you can visualize it

See an example of how it works here

Data

The data used comes from the municipality of Amsterdam It includes a list of events and sights which updates daily, providing a great example of a changing dataset for students

The dataset holds for each event the following information:

  • title
  • short description
  • lastupdated: Last updated timestamp
  • types: object holding at least one type and category id
  • media: an array holding 0 or more objects whhich hold a url to an image of the event
  • location: object With a name, city, adress, zipcode and lat long The list above is of datatype string unless mentioned otherwise

Features

  • Each event is mapped to a scatterplot where x and y axis are determined by longitutude and latitude, providing a rudimentary "map"
  • The color of each event is determined by the type of event (category) and connected to a label in the legend.
  • The color can also be mapped to how long ago the event decription has been updated.

Steps taken

  • Print a couple of objects in the dataset to make sense of the information it holds
  • Describe each of the variables in the dataset
  • Figure out which could be interesting to display and come up with a concept
  • Figure out what the categories mean
    • Sort the data by category
    • Write down what I think each item in a cat has in common
    • Make an enum out of my assumptions for each cat
  • Link the categories to the color

Todo:

[ ] Describe steps taken to make datavis [x] Translate categories and map them to color [ ] Make scatterplot of price and category [ ] Zoom in on the data a bit more to remove outliers (do this with the range possibly) [x] Add interaction (filtering data when clicking on legend, add class hidden) [x] Add image of event or title on mouseover (possible to the right of the graph) [x] Add the legend back [ ] Add a preview image to this readme. [x] Implement zoom

About

This repo functions as an example of how you can load an online JSON file with D3 and visualize it


Languages

Language:JavaScript 89.3%Language:CSS 5.7%Language:HTML 5.0%