Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js - Visualization of the GitHub Search API data

Public visualization

Viewing a saved revision (read-only)

30bdc2c04dc34808880a1878acc4e24c

D3.js - Visualization of the GitHub Search API data

0 stars0🌍 Public
AAxVa 🐍 💪
Last edited Nov 23, 2024
Created on Nov 21, 2024

This visualization displays the 20 most popular JavaScript repositories from the GitHub Search API as an interactive bar chart. D3.js v7 fetches repository data and renders SVG bars colored by license type, with axes scaled by star count and a legend showing license colors. Users can click legend items to filter bars by hiding or showing specific licenses, with transitions animating axis and bar updates. The example dynamically adjusts the chart height to accommodate rotated tick labels and displays repository details in a sidebar when hovered.

AI-generated description

This is a nice demonstration of how you can interactively visualize data using JavaScript and D3.js in a web browser. The data is fetched via the GitHub Search API and represents the 20 most popular JavaScript repositories currently available on GitHub.

This example is based on the book "JavaScript Crash Course: A Hands-On, Project-Based Introduction to Programming" by Nick Morgan, No Starch Press, 2024.

Visit also my repo https://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.