Skip to main content
SimilarExport ZIP
100%

ICE-6 Part 1

✓ Published0🌍 Public
JJerlineJJ
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from HTML Starter

This bar chart displays the fuel efficiency of cars from 20 manufacturers, sourced from a CSV file accessed via a gist URL. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering positions named bars, with axis ticks drawn from `xScale.ticks()`. Data is loaded asynchronously via `d3.csv`, and the chart is rendered inside a React component using `ReactDOM.render`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Graph

This example displays the average carbon emissions of cars by model year as a horizontal bar graph. It uses React hooks to load and filter CSV data from a GitHub gist, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The chart includes custom axes via `d3.axisBottom`-style tick rendering, with red gridlines and a title above the visualization.

Llibramanju
85% 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
85% match
Loading thumbnail…

ICE6-BarGraph

This bar chart from the D3.js and React gallery displays average car prices grouped by brand, using data loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the x-axis, rendering the bars as SVG `rect` elements within a React component. Gridlines and axis tick labels are generated using the scales' `.ticks()` and `.domain()` methods, presenting an interactive, data-driven view of pricing trends across automobile manufacturers.

Mmukundakrishna.r@gmail.com
84% match
Loading thumbnail…

ICE-6.1

This bar chart displays the top 10 car models by selling price, sourced from a CSV file fetched via D3's `csv` function. Using React with D3 v5, the code maps car names to a band scale and prices to a linear scale, rendering red horizontal bars. Axes are drawn with `scaleLinear` ticks and `scaleBand` domains, and the SVG output highlights the comparative pricing of each vehicle.

AABCDB15
83% 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

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

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

This visualization shows a horizontal bar chart comparing the acceleration capacity of 20 cars, rendered as SVG marks within a React application. The code uses React’s `useState` and `useEffect` hooks to asynchronously load CSV data from a GitHub gist via D3’s `csv` function, then maps it to a linear x-scale (`d3.scaleLinear`) and a band y-scale (`d3.scaleBand`) for car names. Custom tick marks and labels are drawn manually using D3’s `scaleBand` and `scaleLinear`, with blue gridlines and text elements, all within a single `<svg>` container managed by ReactDOM.

Sshiiva-surya
82% match
Loading thumbnail…

ICE 7 Jerline piechart

This pie chart displays the fuel efficiency of cars by manufacturer, with each slice sized proportionally to its Fuel_efficiency value and labeled in a legend showing both the manufacturer name and the corresponding numerical value. Built with D3 v5, the visualization loads CSV data from a GitHub gist via `d3.csv` in `getData.js`, then uses `d3.pie` and `d3.arc` to generate SVG path segments, with `d3.scaleOrdinal` providing categorical colors. The chart renders to a 960×500 SVG canvas, and legends are manually positioned using `svg.append` and `attr transform` translations.

JJerlineJJ
82% match