DMC ... Data Viz

Nomadic Numbers

Visualising a Life's Journey with d3.js

Introduction

The "Nomadic Numbers" project was a unique and personal endeavour, aiming to visualise my extensive history of moving homes using d3.js for data visualisation. This project was particularly challenging due to my limited JavaScript experience at the time, but it provided a valuable opportunity to delve into the world of data representation and interactivity. Notably, the project also incorporated an interactive tutorial, guiding the user through the dashboard's features. To streamline the layout and responsiveness, the Bootstrap framework was used.

HTML:

Structuring the Tutorial and Data Narrative with Bootstrap

The HTML for "Nomadic Numbers" was carefully structured to present both the data and the tutorial in a clear and organised manner, leveraging Bootstrap's grid system and components:

Bootstrap Grid System: The project used Bootstrap's grid system (<div class="row">, <div class="col-*">) to create a responsive and well-organised layout.
Navigation Sidebar: A fixed sidebar (<nav id="sidebar">) provided easy access to different sections of the dashboard, allowing users to follow the story in a logical order, after the tutorial.
Jumbotron Introduction: A jumbotron introduced the project and its purpose, setting the stage for the sequential data visualisation and the tutorial.
Chart Containers: <div> elements were used as containers for the various d3.js charts, each with a descriptive ID for targeted JavaScript manipulation, presented in a logical order to build the narrative, following the tutorial.
Google Maps Integration: A <div> with the ID "routeMap" was designated for the Google Maps display, showing the journey path as a visual, step-by-step timeline, introduced in the tutorial.
Tutorial Implementation: The tutorial itself, while primarily driven by JavaScript and CSS manipulations, likely uses <div> elements or similar, possibly positioned using Bootstrap's grid, to create overlay elements, and text boxes to provide the user with instructions.

This HTML structure, enhanced by Bootstrap, ensured that the data was presented in a logical flow, guiding the user through the narrative of my nomadic lifestyle, with each section building upon the previous one. The tutorial was integrated to provide a smooth on-boarding experience.

JavaScript (d3.js) and Google Maps:

Constructing an Interactive Tutorial and Visual Timeline

The core of "Nomadic Numbers" was powered by JavaScript, leveraging the d3.js and dc.js libraries for interactive data visualisation, and the Google Maps API to show a literal journey:

Data Loading and Crossfilter: The queue() function loaded the CSV data, and crossfilter() was used to enable efficient data manipulation and filtering, allowing the data to be presented in a way that shows progression, and to be interacted with via the tutorial.
Pie and Stacked Bar Charts: dc.js pie and stacked bar charts were used to visualise different aspects of the data, with the charts ordered to tell a story, and used as part of the tutorial.
Google Maps Polyline: The Google Maps API was used to plot my journey, with polylines connecting each move. Critically, the JavaScript loop in map.js draws each polyline in the order of the moveCoordinates array. This creates a sequential visualisation of the moves, where each line represents a step in the journey. The array of colours also adds a degree of visual separation between each step of the journey, and this step-by-step process is highlighted in the tutorial.
Interactive Tutorial: The JavaScript code implements an interactive tutorial that guides the user through the dashboard's features.

Key Takeaways

This project provided valuable insights and reinforced key concepts:

Interactive Tutorial Integration: The project effectively integrates an interactive tutorial to enhance the user experience and guide them through the dashboard's features.
Bootstrap Integration: Bootstrap was used to create a responsive and well-organised layout.
Sequential Data Presentation: The dashboard effectively presented the data as a step-by-step narrative, guiding the user through the journey of my moves, and the tutorial.
Google Maps as a Timeline: Integrating Google Maps and using polylines to connect each move created a visual timeline of the journey, explained in the tutorial.
JavaScript for Interactive Onboarding: The JavaScript code was used to create an interactive tutorial, ensuring that users could easily understand and explore the data.
Data Storytelling: The combination of d3.js charts and Google Maps, along with the tutorial, created a compelling narrative of a nomadic lifestyle.

Conclusion

"Nomadic Numbers" was a testament to the power of data visualisation and interactive tutorials to tell personal stories, and the use of Bootstrap to help with layout and responsiveness.