Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published1🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

95% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the most loved programming languages of 2018, using data from a Stack Overflow survey, with each language’s popularity percentage shown on a horizontal axis. Implemented with D3.js v5, it renders as an SVG with animated hover interactions: moving the mouse over a bar highlights it, draws a dashed threshold line, and displays the percentage difference between that language and all others. The chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, and applies transitions to bars and text on mouse events.

SSharanya1307

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

93% match

Loading thumbnail…

Bar chart with D3.js

This bar chart displays the most loved programming languages in 2018, based on Stack Overflow survey data, with each bar’s height representing the percentage of developers who reported loving that language. The visualization is rendered as an SVG with D3.js v6, using `d3.scaleBand` and `d3.scaleLinear` for the axes. Hovering over a bar triggers a transition that highlights the selected bar, increases its width, draws a dashed reference line at the hovered value, and displays percentage divergence labels for all other bars relative to the selected one. The chart includes grid lines, axis labels, a title, and a source attribution.

MMinwoo Pak

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

93% match