danoszz / fe3-assessment-1

πŸ’© FE3 Assessment 1 by @danoszz

Home Page:https://danoszz.github.io/fe3-assessment-1/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Assessment 1

A visualization for FE3 Assessment 1 by @danoszz. This documentation will show my process and thoughts.

Initial Idea

As the workflow guided through the process; a visualization always will start with looking at the raw data. I chose the Population without indoor toilet dataset in particular because of a few reasons:

  • In the past I had some problems with JSON formats for visualizations, good time to learn.
  • Most data points from each dataset: year, percentage and country.
  • πŸ’©

I came up with an initial idea of creating a scatterplot in the shape of an toilet called Splatterpot. alt text

Scope

Since the idea is a bit out of scope for the project and above my own expectations it is fair to say the outcome would never match 100% with the initial idea. I've learned that if I focus to much on the style, concept en outcome that the code will be the weak chain in the end-product. To match the learning objectives the visualization is focused on a working D3.js code instead of a laughable, not working, toilet with πŸ’©. So therefore styling is out of scope (but not out of mind).

Failed

But.. I failed to deliver it before the deadline because I was stuck at one point for 5 hours:

  • The 'years' (2005 - 201^) are stored in JSON as same level as 'country' and 'code' and as a string. To get them on the Y-axis was impossible.

Kill your darlings

One and a half hour before the deadline I realized I had to make a big change to still hand in a proper working code. So I did. It needed to be fast and solid. So no crazy ideas. They can be handed in during the re-sit at the end of the semester. The original code can be viewed here.

βœ‚οΈ The only challenge for myself to write the code as in few lines as possible.

Features

Although I am not 100% happy with the result the D3.js visualization contains a decent amount of features:

  • d3.pack
  • d3.tsv
  • d3.format
  • d3.hierarchy

The prettified code is only 48 lines long!

Things that had to be done

  • Pick another dataset
  • Find a example code for visualization
  • Clean up file structure and make it work locally
  • Again some cleaning, but now in the HTML, CSS and most importantly JS
  • Change D3 V3 to D3 V4
  • Get a working visualization without any errors
  • Upload master branch to GitHub Pages
  • Edit meta data
  • Workflow described in documentation and code
  • Replace this document in your fork with own readme!
  • ES5 -> ES6
  • Add functionalities (ex. hover display amount, force & drag function)
  • Style the hell out of this boring bubble chart

About

πŸ’© FE3 Assessment 1 by @danoszz

https://danoszz.github.io/fe3-assessment-1/


Languages

Language:JavaScript 85.3%Language:HTML 8.3%Language:CSS 6.4%