Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published1🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

This bar chart visualizes COVID-19 infection counts across cantons in San José, Costa Rica, with San José leading at 145 cases. Built with D3 v5 and SVG, the chart uses `d3.scaleBand` and `d3.scaleLinear` for axes and rendering animated bars from CSV data. Hovering a bar triggers a `mouseenter` event that draws a dashed guide line and displays divergence values relative to the hovered canton, while fading other labels. Gridlines, axis titles, and descriptive text clarify the data, though no tooltip or transition effects are present beyond opacity changes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ADRIANLEAD: Covid San José

The visualization displays COVID-19 infection counts across cantons in San José, Costa Rica, as a bar chart. It emphasizes which areas are most affected to encourage preventive behavior. Rendered as SVG with animation, the chart uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom for tick marks. On mouseenter, hovering triggers transitions and appends a dashed guideline via chart.append('line'), while text elements show value divergences; mouseleave removes these elements and restores opacity.

AAdrianlead

90% match

Loading thumbnail…

Bar chart with D3.js

This interactive bar chart displays crime statistics across Costa Rican cantons, breaking down reported incidents by victim type and offense category. Built with D3.js v5, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to position SVG rectangles, with data loaded from a CSV file via `d3.csv`. Hovering over a bar triggers `mouseenter` and `mouseleave` events that fade other bars, draw a dashed threshold line via `chart.append('line')`, and temporarily display percentage divergence labels for comparison.

Eest85

83% match

Loading thumbnail…

Cantones por Población

A horizontal bar chart displays the population of Costa Rica's cantons, sorted by name. The visualization uses D3 v5's scaleBand and axisLeft to position and label each canton, while a linear scale maps population values to bar widths. The data is loaded from a CSV file, and the SVG rendering includes grid lines via tickSize and a titled axis.

KKennethSF

77% match

Loading thumbnail…

Making bar chart

A horizontal bar chart displays COVID-19 case counts per country, with bars ordered by the data’s CSV order. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisLeft`/`axisBottom` for gridlines. Data is loaded via `d3.csv` and rendered as SVG rectangles with a steelblue fill, while a clickable “Hello” button triggers a browser alert.

Llori99-data

77% match

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the total number of COVID-19 infections per country using a simple bar chart. It loads data from a CSV file containing country names and case counts, then displays the values as vertical bars on an SVG canvas. The chart is built with D3.js version 5, using the `d3.select` and `d3.csv` APIs to fetch and parse the data, while the SVG element is sized directly from its width and height attributes. The bars represent the relative infection totals, with the US showing the largest value.

Jjorgebotas

76% match

Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83

76% match

Loading thumbnail…

Covid-19 Data Visualization

This visualization displays total COVID-19 case counts for fourteen countries using a bar chart. Each bar’s height and value labels are mapped through d3.scaleBand and d3.scaleLinear, while d3.axisBottom and d3.axisLeft render the axes. Tooltips appear via mouseover events, and the SVG rendering includes a title and case number annotations. The data is embedded in the code as a static array, with cases formatted using the toLocaleString method.

AAbdul Kareem

76% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

SSamanvitha1

75% match