Skip to main content
SimilarExport ZIP
100%

Fork of Rendering Marks and Channels

✓ Published0🌍 Public
IIndhuKrishnaraj
Last edited Mar 13, 2023
Created on Mar 13, 2023

This visualization displays the average customer ratings for the top 15 product lines in a supermarket sales dataset, using horizontal bars ranked by rating. Each bar’s length encodes the rating value, while product-line names appear on the y-axis. Built with React and D3 v5, the example uses `d3.csv` to load the data, `scaleBand` and `scaleLinear` for axes, and renders SVG rectangles. Red gridlines and tick labels come from manually generated D3 scales, with margins and dimensions configured explicitly in the code.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Rendering Marks and Channels

This example visualizes supermarket sales data by rendering a horizontal bar chart of product lines against their average ratings. The visualization uses React with D3 v5, loading data from a CSV file via d3.csv. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and SVG rectangles as marks. The code renders axes manually with tick marks and gridlines, with margins configured to accommodate the long product line labels.

IIndhuKrishnaraj
91% match
Loading thumbnail…

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

This bar chart displays supermarket sales data, showing the unit price for different product lines. Built with React and D3 v5, it renders as an SVG with vertical grid lines and horizontal bars. The visualization uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and loads data from a CSV file via `d3.csv`. React’s state management handles the asynchronous data loading and updates the chart accordingly.

SSreejaBellamkonda
83% match
Loading thumbnail…

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

This visualization displays the top 10 soap products as a horizontal bar chart, with bar lengths encoding product population values from a CSV dataset. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and renders SVG rectangles directly through React components. The chart includes custom grid lines and axis tick labels generated from `xScale.ticks()`, with data loaded asynchronously via `d3.csv`.

Sspandhanabadekol
81% match
Loading thumbnail…

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

This visualization shows the number of units or items purchased by each of the top ten sales representatives from a CSV dataset loaded via `d3.csv`. It renders a horizontal bar chart using SVG where bar lengths encode the numeric "Units" values and the vertical axis lists the "Rep" names. Built with React and D3 v5, the app uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.max` to determine the scale domain, while React manages the state and re-renders the SVG marks.

VVaishnavi6199
80% match
Loading thumbnail…

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

A horizontal bar chart displays revenue per month for twelve products from a supermarket dataset, loaded via `d3.csv` from a GitHub Gist. React state and hooks manage the asynchronous data loading, while D3’s `scaleBand` and `scaleLinear` map product categories and revenue values to SVG rectangles. Axes and gridlines are manually rendered with D3’s `ticks` and positioned using SVG transforms, with React generating the markup for each element.

Ddivyakota99
80% match
Loading thumbnail…

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

This chart shows the number of units purchased by each of ten sales representatives as horizontal bars labeled with the representative’s name. The visualization uses React components to render an SVG scene, with D3’s `scaleBand` and `scaleLinear` mapping the categorical and quantitative data to pixel positions. Axis ticks and grid lines are generated manually from D3’s `xScale.ticks()` and `yScale.domain()`, while the data is loaded from a CSV file via `d3.csv`. The example demonstrates integrating React’s state management with D3’s scaling and layout utilities for declarative SVG rendering.

VVaishnavi6199
79% match
Loading thumbnail…

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

This bar chart displays sales data for the top 11 best-selling books, sourced from a CSV file. The visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering marks as SVG rectangles within a React `<svg>` element. The code imports specific D3 functions like `select`, `csv`, and `scaleLinear`, and employs React's `useState` and `useEffect` hooks to load and process the data before rendering.

RRohith arabati
79% match
Loading thumbnail…

Rendering Marks and Channels with React & D3

This example shows the top 10 films by category and sales from a Superstore dataset, rendered as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist and maps sales values to bar widths via `d3.scaleLinear`, with categories positioned by `d3.scaleBand`. The SVG output marks axes with `scaleBand.ticks` and renders each bar as a `rect` element created through React components. The chart updates dynamically when the data loads, demonstrating a hybrid approach where React manages the DOM while D3 handles scales and data parsing.

Ssrivalliwuyyuru
79% match