Fork of Fork of ICE5 - chaturya d3.js parsing

100%

Fork of Fork of ICE5 - chaturya d3.js parsing

✓ Published2🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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.

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

95% match

Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse CSV data with D3.js, displaying a bar chart of population figures for the top ten countries from a GitHub-hosted ICE-5 dataset. It uses `d3.csv` to fetch and parse the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for rendering bars. The page also includes a text overlay reporting file size, row count, and column count.

Bbindhureddy98

83% match

Loading thumbnail…

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

This example shows a horizontal bar chart of cholesterol content for ten food items, sourced from a CSV file. The bars are rendered as SVG rectangles using React components. The code leverages D3's `scaleBand` and `scaleLinear` for coordinate mapping, and D3's `csv` for data loading, while React manages state and rendering the SVG elements.

KKeerthipriyaBankuru

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

82% match

Loading thumbnail…

Fork of Fork of ICE6

This example displays a horizontal bar chart comparing the population of ten countries. D3.js loads the data from a remote CSV file, and React renders the visualization as SVG elements. The chart uses D3's scale functions to map data values to pixel coordinates, with axis ticks generated from the linear scale. Bars are drawn as SVG rectangles, showcasing how D3 and React can be combined for data-driven graphics.

Hharika-1929

82% match

Loading thumbnail…

Fork of pavan ice6.2

This example displays a scatter plot of BMI data, plotting each individual’s weight against their height. The visualization uses red and yellow circles to differentiate between male and female data points, with labeled axes for both dimensions. The code loads CSV data from a GitHub gist using `d3.csv`, maps the parsed height and weight values through `d3.scaleLinear` and `d3.extent`, and renders circles as SVG elements. It leverages D3 v6’s `select`, `axisLeft`, and `axisBottom` APIs to generate the chart, with a fixed radius for each point and axis tick labels styled at 24 pixels.

Ppavan vasamsetti

82% match

Loading thumbnail…

Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file from a remote URL using D3.js’s `d3.csv` method, displaying a summary message about the data size, row count, and column count. The visualization also includes a bar chart rendered in React with SVG, using D3’s `scaleBand` and `scaleLinear` to map country names and 2019 population values. The page shows both the raw data statistics and a graphical representation of the first ten rows from the ICE-5 dataset.

Bbindhureddy98

81% match