Stylized Bar Chart

100%

Stylized Bar Chart

✓ Published0🌍 Public

Last edited May 31, 2020

Created on May 31, 2020

This stylized bar chart displays COVID-19 case counts across Indian states and union territories, using a horizontal layout where each bar’s length represents confirmed cases. The visualization uses React for component structure and d3.scaleLinear for mapping data values to pixel positions, with d3.axisLeft and d3.axisBottom rendering the axes. The bars are styled with a teal fill, and the chart includes an axis label for the case count. Data comes from a CSV file with columns for state, cured, deaths, and confirmed cases, which is parsed and sorted before being passed to the React rendering logic.

AI-generated description

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays COVID-19 active case counts for different countries, with values shown in thousands. The visualization uses React hooks to load and manage CSV data from a GitHub gist, while D3 v5 APIs handle the rendering. It employs `scaleBand` for the categorical y-axis representing countries and `scaleLinear` for the numeric x-axis showing case counts. The SVG output includes red rectangular bars and custom axes, with gridlines and tick labels formatted using D3’s axis utilities.

Mmanojgne

81% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the number of cervix uteri cancer patients across different states and union territories in India. The visualization uses a horizontal bar layout with a clean, Poppins-font aesthetic and a single red accent color. It loads CSV data through D3’s `csv` utility, scales the bars with `scaleLinear` and `scaleBand`, and renders the chart as SVG elements in React. The React components build the axes and marks, while D3’s `format` function displays large numbers in a compact notation.

Yyastika

81% match

Loading thumbnail…

Corona Virus Status

This visualization uses a stacked area chart to display the daily confirmed, recovered, and death case counts from the COVID-19 pandemic in India over a specific time period. Built with D3 v5 and React, the chart’s SVG rendering maps dates to the x-axis and case counts to the y-axis. The code processes `covid.json` data and uses D3’s `stack`, `area`, `curveBasis`, and `areaLabel` APIs to construct and label the stacked areas, with a color scale from `d3.schemeDark2`.

0007ebey

81% match

Loading thumbnail…

covid-19 bar chart

This bar chart displays total COVID-19 case counts for different countries, with bars colored using a categorical palette and labeled with case numbers. It shows tooltips on hover containing country and total case information. The visualization uses D3 v7 to build the SVG, employing `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for bar colors. The underlying data is embedded directly in the source code.

HHarinathChakali33@gmail.com

81% match

Loading thumbnail…

bar graph

This bar graph displays the total number of COVID-19 cases for twelve countries, ranked along a horizontal axis with country names on the vertical axis. The chart uses the D3 library (v6) with an SVG rendering approach in a React framework. It employs `scaleLinear` and `scaleBand` for the scales, `axisBottom` and `axisLeft` for the axes, and loads data from a CSV file. The bars are colored pink via CSS.

Rrajan1508

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

80% match

Loading thumbnail…

Corona Virus Status

This visualization displays the progression of confirmed, recovered, and death cases from COVID-19 in India over time, using a stacked area chart built with React and D3 v5. The data is fetched live from the COVID19 API for each status category and processed into a stacked layout using `d3.stack()`. The chart uses `scaleTime` and `scaleLinear` for axes, with SVG rendering and zoom functionality, though the primary visualization focuses on the temporal trends of case counts.

0007ebey

80% match