Skip to main content
SimilarExport ZIP
100%

Horizontal Bar Chart

✓ Published0🌍 Public
Llinlinlin-yx
Last edited Dec 15, 2022
Created on Dec 15, 2022
Forked from HTML Starter

This horizontal bar chart displays vaccination rates across five New York City boroughs, with radio buttons allowing viewers to switch between eight monthly time points from 2021 to 2022. The visualization uses D3 v7 scales and axes to map percentage values from 0 to 100 on the x-axis, with color-coded bars representing each borough. Interactivity is implemented through click event listeners that rebind bar width and label data based on the selected month. The SVG rendering includes background rectangles, axis groups, and text labels showing exact percentages.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This animated scatter plot compares COVID-19 vaccination rates (blue) against reported case counts (gray) in the US, using dual y-axes with proportional data drawn from CDC vaccination counts and NYT 7-day average case data. Built with D3 v5, the chart uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `transition` to animate points as they grow and reposition over time. Interactive dropdown menus, implemented via a reusable `menu` component, allow switching between partial and fully vaccinated metrics, while annotations highlight key dates and case reduction percentages.

Xxiaojingwu138
79% match
Loading thumbnail…

Interactive COVID-19 Dashboard Bar and Map

This interactive dashboard visualizes COVID-19 vaccination data across U.S. states, combining a bar chart of daily doses for a selected state with a map showing vaccination rates nationwide. Users brush the bar chart to choose a date, and the map updates to display doughnut charts at state centroids, with arcs indicating the percentage of residents fully vaccinated and doses used. The visualization uses React, D3 v6 (including `d3.forceSimulation`, `d3.geoPath`, `d3.brushX`, and `d3.scaleSqrt`), and SVG rendering. Data comes from US Vaccination Data by State/Territory, with map shapes from the us-atlas TopoJSON.

PPeter VanNostrand
76% match
Loading thumbnail…

Horizontal grouped bar chart

This horizontal grouped bar chart displays the percentage prevalence of a health-related indicator across demographic subgroups, including gender, education level, wealth quintile, and urban/rural residence. The visualization uses a single series of horizontal bars, with subgroup names on the y-axis and percentage values on the x-axis. Built with React and D3 v6, the chart leverages `scaleLinear` and `scaleBand` to map data values and categories, renders bars and value labels as SVG elements, and includes a custom tooltip that appears on mouseover. Bars are styled with varying opacity to distinguish key subgroups from secondary categories.

AAnimesh Nautiyal
76% match
Loading thumbnail…

Untitled

This interactive bar chart displays bias-motivated incidents in NYC for 2020 and 2021, with buttons toggling between the two years. The visualization uses D3.js v7 within an HTML page, rendering as an SVG. It fetches CSV data from a GitHub repository and animates bar height, position, and axis transitions over one-second durations using D3’s scaleBand, scaleLinear, and transition methods. The chart highlights changes in incident counts across bias categories.

RRona Xu
76% match
Loading thumbnail…

123

This dashboard visualizes COVID-19 vaccination data across US states, combining a choropleth-style map with an interactive bar chart. The map uses `d3.geoAlbersUsa` projections and `d3.geoPath` to render state boundaries, with circle sizes scaled by vaccination rates via `d3.forceSimulation` and `forceCollide` to prevent overlap. The lower bar chart displays daily doses for a selected state, using `d3.brushX` to let users select a date range. Data comes from a US vaccination dataset via CSV, with React managing state for dropdown selections and map updates.

Nniuyizhan
76% match
Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

Wwaqaschughtai
74% match
Loading thumbnail…

ICE-6

This example visualizes COVID-19 vaccination rates across U.S. states as of February 28, 2022, using a horizontal bar chart. The code employs React for component state and rendering, with D3 v5’s `csv` to load data, `scaleBand` for categorical y-positions, and `scaleLinear` for the x-axis. SVG rectangles represent each state’s fully vaccinated population, while axis ticks are generated manually using `xScale.ticks()` and styled with blue gridlines. The visualization updates reactively from the fetched dataset.

SSanchay
74% match
Loading thumbnail…

Barchart experiment

This bar chart displays counts of deaths per month in New York DOCCS custody across 2020, with interactive mouseover details listing individual names and dates from the raw dataset. The React-based visualization renders SVG bars using d3.scaleBand and d3.scaleLinear, featuring a button that toggles a red dashed mean line with confidence-interval lines computed via d3.mean and d3.deviation. A second button triggers animated transitions through d3 transitions in `change_data`, briefly shifting all bars to the mean height before restoring original values over 2 seconds.

XXiaoyu Su
74% match