Fork of Fork of Fork of HTML Starter

100%

Fork of Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

Forked from Fork of Fork of HTML Starter

This visualization compares the popularity trends of Python, JavaScript, and Java across 20 days using two side-by-side SVG charts. The top line chart maps each language's daily score with `d3.line` paths, while the bottom combined chart overlays Python bars (`d3.scaleBand`) with a JavaScript line (`d3.line`). Both include grid lines, axes, and legends built with D3 v7 APIs (`d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`). The synthetic dataset is embedded directly in the JavaScript code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This scatter plot shows the popularity scores of eight programming languages, distinguishing between high- and low-popularity categories with color-coded points. Using a point scale for the x-axis and a linear scale for the y-axis, it renders circles via D3 selections, with axes and rotated labels generated by `d3.axisBottom` and `d3.axisLeft`. Color mapping applies `d3.scaleOrdinal`, while a custom legend and SVG text labels annotate the chart against a dark themed background.

Aanjanipriyajillela@gmail.com

84% match

Loading thumbnail…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Ssahithya.voleti@gmail.com

80% 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

79% 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

78% match

Loading thumbnail…

Fork of Bar chart with D3.js new

This bar chart visualizes the popularity of ten programming languages using survey data from Stack Overflow, 2019. Each bar represents a language, with horizontal gridlines and a y-axis showing percentages. On hover, the chart highlights the selected bar, draws a dashed horizontal line at its value, and overlays white text on every bar showing the percentage divergence from the hovered language. Built with D3.js v5, the visualization uses d3.scaleBand for positioning, d3.scaleLinear for the y-axis, and d3.axisLeft/axisBottom for ticks.

RRashidi

77% match

Loading thumbnail…

Fork of Bar chart with D3.js

This bar chart displays the popularity of programming languages using Stack Overflow survey data from 2019, with percentages shown on both the y-axis and atop each bar. D3.js v5 (d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom) renders the chart as SVG elements. On mouseenter, the chart dims all values and draws a dashed reference line at the hovered bar’s height while displaying each bar’s percentage difference relative to that bar; mouseleave restores the original view. A grid drawn via d3.axisLeft with tickSize helps compare values.

KK V VINITHA

76% match

Loading thumbnail…

Fork of HTML Starter

This example presents a pie chart showing the popularity of programming languages based on user counts fetched from a remote CSV file. It uses the D3.js v6 library, specifically the `d3.pie()` and `d3.arc()` functions to compute and draw the pie slices as SVG paths, with `d3.scaleOrdinal` providing categorical colors. A legend is generated alongside the chart, and title labels are added via SVG text elements. The visualization is built within a React framework but renders directly to SVG in the browser, with data loaded using `d3.csv`.

Ssahithya.voleti@gmail.com

76% match

Loading thumbnail…

Fork of Fork of HTML Starter

An area chart visualizes the increase in marks over ten days using a semi-transparent blue filled region, an overlaid line, and circular data points. Built with D3 v7, the visualization employs `d3.scaleLinear` for both axes, `d3.area` and `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with data embedded directly in the HTML.

Aanjanipriyajillela@gmail.com

76% match