Skip to main content
SimilarExport ZIP
100%

ice-6

✓ Published0🌍 Public
Hhm0421
Last edited Mar 23, 2023
Created on Mar 23, 2023

This example shows the cost of 15 laptops from a CSV dataset, displayed as a horizontal bar chart. The visualization uses React to manage state and render an SVG, while D3 v5 utilities (`scaleBand`, `scaleLinear`, `max`, `csv`) handle data loading, scaling, and axes. Values are plotted with `rect` elements, and orange grid lines with tick labels are generated via `xScale.ticks()`. The chart is titled "laptops" and uses a magenta heading, with bars extending from the left margin.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This example visualizes the monthly cost of business internet plans across 12 countries using a horizontal bar chart rendered as SVG. The chart uses D3’s `scaleBand` and `scaleLinear` for positioning and sizing bars, with React managing state and rendering. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the top 12 rows are selected. Axes are drawn manually with D3 ticks and gridlines, while the bars appear in blue without labels.

MMgk1255
82% match
Loading thumbnail…

ICE-6

This bar chart visualizes the cost of cars by year, showing the price range for 15 selected model years from a CSV dataset. Purple horizontal bars are rendered as SVG rectangles within a React component using D3 scales (`scaleBand`, `scaleLinear`). The chart includes custom axes with blue gridlines and tick labels, with data loaded asynchronously via `d3.csv`. The visualization uses D3 v5 and React hooks (`useState`, `useEffect`) to manage state and rendering.

Ppethavenu
82% match
Loading thumbnail…

ICE_6_Bar_Graph

This example visualizes the average monthly cost of basic internet service across twelve countries using a horizontal bar chart, with country names on the y-axis and cost in dollars on the x-axis. The React component loads CSV data via `d3.csv` and renders the chart as an SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Red gridlines, generated from the x-axis ticks, extend across the plot area, while each bar’s width reflects the data value. The visualization omits axis labels and tooltips, keeping the focus on comparing costs directly from the raw data source.

Nnikhilagopi
80% match
Loading thumbnail…

ICE-6 Bar Graph

This example presents a horizontal bar chart of retail sales data, showing the average basic monthly cost per country for a dataset of twelve nations. The visualization uses React with hooks to manage state, while D3 v5’s `scaleBand` and `scaleLinear` handle the axes and positioning. Data is loaded from a CSV file via `d3.csv`, and the rendering is done with SVG elements. The chart includes red gridlines, tick labels for both axes, and rectangular bars whose widths reflect the numeric cost values. The code explicitly imports functions like `axisLeft` and `axisBottom` but relies on manual tick generation for layout.

AArun
80% match
Loading thumbnail…

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

This example visualizes laptop sales data for the top ten companies using a horizontal bar chart rendered as SVG. The visualization loads data from a CSV file and displays each company’s sales as a green rectangle bar. Built with React and D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and React’s `useState` and `useEffect` hooks to manage state. The chart includes axes with blue tick lines and company labels.

Rrohinikotha
80% 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
80% match
Loading thumbnail…

ICE-6

This visualization displays car pricing data for fifteen countries, using horizontal bars to compare each country’s basic cost. The chart is built with React and D3 v5, loading CSV data via `d3.csv` and rendering an SVG. Scales are created with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes added using `axisLeft` and `axisBottom`.

Ppethavenu
80% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This example displays a horizontal bar chart comparing monthly basic Amazon costs across different countries, using the first twelve rows of a CSV dataset. The visualization renders SVG elements through React components, with D3 v5 handling data loading via `d3.csv`, scale construction using `scaleBand` and `scaleLinear`, and axis generation through `axisBottom` and `axisLeft`. The chart includes red gridlines with tick labels, country names along the y-axis, and colored rectangles representing costs. Data updates occur after the CSV loads, triggering React state changes that re-render the SVG. The visualization appears within a React app, with D3’s `max` function setting the x-axis domain.

Aajaysonu
79% match