Skip to main content
SimilarExport ZIP
100%

Customized bar chart

✓ Published1🌍 Public
Rrsulli4
Last edited Apr 30, 2023
Created on Apr 29, 2023
Forked from Stylized bar chart

This example presents a customized bar chart of COVID-19 case counts by U.S. jurisdiction, using data from August 2020. It displays the top ten locations ordered along the vertical axis, with horizontal bar lengths encoding total cases. The visualization is built with React and D3 v5, leveraging `scaleBand` for categorical positioning, `scaleLinear` for quantitative scaling, and `csv` for data loading. SVG rendering produces the bars, axes, and tick labels, with D3’s `format` function abbreviating large numbers (e.g., converting billions to “B”).

AI-generated description

a program that loads in some CDC covid19 case data from August 2020 using d3 utilities and uses React to render the data in a bar chart.

MIT Licensed

Similar vizzes

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
84% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on recent COVID-19 case counts, with countries on the y-axis and today’s new cases on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart with custom tick formatting. Data is loaded asynchronously from a remote API via `d3.json`, and each bar’s length is scaled to the maximum case value. The chart includes axis labels and a title, with axes customized to remove domain lines.

Aaayushina
83% match
Loading thumbnail…

Untitled

This example presents a bar chart of total COVID-19 cases by location, using data from a remote CSV file. The chart uses an SVG rendering with a band scale for the categorical x-axis and a linear scale for the numeric y-axis, both configured with d3.scaleBand and d3.scaleLinear. Bars are drawn as SVG rect elements with a fixed fill color, and the x-axis labels are rotated for readability. The code loads data via d3.csv and applies margins to position the visualization.

Fferneyhoughedward@gmail.com
83% match
Loading thumbnail…

Stylized Bar Chart

This interactive visualization displays the cumulative count of cases over time as a horizontal bar chart, showing daily recorded values from March to April 2020. The chart uses React to render SVG elements, with d3.scaleBand for the categorical date axis and d3.scaleLinear for the value axis. Each bar includes a tooltip via SVG title elements, while axes are constructed using d3's tick generation through custom React components. The data comes from a local CSV file, parsed with d3.csv, and styled with a custom Poppins font.

PProger666
83% 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
83% match
Loading thumbnail…

Customizing Axes

This bar chart displays COVID-19 infection rates per 100,000 people for the most affected U.S. counties, with values sourced from Statista (2020). It shows how cases are distributed among ten counties, using a custom-formatted x-axis that abbreviates large numbers with a capital "K". The visualization uses d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft/d3.axisBottom for custom tick marks and labels. The code removes default axis lines, adds custom tick styling with d3.format, and annotates the chart with a title and axis label. Bars are rendered as SVG rectangles with a blue fill.

Mmla341
83% 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
83% 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
83% match