Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
RRupeshGandham
Last edited Jun 26, 2022
Created on Jun 26, 2022
Forked from ICE-6

This visualization displays the top 20 companies by value using a horizontal bar chart, with company names on the y-axis and numerical values on the x-axis. It loads data from a CSV file via `d3.csv` and renders SVG elements using React. The chart leverages `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick lines and labels. Data is transformed with a row function that ensures value fields are parsed correctly before rendering red rectangular bars.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This horizontal bar chart displays the top 10 companies by revenue in billions of dollars, sourced from a CSV file. Each bar’s length is proportional to the revenue value, scaled using `d3.scaleLinear`, while company names are positioned with `d3.scaleBand`. The chart renders as an SVG with React, using `d3.csv` to load data and a `useEffect` hook to fetch and parse it. Axis ticks and gridlines are drawn with `d3.axisLeft` and `d3.axisBottom` logic, and red fills highlight the bars.

Ssuchitra2602
88% match
Loading thumbnail…

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

This example shows the top 10 most valuable companies by market value, displayed as a horizontal bar chart with the company name on the y-axis and company value on the x-axis. The visualization is built using React for component structure and D3 v5 for scales and data loading via `d3.csv`. Bars are rendered as SVG `<rect>` elements, with `d3.scaleBand` and `d3.scaleLinear` positioning bars and axes, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. Company values are formatted with `d3.format` to abbreviate billions.

SSnapika
88% match
Loading thumbnail…

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

This example shows the top 9 most profitable companies as a horizontal bar chart using React and D3. It loads CSV data from a GitHub gist, converts profit values to numbers, and renders SVG bars with axes. The visualization uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and maps over tick values to create gridlines and labels. React manages the component state with `useState` and `useEffect`, while `ReactDOM.render` mounts the chart. Styling includes custom colored ticks and marks set via CSS classes.

TTejaswi@3271
85% match
Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays the revenue of the world’s top 10 biggest companies in billion dollars, sourced from a CSV file. It highlights how custom D3 axes can be styled with red gridlines, blue tick labels, and adjusted tick font sizes. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and rendering rect elements in SVG. Axes are manually constructed by mapping tick values, avoiding the default axis generators.

Ssuchitra2602
85% match
Loading thumbnail…

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

This bar chart displays the top 10 most valuable unicorn companies, with company names on the y-axis and valuation in billions on the x-axis. The visualization is built using React and D3.js, where React manages the component state and rendering of SVG elements, while D3’s `scaleBand` and `scaleLinear` handle the chart’s scales and tick generation. Data is loaded asynchronously from a CSV file via `d3.csv`, filtered to the top 10 entries, and rendered as blue rectangles.

Pprashanth yamala
84% match
Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571
84% 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
84% match
Loading thumbnail…

ICE-6

This visualization displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart loads data from a CSV file and renders as an SVG using React and D3 v5. The code employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and includes grid lines with tick labels generated via the scales. Data is processed by converting the ’2019’ column to numeric values and slicing the top 10 entries.

SSushmareddy-gudipally
83% match