Fork of ICE6 Swathi

100%

Fork of ICE6 Swathi

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from ICE6

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.

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

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

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

88% match

Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating and labels for anime names on the y-axis. The visualization uses React components and D3 v5 scales (scaleBand, scaleLinear) to position rectangles, with CSV data loaded via d3.csv from a Gist. Axis lines and tick labels are manually rendered using SVG elements, and styling is applied via CSS classes. The chart includes custom text labels for the x- and y-axes.

CCharanPottabathini

75% match

Loading thumbnail…

Fork of ICE-6

This example displays a horizontal bar chart of the top 20 rated anime, with each bar’s length corresponding to the anime’s rating from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis categories, `scaleLinear` for the x-axis scale, and renders bars as SVG rectangles. The chart includes gridlines and tick labels generated by `scaleLinear` and uses `csv` for data loading.

CCharanPottabathini

73% match

Loading thumbnail…

Fork of ICE5 - chaturya d3.js parsing

This example presents a dual-panel bar chart comparing BMI and height-weight data for individuals. The left panel shows a single bar per person representing BMI, while the right panel displays paired bars for height and weight. Data is loaded from a remote CSV file using `d3.csv`. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axes, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The React component manages state with `useState` and `useEffect`, and output is rendered as SVG.

CChaturyaAkhilaPallem@my.unt.edu

73% match

Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a BMI bar chart with two side-by-side graphs: one displaying BMI values per person, and another comparing Height and Weight as grouped bars. The visualization uses React for component structure and D3 v5 for data parsing via `d3.csv` and scales (`scaleBand`, `scaleLinear`). A CSV from GitHub Gist provides the dataset, which is loaded asynchronously and rendered as SVG with rounded rects, rotated axis labels, and custom axis text.

Rrobertotienonyaranga@gmail.com

73% match

Loading thumbnail…

Fork of Fork of ICE5 - chaturya d3.js parsing

This example shows a dual-panel bar chart comparing BMI values against height and weight measurements for individuals in a BMI dataset. The left panel displays BMI as a single green bar per person, while the right panel splits each category into orange (height) and blue (weight) bars using a grouped bar layout. The visualization uses React with hooks to manage data loading via `d3.csv`, and D3 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the SVG marks. Data is parsed from a remote CSV file, with margins and rounded bar corners adding polish to the chart.

73% match