Making a Bar Chart

100%

Making a Bar Chart

✓ Published6🌍 Public

Last edited Nov 7, 2018

Created on Sep 3, 2018

This bar chart displays the top 10 technologies used by StackOverflow survey respondents in 2018, measured by percentage of users. It reads data from a CSV file and renders horizontal bars using an SVG. The code imports specific functions from d3—including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to construct the scales and axes, and appends rectangles for each bar. The chart’s styling is applied via a separate CSS file, which sets the bars to steelblue and adjusts text size.

AI-generated description

This bar chart shows the top 10 technologies used by StackOverflow survey respondents in 2018 by percentage 2018 Developer Survey Results.

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

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

78% match

Loading thumbnail…

Fork of Bar chart with D3.js

This bar chart visualizes the popularity of various programming languages based on 2019 Stack Overflow survey data. It uses D3.v5 to render an SVG bar chart with a dark background, where each bar’s height corresponds to a percentage value. The chart includes axes, gridlines, and a title. On mouse hover, it displays the difference between the hovered bar’s value and each other bar, using a dashed line and divergence labels. The visualization relies on `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`/`d3.axisBottom` for scaling and rendering.

VVamsiYandapalli

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

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

78% match

Loading thumbnail…

barchart

A bar chart displays the "most loved" programming languages from the 2018 Stack Overflow survey, ranking ten languages by percentage of developers who reported loving them. Animated interactions on mouse hover emphasize a selected bar, dim other value labels, draw a horizontal dashed line at that bar's y-value, and compute divergence percentages relative to the hovered language. The visualization uses D3 v5 with an SVG render, `d3.scaleBand` for categorical x-positions, and `d3.scaleLinear` for the y-axis. Grid lines are generated via `d3.axisLeft`, and changes in bar opacity, width, and position are handled with `transition().duration()`.

NNeeraj Kumar

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

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

77% match