ICE6

100%

✓ Published0🌍 Public

Hharika-1929

Last edited Jun 25, 2022

Created on Jun 25, 2022

Forked from ICE6

This example displays a horizontal bar chart ranking Dark Souls 3 armor sets by their total physical absorption value, using dark green bars sorted from highest to lowest. The visualization loads CSV data from a GitHub gist and renders with React, using d3.csv for parsing, d3.scaleBand and d3.scaleLinear for positioning, and d3.max for domain calculation. Axes are custom-drawn with tick lines and labels, while the SVG output is managed through React’s declarative rendering.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE6

This visualization displays the total physical absorption values of Dark Souls 3 armor sets as a horizontal bar chart, with the data sorted in descending order. It uses React for the component structure and D3 v5 for data loading, scaling (d3.scaleBand and d3.scaleLinear), and axis generation (d3.axisLeft, d3.axisBottom). The data is fetched as a CSV from a GitHub gist and rendered as SVG rectangles with gold gridlines.

Hharika-1929

94% match

Loading thumbnail…

ICE6

This bar chart displays the total physical absorption values of Dark Souls 3 armor sets, sorted in descending order from highest to lowest defense. Using React hooks to manage state and load data via `d3.csv`, the visualization employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The SVG rendering includes custom axis tick generation with `d3.axisLeft`-style manual positioning, gold gridlines, and darkslateblue rectangles representing each armor set's absorption stat.

BBryanA999

92% match

Loading thumbnail…

Fork of ICE6 Swathi

This horizontal bar chart visualizes Dark Souls 3 armor sets ranked by their total physical absorption value. The data is loaded from a CSV file using `d3.csv`, sorted in descending order, and rendered as SVG rectangles within a React component. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and manually drawn axis ticks and labels via `d3.select`. Bars are styled with a dark slate blue fill, and the visualization includes gold gridlines for readability.

SSurikanti Swathi

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

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

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

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

78% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

78% match