100%

Fork of Fork of Bar chart with D3.js

✓ Published1🌍 Public

Last edited Jul 6, 2022

Created on Jul 6, 2022

Forked from Fork of Bar chart with D3.js

A static bar chart visualizes survey data on language proficiency across ten languages, with values represented as percentages. Built with D3.js v5 and rendered as SVG, the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Interactive mouse events trigger transitions that highlight a selected bar, display divergence labels relative to the hovered value, and draw a dashed threshold line using `d3.select` and `.transition()`. The visualization is styled with an Open Sans font and a dark blue background, with grid lines generated via `d3.axisLeft` and `.tickSize`.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar chart with D3.js

A fork of a D3.js bar chart displays the most-loved programming languages from the Stack Overflow 2018 survey, showing each language's "love meter" percentage. Built with d3.v5, the SVG chart uses d3.scaleBand and d3.scaleLinear for axes and bars with horizontal grid lines, while mouseenter and mouseleave events trigger transitions that highlight bars and compute divergence values against a reference language. The chart includes labeled axes, a title, and color-coded bars based on survey data.

NNaimisha-M

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

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

87% match

Loading thumbnail…

Fork of Bar chart with D3.js new

This bar chart visualizes the popularity of ten programming languages using survey data from Stack Overflow, 2019. Each bar represents a language, with horizontal gridlines and a y-axis showing percentages. On hover, the chart highlights the selected bar, draws a dashed horizontal line at its value, and overlays white text on every bar showing the percentage divergence from the hovered language. Built with D3.js v5, the visualization uses d3.scaleBand for positioning, d3.scaleLinear for the y-axis, and d3.axisLeft/axisBottom for ticks.

RRashidi

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

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

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

84% match

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

83% match