Stylized Bar Chart

100%

Stylized Bar Chart

✓ Published1🌍 Public

Last edited Jun 1, 2021

Created on May 31, 2021

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.

AI-generated description

A program that loads in some data about css named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart with react and D3

This bar chart displays the number of patients across different states and union territories in 2016, sourced from a CSV file about cervix uteri cancer. The visualization uses D3’s `csv` utility for data loading and `scaleBand` and `scaleLinear` to map the state names and patient counts to SVG rectangles. React handles the rendering, with a `useEffect` hook to fetch data asynchronously and a state variable to trigger the chart’s display once the data arrives.

Yyastika

91% match

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the number of cancer patients for ten Indian states and union territories in 2016, using the `csv` loader from D3 v6 to fetch the dataset. The React app renders SVG bars with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The bar widths encode patient counts, and the chart is static with no interactivity.

Yyastika

86% match

Loading thumbnail…

Cancer Paitents

This visualization displays cancer patient numbers across Indian states and union territories for the year 2016, using a bar chart rendered with SVG. The React component loads data from a CSV file via `d3.csv` and maps each state to a rectangle using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The chart is built with D3 v6 and React 17, with bars positioned starting from the left edge of the SVG canvas.

Yyastika

85% match

Loading thumbnail…

Stylized Bar Chart

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.

Ssaikrupa82

81% match

Loading thumbnail…

Axes with React and D3

A React application uses D3 utilities to load CSV data on cervix uteri cancer patient counts by Indian state, rendering a horizontal bar chart with custom SVG axes. D3's `csv` fetches and parses the data, while `scaleBand` and `scaleLinear` construct the y- and x-scales, and `max` and `ticks` generate tick values. React components map over the scales and data to draw axis lines, tick labels, and colored rectangles, with SVG transforms positioning the visualization within a fixed 960×500 viewport.

Yyastika

79% match

Loading thumbnail…

Bar chart Testing

This example displays a horizontal bar chart of Indian population data by year, using React to render SVG elements. D3’s `scaleLinear` maps population counts to bar widths, while `scaleBand` positions bars along the y-axis and `scaleOrdinal` assigns colors from `schemeDark2`. The code fetches CSV data via D3’s `csv` method, parses the first five entries, and draws axes with SVG lines and ticks. Both D3 v7 and React 18.2 are used, with the visualization mounted through `ReactDOM.createRoot`.

PPathan Khuvanejarkhan

76% match

Loading thumbnail…

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

This is an SVG bar chart that visualizes the top 16 cancer rates by state, ordered by population. The chart uses React with D3's `csv`, `scaleBand`, and `scaleLinear` to parse and scale the data. The bars are rendered as SVG `<rect>` elements within a `<g>` group. The horizontal axis uses D3's `axisBottom`-style ticks generated via `xScale.ticks()`. The data is loaded from a remote CSV file and displayed horizontally with state labels on the left.

SSaikiran2029

76% match

Loading thumbnail…

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

MmohitPassan

76% match