Skip to main content
SimilarExport ZIP
100%

RamyaPutta

✓ Published0🌍 Public
RRamyapriyaPutta
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from dataset

This example visualizes sales data for 10 U.S. states using a horizontal bar chart rendered as SVG. It loads a CSV file from a GitHub gist, uses `d3.csv` for data parsing and `scaleBand`/`scaleLinear` for positioning. React manages the component state and lifecycle, while D3’s `max` and `format` handle numeric scaling. The chart includes gridlines and axis labels built with custom SVG elements, with bars colored blue by default. The data updates asynchronously, showing a loading message until the CSV is fetched and processed.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

RamyaPutta

This example displays the population of ten countries in 2019 using a horizontal bar chart rendered as SVG. It fetches CSV data via `d3.csv` and uses React hooks (`useState`, `useEffect`) to load and manage the dataset. The chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom tick rendering with grid lines and labels. Bars are drawn as green `<rect>` elements, with axes manually created using D3’s scale functions rather than `axisLeft` or `axisBottom`.

RRamyapriyaPutta
87% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a bar chart of population data for U.S. states and territories using React for DOM manipulation and D3 for scales. It loads a CSV file via `d3.csv`, then maps each row to an SVG `<rect>` whose vertical position and height come from `d3.scaleBand`, while the width uses `d3.scaleLinear`. The visualization demonstrates a hybrid approach where React handles component lifecycle and state, while D3 provides the data parsing and scaling utilities.

Rrammy81
79% match
Loading thumbnail…

Santhosh Dachepally

This horizontal bar chart displays the top ten countries by sales from a CSV dataset loaded via D3’s `csv` function. The React app renders an SVG with D3’s `scaleBand` for country categories and `scaleLinear` for sales values, drawing green rectangles for each bar. Tick marks and labels are generated using D3’s scale methods, with the chart centered in the viewport. The code uses React hooks (`useState`, `useEffect`) to fetch and process the data, and ReactDOM to mount the visualization.

Ssanthoshdachepally333@gmail.com
78% match
Loading thumbnail…

raorakshi

This visualization displays a horizontal bar chart of the top 10 most populous countries, using sales data loaded from a remote CSV file. The React component uses d3’s `scaleBand` and `scaleLinear` to map company names to the y-axis and sales values to bar widths, while d3’s `axisBottom` and `axisLeft` are imported for reference. Bars are rendered as SVG rectangles inside an SVG canvas, with axis tick labels generated via d3’s `.ticks()` method. The chart includes grid lines and uses a light gray background with darker gray bars, all styled in a clean, minimal layout.

RRakshithaRao27
78% match
Loading thumbnail…

React & D3 CSV

This example shows a horizontal bar chart of population data for ten countries, with country names on the y-axis and a linear population scale on the x-axis. Built with React and D3 v7, it loads CSV data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` and `d3.scaleBand`. The custom `AxisBottom` component generates tick marks and labels using `xScale.ticks()`, while React hooks manage data loading and state.

MMuhammad Talha
77% match
Loading thumbnail…

SVG

This example visualizes monthly sales data as a bar chart, with bars colored dark gray or red depending on whether sales exceed 20. It loads data from a local `sales.json` file and renders both bars and labels using SVG. The chart includes a linear y-axis for sales and a band-scaled x-axis for months, both created with `d3.scaleLinear` and `d3.scaleBand`, and formatted via `d3.axisLeft` and `d3.axisBottom`. The code is written for D3 v5 within a React-ready HTML page.

Jjarvis
77% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
77% match
Loading thumbnail…

Data visualization ICE-6: Rendering Marks and Channels with React & D3

This example displays the top 10 most populated US states as a horizontal bar chart rendered in SVG. It uses React 16.9 and D3 v5, combining state management via React hooks with D3’s `scaleBand`, `scaleLinear`, and `max` for data mapping. The chart reads a CSV dataset through `d3.csv`, then renders rectangles and axis tick text using JSX. The visualization highlights bar lengths proportional to population, with a blue gridline and custom styling from the embedded CSS.

Cchakritha06
77% match