Skip to main content
SimilarExport ZIP
100%

Fork of ice

✓ Published0🌍 Public
Ppavankalyan1507
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from Fork of ice

This example shows a horizontal bar chart of iPhone sales by year, with the top 20 records displayed as green bars scaled against the sales value on the x-axis and year labels on the y-axis. The visualization uses React with the `useState` and `useEffect` hooks to load data asynchronously from an external CSV file via `d3.csv`, then renders SVG elements generated with `d3.scaleBand` and `d3.scaleLinear`. Gridlines and tick labels are manually mapped from the scales, while bar heights derive from the band scale’s bandwidth, and the chart is drawn inside a 960×500 SVG canvas with a 200-pixel left margin.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ice

A horizontal bar chart displays the top 20 records of iPhone sales by year, with each bar’s length proportional to sales figures loaded from a CSV file. The chart uses React with hooks for state management and D3 v5’s `scaleBand` and `scaleLinear` to map years to vertical positions and sales values to bar widths. SVG rectangles render the bars, while x-axis ticks and y-axis labels are generated manually using D3’s `ticks()` and scale domains. Data comes from a remote GitHub Gist URL, fetched asynchronously via `d3.csv`.

Ppavankalyan1507
96% match
Loading thumbnail…

Fork of Fork of Bar Chart - ICE 6

This example visualizes the top 10 countries by sales as a horizontal bar chart, using a green-to-orange linear gradient to fill each bar. The chart is built with React and rendered as SVG, using D3 v6 scales (`scaleBand` and `scaleLinear`) to map country names and sales values to pixel positions. Data is loaded from a remote CSV file, and axis ticks are generated with `xScale.ticks()`, with both axis labels and bar values styled via CSS.

Aarchanagoli@my.unt.edu
83% 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
83% match
Loading thumbnail…

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

This visualization displays mobile sales figures for ten brands as horizontal bars, using a bar chart format. The React component manages the application state, loading CSV data through d3.csv from a GitHub-hosted dataset. D3's scaleBand and scaleLinear functions map the categorical brand names and numeric sales values to screen coordinates. The chart is rendered as an SVG, with axes and tick marks generated through d3's axis utilities, while React creates the SVG elements declaratively. The chart includes green grid lines and a title, "Mobile Sales," within a web page styled with CSS.

YYbg99g
83% match
Loading thumbnail…

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

This example visualizes laptop sales data for various companies using a bar chart. The chart displays the sales figures for the first ten companies from a CSV file, with horizontal bars representing each company’s sales value. The visualization is built with React and D3, using D3’s `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis sales values. The SVG rendering is generated through React’s declarative components, with `csv` loading the data and `max` determining the domain for the x-axis scale.

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

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

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Kkalyanikotha
83% match
Loading thumbnail…

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

This example displays a horizontal bar chart of laptop sales for the top ten companies, rendered as SVG elements using React. The code loads CSV data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and manually creates axis ticks and gridlines. The bars and labels are generated as React components, with styling applied via CSS in the HTML file.

Kkalyanikotha
83% match