D3 Programming Languages

Live Demo

Overview

This project visualizes the popularity of programming languages over time using D3.js. It presents an animated line chart where each line represents a language, and the y-axis corresponds to usage or popularity scores from a public dataset.

Hovering on a language highlights it, shifts the languages it influenced to the right, and shifts those it was influenced by to the left — making relational trends visually intuitive. Clicking on a language reveals additional metadata: its paradigms, the year it was created, and its creator.

Users can also sort the data by year, name, or influence network to explore the timeline from different analytical angles.

What I Learned

  • Gained practical experience using D3 for data binding, scaling, and animation.
  • Learned to preprocess time-series data and tune transitions for better storytelling.
  • Balanced visual clarity with interactivity and accessibility.

What I’d Improve

  • Add filters to toggle language groups (e.g., compiled vs interpreted).
  • Add zoom/pan functionality for closer inspection.
  • Improve mobile layout and accessibility contrast.

Tech Stack

  • D3.js
  • JavaScript
  • Tailwind CSS (for layout)
  • CSV/JSON data parsing