Skip to main content
SimilarExport ZIP
100%

ICE6

✓ Published0🌍 Public
Hharika-1929
Last edited Jun 25, 2022
Created on Jun 25, 2022
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
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
94% 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
90% 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
74% 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…

ICE6

The visualization displays a BMI bar chart comparing height, weight, and BMI values for multiple individuals. It renders two side-by-side SVG bar charts using React and D3 v5. The left chart shows BMI scores with bars colored teal, while the right chart displays height and weight as paired orange and blue bars. Data is loaded from a remote CSV file using `d3.csv`, with scales created via `scaleBand`, `scaleLinear`, and axes drawn with `axisBottom` and `axisLeft`.

KKusumaKumariDama@my.unt.edu
73% 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
73% 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
72% match