Fork of ice

100%

✓ Published1🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

Forked from 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`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

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.

Ppavankalyan1507

96% 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

82% 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

82% 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

82% 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

82% 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

82% match

Loading thumbnail…

ICE-6 Bar Graph

This bar chart visualizes iPhone sales figures across countries for the year 2020, with each bar’s height encoding the sales value. The chart uses D3 v7 to load a CSV dataset from GitHub Gist, then creates an SVG with a band scale for the x-axis and a linear scale for the y-axis. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are appended as `rect` elements with a steel blue fill. The code includes hover effects defined in CSS, though no interaction is implemented in the JavaScript itself.

Ssriram.official9@gmail.com

81% match

Loading thumbnail…

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

This bar chart displays the top 10 companies by bicycle sales, rendered as horizontal bars within an SVG. The visualization is built using React and D3, with data loaded from a CSV file. The code uses `d3.csv` to fetch and parse the data, and `d3.scaleBand` and `d3.scaleLinear` to map company names and sales values to visual positions. Each bar’s width is proportional to its sales figure, with gridlines and axis ticks generated from the linear scale.

Kkalyanikotha

81% match