Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
SSweetierams
Last edited Jun 26, 2022
Created on Jun 26, 2022

This visualization shows the maximum temperature for the first 11 weather stations from a CSV dataset, displayed as horizontal bars ranked by station name. Using React for component structure and D3 v5 for scales and data loading, the bar chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders grid lines and labels via SVG. The bars are colored steelblue, with tick marks and station names annotated directly in the SVG.

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

This visualization displays the relationship between holiday status and temperature for insured individuals, using horizontal bars to compare temperature values across different holiday categories. The React component loads data from a CSV file and renders an SVG chart with D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while manually constructing axes and gridlines. Each rectangle’s width corresponds to the temperature value, and the chart title clarifies the focus on age and BMI, though the visualization actually plots holiday flags against temperature data.

Hhm0421
83% match
Loading thumbnail…

ICE6-BAR graph fork Yashwanth with D3.js

This bar chart visualizes average temperatures for multiple cities, with each city represented by a blue rectangle and the y-axis encoding temperature values. The visualization uses D3.js v5 scales (scaleBand for the x-axis, scaleLinear for the y-axis) alongside React hooks to manage CSV data loading and rendering. Axes are generated using d3.axisBottom and d3.axisLeft, while the temperature data is loaded from a remote CSV file. The chart includes labeled axes for "Cities" and "Temperature," with a 10-unit headroom added to the y-axis maximum for visual spacing.

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

ICE -6

This visualization displays COVID-19 data for ten countries, using a horizontal bar chart where bar length represents each country's population based on latitude values from the CSV data source. The React application uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and renders SVG rectangles with orange stroke styling. D3's csv parser loads the external data, while d3.max computes the domain for the linear scale, and tick marks are generated programmatically with custom grid lines.

GGARIDIDEEKSHITHREDDY
81% match
Loading thumbnail…

ICE-6 DV

This example displays a horizontal bar chart comparing the population of the first 20 U.S. states from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` for the y-axis categories, and `scaleLinear` for the x-axis values. The SVG rendering includes custom axis ticks and blue grid lines, with `rect` elements representing each state’s population.

Ssowmyanagula@my.unt.edu
80% match
Loading thumbnail…

ICE-6 Marks and Channels

This visualization is a horizontal bar chart that displays the length of RGB hex values for various CSS keywords, with each bar colored according to its CSS specification level (e.g., Level 1, 2, 3) using a predefined color mapping. The chart uses React for rendering and D3.js functions `scaleBand`, `scaleLinear`, and `max` to compute the scales and domain from a CSV file loaded via `d3.csv`. The bars are drawn as SVG rectangles, and axes are generated with custom ticks and labels.

Sshreyasribearelly@gmail.com
80% match
Loading thumbnail…

ICE6

This visualization shows the top 10 most populous US states as horizontal bars, with population values on the x-axis and state names on the y-axis. It uses React with hooks to manage state and D3’s `csv` to load data from a GitHub Gist. The bars and axes are rendered as SVG elements, with scales from `scaleBand` and `scaleLinear` positioning the rectangles, while custom tick marks and labels are drawn manually rather than using D3’s axis components.

SSai Bhavana Akkineni
80% match
Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni
80% match