ICE6

100%

✓ Published4🌍 Public

Last edited Mar 4, 2022

Created on Mar 2, 2022

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.

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

95% match

Loading thumbnail…

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.

Hharika-1929

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

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

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

73% match

Loading thumbnail…

ICE-6

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

Vvagdevi-369

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

71% match

Loading thumbnail…

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

A bar chart displays the top 20 cosmetic products by revenue, using horizontal bars to compare product ratings against their identifiers. The visualization splits responsibilities between React state management and D3 scales, with `scaleBand` mapping ratings to the y-axis and `scaleLinear` mapping anime IDs to bar widths. SVG rendering handles all marks and channels, while custom axis ticks are generated manually through React components rather than D3 axis helpers. Data loads asynchronously from a CSV file via `d3.csv`.

Sskambhore04

71% match