Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Bar Chat

✓ Published0🌍 Public
NNarayana Reddy
Last edited Apr 21, 2021
Created on Apr 21, 2021

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`.

AI-generated description

An interactive bar chart, inspired from a D3 tutorial at RisingStack.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
92% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
92% match
Loading thumbnail…

Fork of Fork of Bar chart with D3.js

A static bar chart visualizes survey data on language proficiency across ten languages, with values represented as percentages. Built with D3.js v5 and rendered as SVG, the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Interactive mouse events trigger transitions that highlight a selected bar, display divergence labels relative to the hovered value, and draw a dashed threshold line using `d3.select` and `.transition()`. The visualization is styled with an Open Sans font and a dark blue background, with grid lines generated via `d3.axisLeft` and `.tickSize`.

NNaimisha-M
87% match
Loading thumbnail…

Fork of Bar chart with D3.js

This bar chart visualizes the popularity of programming languages from Stack Overflow's 2019 survey, with each bar labeled by percentage. Using D3.js v5, the SVG chart includes axes, gridlines, and a hover interaction: hovering a bar dims other values and displays the percentage difference relative to the selected bar via dynamically added text labels and a horizontal guide line. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, and `transition` for animation.

Kkaruppuraja
87% match
Loading thumbnail…

Interactive Bar Chat

An interactive bar chart displays the 2018 Stack Overflow popularity ratings for ten programming languages, with each bar labeled by its percentage value. Hovering over a bar highlights it, increases its width, draws a dashed threshold line at that language's value, and reveals each bar's percentage difference relative to the highlighted language. The visualization is built with D3 v5, using `scaleBand` and `scaleLinear` for axes, SVG rects for bars, and transitions triggered by mouseenter and mouseleave events. Data comes from a local `data.js` file, with styling handled by an external stylesheet.

WWarren-Fitzhenry
87% match
Loading thumbnail…

Fork of Bar chart with D3.js

A fork of a D3.js bar chart displays the most-loved programming languages from the Stack Overflow 2018 survey, showing each language's "love meter" percentage. Built with d3.v5, the SVG chart uses d3.scaleBand and d3.scaleLinear for axes and bars with horizontal grid lines, while mouseenter and mouseleave events trigger transitions that highlight bars and compute divergence values against a reference language. The chart includes labeled axes, a title, and color-coded bars based on survey data.

NNaimisha-M
86% 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
86% 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
86% match