Visualizing data with Javascript
Recently I found D3js project, I really found it interesting and I made a short project to try to implement data visualization using this library. This post is about the process.
Figure 1: CovidVsYou screenshot
It was difficult for me at the beginnig to understand the development workflow for this library; the main issue I had was finding the examples on the observablehq.com. The main tutorials from the official web page https://d3js.org/ leads you to learn D3 inside ObservableHQ platform, but I just wanted to learn D3.js on the basis.
Hopefully I found this page: https://www.d3-graph-gallery.com/index.html
With the tutorials found I was able to manage to start the project.
The project that i’ve created to apply these concepts/libraries is kind-of-stupid :) I feel sorry, I called: “Covid vs You”.
I’ll try to explain: the aim of the project was to visualize the Covid data (from Spain, in regard of total of positive tests reported) and navigate the data exploring photos that the user/me/you took during the pandemic. What I was envisioning was the paradox between the visual effect on the epidemic contect against your/mine “happy” photos (hopefully). I made to myself the following questions:
- Where were you being and doing during this global mess?
- How you resisted against all this?
- Did you had good times, after all?
I hope so.
Because I wanted to relate the data of the reported positive cases and the data extracted from the pictures I needed to read the meta info from the JPG files. This is possible by using the npm javascript library https://github.com/exif-js/exif-js
Also I wanted to use 100% Emacs during the development of this project avoiding to use VSCode that is what I’m very used to.
What I learned?
- How to create interactive SVG graphs reading from CSV files with D3js
- How to add npm libraries to a Web project
- How to start a simple Web server using npx
- How to read the Meta information of JPG files
Maybe you could find useful the project if you are interested in one or more of these topics, if so, fell free to visit the repo it is published on my Github Repo:
You will find on the Readme the instructions to install and to use it.