D3.js - Visualisations

[Sofia-Pika]

In this issue i'm showing what i found to help me create the visualisations :

1. Documentations : Look here.
2. I'm inspired by this.
3. How this visualisation looks on a website.
4. Here the library for all ideas/propositions.

[Xoeseko]

Check this out

Visualisations in markdown

The markdown code to generate the Visualisations

Don't hesitate to view the raw file from the repo to see what is actually going on. Also, this only helps you figure out where to put the visualisation but for generating it.. You will need to understand how the one in your link 3 and 4. Although this could help you understand what's important.

For example that this script does not need to be added directly to our project we just need to link to it in the code.

<script src="//d3js.org/d3.v3.min.js">

I hope this helps and look forward to seeing what amazing visuals you will come up with.

[Xoeseko]

Also just thought about it the visualization you chose to take inspiration from is pretty impressive but after reviewing the documentation it is more adapted to multidimensional data... However with the sdg-market api as it currently is, we can barely get enough data to visualise the token generation time series... I would suggest simply starting with the token generatoin time series Following an example like this:

d3.js time series

Of course you can still take inspiratoin from your first idea but this one is maybe more interesting for the time being... Tell me what you think ? Of course I'll respect your choice if you feel like the first one is more interesting for good reason.

[Sofia-Pika]

Well while looming how to make my initial visualisation, i noticed that it will be too hard to make in this short time (and also because i am still learning it).

So i'll look for other kind of visualisation. Maybe a circular one (i will poste what i find later on and of course if i don't find anything interesting or doable, i will take your suggestion).

[Sofia-Pika]

I found this (it's an animation with multiple kind of visualisations, i prefer the first and the two after this one) and it looks easy to make. They would be the plan B if i can't make the one you suggested (which after looking at it looks so cool).

[Xoeseko]

I really like the animation you linked it is pretty cool maybe as a finality it could be fun to implement some maybe not all as transitions on click that would be really smooth ! For the one I suggested if you want ot get started understanding how time series work plotly is really clear. You can test out code for free in the community edition and export directly in a format we could embed. I recommend:

• [ ] Trying plotly to plot the data from our https://raw.githubusercontent.com/Xoeseko/sdg.market/gh-pages/data%20visualisations/contributionTable.csv this should be relatively easy
• [ ] Adding the plot javascript code to a page on our site in the same folder as the python visualisation. You can take inspiratoin from this with the code here
• [ ] Making the plot more customizable like the link I first added
• [ ] Adding some nice visual transitions like in your last link. Try to make them on-click though, we wouldn't want the graphs to be unreadable...

If you follow this order the complexity should increase gradually allowing you to understand welll what's going on. If you have any questions don't hesitate

[Sofia-Pika]

Question, is it better to :

1. make the clicking system (with max 3 visualisations)
2. make a menu to select what kind of visualisation you want (since some may find easier to look at some kind of visu', ans so they don't have to click dozen times if the one they like is in the middle.

[Xoeseko]

I think both are really good ideas ! Maybe clicking through makes it more intuitive while the menu makes it obvious. Can you try both and see what works best ? I don't actually have an answer (The menu might be the best long term solution once we start getting more data...)

[Xoeseko]

Regarding the column names in the d3.js every line object is defined with json format... It is a dictionary of keys and values as such:

var line = {
  type: "scatter",
  mode: "lines",
  name: 'the name you want to give',
  x: unpack(rows, 'name of the row'), //the value of x must be a list of values so if you unpack a row you get all data undre that row in the csv file as a list
  y: unpack(rows, 'name of the row'),
  line: {color: '#17BECF'}
}

You can also generate each line programmatically like in the more complex time series.

color.domain(d3.keys(data[0]).filter(function(key) { // Set the domain of the color ordinal scale to be all the csv headers
    return key ; 
  }));
//then use these keys to generate the json for each object tell me if you don't understand something
var categories = color.domain().map(function(name) { // Nest the data into an array of objects with new keys 
//the previous line generates a list of colors
    return {
      name: name, // "name": the csv headers except date
      values: data.map(function(d) { // "values": which has an array of the dates and ratings
        return {
          date: d.date, 
          rating: +(d[name]),
          };
      }),
      visible: (name === "Unemployment" ? true : false) // "visible": all false except for economy which is true.
    };
  });

[Sofia-Pika]

The resolution of our problem from this morning yay!!

[Xoeseko]

Yes I hope you manage with this and just in case this could help you further grasp this crazy notation