Skip to main content
SimilarExport ZIP
100%

Cancer Paitents

✓ Published0🌍 Public
Yyastika
Last edited May 26, 2021
Created on May 26, 2021
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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
89% match
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
86% 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
85% 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
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
78% match
Loading thumbnail…

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

This interactive bar chart displays the top 10 most populous countries using a dataset of cancer statistics, though the code loads 53 rows. The visualization is built with React and D3 v5, using D3's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The rendering leverages React's declarative components to generate SVG elements, with axes and tick marks created through D3's `ticks()` method. Data is loaded asynchronously via D3's `csv()` function from a GitHub gist URL.

BBajiSharifPatan@my.unt.edu
76% match
Loading thumbnail…

Breast Cancer Data Bar Chart

This bar chart visualizes breast cancer data, comparing two numeric attributes—perimeter_mean on the x-axis and radius_mean on the y-axis—across individual records. The chart uses D3 v7 to fetch a CSV dataset from a GitHub repository, then renders horizontal bars via SVG rectangles. Scales are created with d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, while d3.axisBottom and d3.axisLeft generate the corresponding tick marks and labels. The code includes React components for reusable axes and marks, though the primary implementation in index.html directly manipulates the SVG.

HHemanthh81
76% 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