Skip to main content
SimilarExport ZIP
100%

Interactive Bar Chat

✓ Published0🌍 Public
Hhireign
Last edited Feb 14, 2020
Created on Feb 14, 2020

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.

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
100% 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
92% 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
88% match
Loading thumbnail…

Bar chart Interactive

This interactive bar chart displays the "love meter" percentages for various programming languages, allowing users to hover over a bar to see its value highlighted with a reference line and divergence labels. The visualization uses D3.js v5 within a React environment, rendering SVG elements with animation transitions. It employs `d3.scaleBand`, `d3.scaleLinear`, and axes for structured plotting, while mouse events trigger opacity changes, bar enlargement, and the temporary display of difference annotations. The data is embedded directly in the code, inspired by the Stack Overflow 2018 developer survey.

KKeerthipriyaBankuru
85% match
Loading thumbnail…

Bar chart with D3.js

This bar chart displays survey results on the most loved programming languages in 2018, with each bar representing the percentage of respondents who favor a particular field. The visualization uses d3.scaleBand and d3.scaleLinear to position bars and axes, with SVG rendering and hover interactions that highlight differences between values. Hovering over a bar triggers a transition that adjusts opacity and width, draws a dashed limit line, and displays divergence percentages between the selected value and others. The chart includes horizontal grid lines, axis labels, and a title, with data sourced from Stack Overflow and animated transitions powered by D3's transition system.

GGogineni44
85% match
Loading thumbnail…

Bar chart with D3.js

A bar chart displays the popularity of programming languages from Stack Overflow's 2019 survey, with values as percentages. Built with D3.js v5, the SVG visualization renders horizontal axes and animated bars, and includes hover interactions that highlight a selected bar, display a dashed reference line, and compute value divergences against other languages. The chart uses `d3.scaleLinear` and `d3.scaleBand` for axis scaling, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.selectAll` with transitions to manage mouseenter and mouseleave effects.

Eest85
85% match
Loading thumbnail…

Bar chart with D3.js

A bar chart displays the popularity percentages of programming languages from a Stack Overflow survey, with each bar labeled by its value. Built with D3.js v5, the SVG visualization uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for categorical x-axis placement, and `d3.axisLeft`/`d3.axisBottom` for ticks. Hovering triggers `transition`-based animations that highlight the current bar and display divergence percentages relative to other values.

Llimenzi
85% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the popularity of programming languages from a 2019 Stack Overflow survey, showing each language's percentage value above its corresponding bar. Built with D3.js v5, the SVG chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for categorical x-axis placement, and `d3.axisLeft`/`d3.axisBottom` to render axes with gridlines. Interactive mouseenter and mouseleave events trigger `transition` animations that highlight a bar and display divergence percentages for all other languages relative to the selected one.

Ssndcaldgafz
84% match