Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

Bar chart with D3.js

A bar chart displays the relative popularity of programming languages using percentage values from Stack Overflow's 2019 survey. The implementation uses D3 v5 with SVG rendering, constructing linear and band scales to position bars and axes while appending value labels to each bar. Hovering over a bar highlights it, dims other labels, and draws a dashed reference line that computes and displays the percentage divergence between the selected language and all others.

UUsama Khalid

95% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the popularity of programming languages using data from Stack Overflow’s 2019 survey. Hovering over a bar highlights it and displays the percentage difference between the hovered language’s value and every other language’s value, with a dashed reference line marking the selected baseline. The visualization uses D3.js v5 with SVG rendering, employing `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for gridlines and ticks. Interactive transitions via `d3.transition()` animate opacity changes on mouseenter and mouseleave events.

ZZakaria

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

92% match

Loading thumbnail…

Bar chart with D3.js

This visualization presents a bar chart of the most loved programming languages in 2018, using data from a Stack Overflow survey. It shows the percentage of developers who love each language, with bars colored per language. Built with D3 v5, the chart uses `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles. Hovering a bar triggers a transition that highlights it, draws a reference line at the hovered value, and displays divergence percentages for all other bars, using D3 selections and `transition.attr`.

KKELVIN WAMBUA NZIOKI

91% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the most loved programming languages from the 2018 Stack Overflow survey. It uses D3.js v5 with SVG rendering to display the percentage values for each language. The chart includes horizontal grid lines and value labels. Interactive animations occur on mouseenter, which highlights the selected bar, draws a dashed limit line, and displays divergence percentages showing how other languages compare to the selected one. The text labels, axes, and title are all implemented using D3’s scale and axis APIs.

NNaimisha-M

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

91% match