Data visualisation with D3 mini-project (first project)


source (Github): https://github.com/jmcanario/D3-practice

source (desktop only): https://projects.juanmanuelarmas.com/html/bubble-map/

Project Overview:

This project summarizes a data visualization project created using D3, after learning this library in a course. The project involved developing a bubble map to display data on the best-selling gaming consoles, which added complexity to the information acquired in the course so not similar projects were done during by.

After learning D3, I sought to challenge myself with more complex data visualization than the exercises provided in the course. I explored the official website and selected the bubble map graph that piqued my interest. To obtain data, I opted for Kaggle and downloaded the Best-Selling Gaming Consoles Dataset in CSV format. Initially, I encountered confusion with the instructions as a beginner and undertook extra research on GitHub. I came across a project by Jeffrey Morgan that employed forces, a novel concept for me. To gain a better understanding of his approach, I consulted the API reference and tinkered with his code. Combining knowledge from the course, D3 webpage reference material, personal experimentation, and additional online research, I developed several JavaScript pages. Eventually, with the help of all these resources, I successfully created the bubble map and decided to enhance it by adding a legend.

Key Features:

  • Bubble map using D3js
  • Sales data it shows up on hoover the bubbles
  • Legend added
  • Data using Kaggle

Technologies Used:

  • HTML, CSS, and JavaScript, along with D3js library

Challenges and Solutions:

These are the several challenges encountered while working on a data visualization project using D3. As a beginner, I struggled with the instructions provided, leading to confusion. However, I found a solution by conducting additional research on GitHub, where they discovered a project by Jeffrey Morgan that utilized forces. To better understand this concept, I consulted the API reference and tinkered with Morgan’s code. They also combined knowledge from the D3 webpage, personal experimentation, and online research to develop several JavaScript pages. Another challenge faced was adding a legend to the final product, which was overcome by finding a solution through creativity and information online. Ultimately, despite facing several challenges, I was able to create the desired data visualization project.


Need a designer?

Let's work together!