Skip to main content
SimilarExport ZIP
100%

ICE 6 : Task 1

✓ Published2🌍 Public
NNITIN0601
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from HTML Starter

This visualization displays bike sales revenue for the top ten products as a horizontal bar chart. It shows each product's revenue with bars scaled linearly along the x-axis, using a scatter-plot-like grid with vertical gridlines. The React component fetches data from a CSV file using d3.csv and renders the chart as an SVG. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.max to determine the domain. Custom tick labels are drawn for both axes, with separate styling for the text elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch
83% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
83% match
Loading thumbnail…

ICE-6 Fork of HTML Starter

This example shows a horizontal bar chart of product sales data, displaying the December sales figures for the top 10 products. The visualization uses React with hooks like `useState` and `useEffect` to fetch and manage the data, while D3 v5 functions `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. The SVG rendering maps products to the y-axis and sales values to the x-axis, with axis ticks and grid lines drawn manually. Data comes from a CSV file loaded via D3’s `csv` method, and the chart updates dynamically once the data arrives.

Aakshitha.rapala@gmail.com
82% match
Loading thumbnail…

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

This visualization displays the top 10 vehicle selling prices as a horizontal bar chart, with car names on the y-axis and price on the x-axis. Built using React and D3 v5, it loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axis ticks rendered as SVG elements. The chart includes custom grid lines and tick labels, with all marks generated declaratively through React components.

KKishen Patel
82% match
Loading thumbnail…

ICE-6 Sheshidhar reddy cars

This visualization displays the top 10 car models by sales units using a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, with scales created using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Data is loaded asynchronously from a CSV file using d3.csv, which parses the numeric units field. The chart includes custom axis ticks and gridlines drawn with SVG line and text elements, while all layout and margin calculations are handled manually in the React render method.

SSheshidharreddy
82% match
Loading thumbnail…

ICE_6_car_details

A horizontal bar chart displays the top ten car models by sales units, using skyblue rectangles scaled by a linear axis. The visualization loads CSV data from a GitHub gist, processes it with D3's `csv` method, and renders the chart in an SVG via React. D3's `scaleBand` and `scaleLinear` position the bars, while `axisBottom` tick marks are manually drawn with red lines. The React component manages state with `useState` and fetches data asynchronously using `useEffect`.

Nnikhilagopi
82% match
Loading thumbnail…

ICE-6(sai nitish)

This horizontal bar chart displays the top 10 cosmetic products by revenue, using the d3.csv function to load data from a GitHub-hosted CSV file. It employs d3.scaleLinear and d3.scaleBand for the x and y axes, respectively, with d3.axisLeft and d3.axisBottom for tick marks. The chart customizes the x-axis tick format to replace 'G' with 'B' and removes default axis lines, while rectangles are colored red via CSS. The title and axis labels are added as SVG text elements. Data is rendered as an SVG graphic.

Ssainitish1999
81% match
Loading thumbnail…

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

This visualization shows the top 10 products sold in a store as a horizontal bar chart. React manages the component state and rendering, while D3 provides the data loading, scales, and axis utilities. The chart uses `d3.csv` to fetch sales data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. React renders SVG rectangles, gridlines, and text labels directly, with the data limited to the first 10 records.

SSyed Araib Karim
81% match