Skip to main content
SimilarExport ZIP
100%

D3.js - Visualization of the GitHub Search API data

✓ Published0🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Cool graphics

This visualization gallery displays multiple D3.js v7 charts analyzing GitHub contributor data and crime statistics. The main visualization is a network graph showing author-repository collaboration patterns, with nodes positioned around a decorative Buddha path and animated meditation circles using SVG. The interconnected charts include bar charts for commit counts by author and repository, a stacked bar chart for missing children demographics, and various crime rate visualizations. The implementation uses D3's zoom behavior for panning/zooming, tooltips for hover details, and scaleOrdinal for color encoding across different datasets.

NNita
76% match
Loading thumbnail…

Fork of WIP D3 Git History Viz

This visualization shows monthly commit activity across D3.js repositories as a stacked area chart, with each repository represented as a colored layer that reveals how contribution patterns shift over time. The code aggregates raw commit data by month and repository using D3’s `timeParse`, `group`, and `stack` functions, then renders the result as SVG paths generated by `d3.area` and scaled with `scaleTime` and `scaleLinear`. Axes are drawn with `axisBottom`, `axisLeft`, and grid lines, while data loads from a GitHub Gist URL containing all D3 commits.

NNita
73% match
Loading thumbnail…

Github API Visualisation

This bar chart visualizes mutual following counts among GitHub users, ranking each contributor by the number of mutual connections they share. The data is loaded from a CSV file, with counts parsed as numbers and rendered as horizontal bars. Using D3 v5, the visualization employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for tick marks. The SVG output styles bars in steelblue, with axes and labels generated programmatically from the data.

Ddabreadman (YI XIANG TAN)
73% match
Loading thumbnail…

bar chart with D3.js

This bar chart visualizes the popularity of programming languages using value data from a CSV file. Built with React and D3.js v4, it renders bars as SVG rectangles with colored fills and axis labels. The example includes interactive controls—a column selector and a bin count input—that allow users to explore data aggregation. The visualization uses D3 scales for axes and a color mapping from the dataset, with a dark blue container background for contrast.

AAbhishek Kumar
73% match
Loading thumbnail…

Fork of WIP D3 Git History Viz

This interactive visualization displays the commit history of the D3.js repository over time, revealing patterns of development activity across various sub-repositories. The chart aggregates commits by month and repository, then renders them as a stacked area chart filled with randomly assigned colors. The code utilizes D3's `group`, `stack`, `scaleTime`, `scaleLinear`, and `area` APIs to process and visualize JSON data fetched from a GitHub Gist. The React framework is declared in the package metadata, though rendering is performed directly via SVG manipulation using D3's `select` and `append` methods.

CCurran Kelleher
73% match
Loading thumbnail…

Fork of Bar chart with D3.js

A forked bar chart displays the popularity percentages of ten programming languages from Stack Overflow's 2019 survey. Using D3.js v5 with SVG, the chart renders horizontal gridlines, axes, and value labels. On mouseenter, a dashed reference line appears and text labels show the percentage divergence between the hovered bar and every other bar. The code applies d3.scaleBand and d3.scaleLinear with d3.axisLeft and d3.axisBottom, plus transitions for opacity changes.

Aall-over-yet
73% match
Loading thumbnail…

Fork of Interactive Bar Chat

This interactive bar chart displays survey data on programming language popularity, with each language ranked by its percentage value. Built with D3 v5, the visualization renders as an SVG graphic, using `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis. Bars are colored per data entry, and value labels appear above each bar. The chart includes gridlines created via `axisLeft`, with a dark background from the container styling, and is accompanied by axes rendered through `axisBottom`. The data comes from a static JSON array parsed in `data.js`.

NNarayana Reddy
72% match
Loading thumbnail…

Fork of Fork of WIP D3 Git History Viz

This visualization shows the commit history of D3.js as a stacked area chart, with each repository represented by a colored band that reveals commit volume over time. The code loads JSON data from a remote gist, aggregates commits by month and repository using D3’s `group` and `stack` functions, and renders the result as SVG paths via `d3.area`, `scaleTime`, and `scaleLinear`. Colors are assigned randomly per band, and the chart fills the browser window with no margins, using `extent` and `max` to determine scales.

DDaniel Nass
72% match