Skip to main content
SimilarExport ZIP
100%

Fork of Pooja's ICE-6

✓ Published0🌍 Public
PPoojaThandra
Last edited Mar 6, 2023
Created on Mar 6, 2023

This bar chart displays the average on-time performance (Time) for the top ten airlines, sourced from a CSV file of diamond pricing data. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. SVG rectangles are rendered with the `d3.csv` loading and React’s `useState`/`useEffect` hooks, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 Bar Graph Prathyusha

This bar chart visualizes hotel booking costs across 12 destinations, using a horizontal layout where bar length encodes the price per 24 hours from a CSV dataset. The React component loads data via D3’s `csv` function, then renders SVG rectangles scaled by `scaleLinear` for cost and `scaleBand` for place names. Grid lines and axis labels are manually generated using D3’s `axisBottom` and custom tick mappings, with red vertical lines marking each cost increment.

Pprathyusha-reddy-arch
75% match
Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating and labels for anime names on the y-axis. The visualization uses React components and D3 v5 scales (scaleBand, scaleLinear) to position rectangles, with CSV data loaded via d3.csv from a Gist. Axis lines and tick labels are manually rendered using SVG elements, and styling is applied via CSS classes. The chart includes custom text labels for the x- and y-axes.

CCharanPottabathini
75% match
Loading thumbnail…

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

A bar chart displays the top 15 most populous Indian states, ranked by basic cost. The visualization uses React to manage state and render SVG elements, while D3.js provides scales, axes, and data loading via `d3.csv`. The horizontal bars are drawn with SVG `rect` elements, with axes generated using `d3.scaleBand` and `d3.scaleLinear`. Data is fetched from a remote CSV file hosted on GitHub, styled with explicit margins and a loading state.

MM
74% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
74% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
74% match
Loading thumbnail…

Fork of Fork of ICE-6:Sai Meghana

This bar chart displays the top 10 car prices from a CSV file, with each bar sized according to the car’s price. The chart uses React to build the user interface and D3.js to handle data loading, scaling, and rendering. The visualization’s axes and bars are constructed using D3’s `scaleBand`, `scaleLinear`, and `max` functions, drawing elements as SVG rectangles. The data is fetched from a remote CSV URL and the chart includes grid lines and tick labels for readability.

Eeravellisaimeghana
74% match
Loading thumbnail…

Fork of ICE-6

This visualization shows the tempo of the top 15 most-streamed songs on Spotify, displayed as a horizontal bar chart. The bar lengths correspond to each song’s tempo value, with song titles listed on the y-axis and tempo ticks on the x-axis. Built with React and D3 v5, the code uses `d3.csv` to load remote data, `scaleBand` and `scaleLinear` for scaling, and renders bars and axes as SVG elements computed from the data.

EEeshwarReddy
74% match
Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3 and Recat

This horizontal bar chart visualizes the number of users of OTT platforms, sourced from a CSV file. The chart uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. React manages the data state and updates the visualization. The chart displays the first 12 rows of data, with axis ticks and labels generated via D3's axis functions.

TTulluripallavi
74% match