My ICE6 Data

100%

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 22, 2023

Forked from Fork of Fork of ICE-6 Bar Graph

A horizontal bar chart displays the monthly starter cost across twelve zones, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is filtered to the first twelve records, rendered as SVG rectangles with gridlines and tick labels generated by `xScale.ticks()` and manual axis positioning.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Final ICE6 submission

This example displays film sales data across countries in a horizontal bar chart, comparing monthly starter costs per zone. The visualization uses React with D3 v5 methods including `scaleBand`, `scaleLinear`, and `csv` to load and process data from a GitHub gist. Rendered as SVG, the chart shows red gridlines and labeled axes, with bars representing values for each category. The code imports `useState`, `useEffect`, and `useCallback` to manage asynchronous data loading and state within a functional React component.

PPrasanth

83% match

Loading thumbnail…

ICE-6

This example visualizes the monthly cost of business internet plans across 12 countries using a horizontal bar chart rendered as SVG. The chart uses D3’s `scaleBand` and `scaleLinear` for positioning and sizing bars, with React managing state and rendering. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the top 12 rows are selected. Axes are drawn manually with D3 ticks and gridlines, while the bars appear in blue without labels.

MMgk1255

83% match

Loading thumbnail…

ICE-6

This bar chart visualizes the cost per month of investments across countries using a horizontal bar chart layout, plotting countries on the y-axis and their associated costs on the x-axis. The visualization employs React for the user interface and d3.v5's scaleBand, scaleLinear, max, and csv functions to load and process the financial data from a CSV file. The chart is rendered as an SVG, with red gridlines extending from each x-axis tick to enhance readability.

HHema1430

81% match

Loading thumbnail…

ICE_6_Bar_Graph

This example visualizes the average monthly cost of basic internet service across twelve countries using a horizontal bar chart, with country names on the y-axis and cost in dollars on the x-axis. The React component loads CSV data via `d3.csv` and renders the chart as an SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Red gridlines, generated from the x-axis ticks, extend across the plot area, while each bar’s width reflects the data value. The visualization omits axis labels and tooltips, keeping the focus on comparing costs directly from the raw data source.

Nnikhilagopi

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

80% match

Loading thumbnail…

ICE6

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family structure, with green and blue bars representing different meter readings. The code uses React with d3-scale-band and d3-scale-linear scales, d3.stack for stacking, and SVG rendering to display the data. The chart loads CSV data from a GitHub gist and includes labeled axes, a legend, and a vertical y-axis label. It employs d3.csv for data loading and d3.max for computing the domain, with the visualization showing account-specific usage patterns over time.

SSnigdha6698

80% match

Loading thumbnail…

ICE-6 Bar Graph

This example presents a horizontal bar chart of retail sales data, showing the average basic monthly cost per country for a dataset of twelve nations. The visualization uses React with hooks to manage state, while D3 v5’s `scaleBand` and `scaleLinear` handle the axes and positioning. Data is loaded from a CSV file via `d3.csv`, and the rendering is done with SVG elements. The chart includes red gridlines, tick labels for both axes, and rectangular bars whose widths reflect the numeric cost values. The code explicitly imports functions like `axisLeft` and `axisBottom` but relies on manual tick generation for layout.

AArun

80% match

Loading thumbnail…

Title

This visualization shows the monthly cost of starter plans across twelve different zones, displayed as horizontal bars on an SVG chart. The chart uses D3.js scales for both the x-axis (linear scale for cost values) and y-axis (band scale for zone categories). Data is loaded from a CSV file using D3’s `csv` function, with the value field parsed as a number. React manages the component state and rendering, while D3 handles the axis ticks, grid lines, and bar rectangles.

PPrasanth

79% match