Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
CCaleb Miller
Last edited Jul 29, 2019
Created on Jul 19, 2019
Forked from Making a Bar Chart

This bar chart displays the usage share of the top 23 programming languages, based on July 2019 data from PYPL, with shares scaled to represent votes out of 1000. The code uses D3 v5’s `scaleLinear` for the horizontal value axis and `scaleBand` for the vertical categorical axis, rendering bars as SVG rectangles. It loads data from `data.csv` via `d3.csv`, converts the share values to numeric, and appends axes with `axisLeft` and `axisBottom`. The chart emphasizes a straightforward, readable comparison of language popularity.

AI-generated description

This bar chart shows population of the usage share of the top 23 programming languages out of 1000 voters. The data comes from the July 2019 estimate in PYPL PopularitY of Programming Languages.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart displays the usage share of the top 23 programming languages, based on July 2019 data from PYPL, with shares scaled to represent votes out of 1000. The code uses D3 v5’s `scaleLinear` for the horizontal value axis and `scaleBand` for the vertical categorical axis, rendering bars as SVG rectangles. It loads data from `data.csv` via `d3.csv`, converts the share values to numeric, and appends axes with `axisLeft` and `axisBottom`. The chart emphasizes a straightforward, readable comparison of language popularity.

CCaleb Miller
100% match
Loading thumbnail…

Bar chart with D3.js

This bar chart displays the popularity percentages of programming languages, showing the distribution of values across categorical labels. Built with D3 v5, the visualization renders SVG bars with axes, gridlines, and value labels. Hovering over a bar triggers a mouseenter event that highlights the selected bar, draws a dashed reference line, and displays divergence percentages for all other bars relative to the hovered one. The mouseleave event removes these annotations, restoring the original view. Data is loaded from a CSV file using d3.csv.

Eest85
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
84% 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
83% 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
83% 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
82% 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
81% match
Loading thumbnail…

Bar chart with D3.js

A bar chart ranks the "most loved" programming languages by percentage, from Rust at the top to Clojure at the bottom. Built with D3.js v5, it uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. On mouse hover, the chart highlights the selected bar, draws a dashed threshold line with `line#limit`, and displays the percentage divergence of every other language from the hovered one. A dataset of ten languages is hardcoded in the JavaScript.

GGogineni44
81% match