Stylized Bar Chart with Menus success

100%

Stylized Bar Chart with Menus success

✓ Published0🌍 Public

Last edited May 19, 2021

Created on May 19, 2021

Forked from Stylized Bar Chart with Menus

This interactive bar chart displays the top 20 hospitals by number of vacant COVID-19 beds, sourced from a CSV file of Covid Bed Status data. Users can switch the x-axis metric among three attributes—Total ICU Beds, Total COVID Beds, and Total COVID Vacant—via a dropdown menu. The visualization is rendered as an SVG using React components, with D3.js handling scales, axes, and data binding through functions like `scaleBand`, `scaleLinear`, and `csv`. Styled with the Poppins font, the chart updates reactively to the selected attribute.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar Chart with Menus

This example presents a stylized bar chart ranking the top 20 institutions by the number of vacant COVID beds, with interactive dropdown menus to switch between metrics such as total ICU beds, total COVID beds, and vacant COVID beds. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG bars that display tooltips on hover. The chart loads data from a CSV file via `d3.csv`, sorts it in descending order, and slices the top 20 entries. Styling employs the Poppins font and a custom color scheme for the marks and axes.

Vvigneswaran009

96% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 20 institutions with the highest number of vacant COVID beds, sorted in descending order and excluding zero values. The bar chart uses React with SVG rendering, leveraging d3-scale for band and linear scales, d3-format for tick label formatting, and d3.csv to load data from a GitHub Gist of UN World Population Prospects data. Tooltips display formatted values, while axes are built from custom React components.

Vvigneswaran009

86% match

Loading thumbnail…

Empty Covid beds - Salem

A bar chart displays the number of vacant COVID-19 beds across hospitals in Salem, India, using horizontal bars sorted in descending order. The chart shows only the top 20 institutions with non-zero vacant bed counts, with each bar labeled by hospital name and the x-axis representing the count in thousands. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and SVG elements for rendering. Data comes from a CSV sourced from the United Nations World Population Prospects 2019, though adapted for COVID bed counts.

Vvigneswaran009

81% match

Loading thumbnail…

ice-6

This horizontal bar chart compares the number of ICU available beds against confirmed COVID-19 patients for the top ten states. The visualization uses React hooks with D3 v5 scales, rendering SVG rectangles whose widths represent patient counts, with axis ticks and red gridlines positioned via scaleLinear and scaleBand. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv.

HHarishkumar1606

79% match

Loading thumbnail…

CSCE 5320 ICE-6

This example shows the relationship between hospitalized COVID suspected and confirmed patients across 15 counties, using a horizontal bar chart rendered as SVG. Each bar’s length encodes the count of hospitalized suspected patients per county, with axes and tick labels generated manually. The code uses React for component state and lifecycle, alongside D3 v5 functions including `csv`, `scaleBand`, `scaleLinear`, and `max`. Data is loaded from a GitHub gist URL and sliced to the first 15 rows, with bars drawn using SVG `<rect>` elements and red gridlines.

DDineshK2602

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

77% match

Loading thumbnail…

ice-6

This visualization displays the number of hospitalized confirmed COVID-19 patients for each county, using a horizontal bar chart with an orange grid. Built with React and D3 v5, it loads CSV data via `d3.csv`, filters to the top 20 counties, and renders SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Tick labels and grid lines are generated from `xScale.ticks()`. The chart updates dynamically when the data loads, showing the title in magenta above the plot.

DDineshK2602

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

77% match