Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Ssnehareddygurram
Last edited Mar 10, 2023
Created on Mar 10, 2023

This bar chart displays the ages of the ten most recent female Oscar winners, with each bar’s length encoding the year of the award. The visualization is built using React for component structure and D3 v5 for scales and layout, specifically `scaleBand` for the categorical age axis and `scaleLinear` for the year axis. The SVG rendering is generated directly through React elements, while D3’s `csv` loader fetches the data from a GitHub gist. Axes are manually drawn with `<line>` and `<text>` elements rather than using D3’s axis components.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Data Visualization- ICE-06 - Bar chart

This bar chart displays the top 100 female Oscar winners by number of awards, sorted with the highest counts at the top. Using React with D3 v5, it builds an SVG with d3.scaleBand for the vertical name axis and d3.scaleLinear for the horizontal count axis. The code manually renders tick marks, grid lines, and labels via d3.ticks and d3.max, while styling red bars and blue tick text through CSS.

Ssnehareddygurram
89% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This interactive bar chart visualizes the population of Oscar female winners, focusing on the top three countries. The initial data is loaded from a CSV file via d3.csv, which retrieves a gist dataset. Using d3.scaleBand and d3.scaleLinear, the chart maps country names to the y-axis and population values to the x-axis. SVG rectangles are rendered with React, and axes are drawn using the d3.axis, with tick marks and labels generated programmatically. The visualization dynamically updates as data is fetched, highlighting differences in population counts among the displayed countries.

Ssnehareddygurram
87% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the 2018 revenue and product names from a dataset of Oscar female winners, with the title "Oscars winners age" and an x-axis labeled "Year." It uses d3.csv to load data from a GitHub gist, then renders with d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. The SVG output includes custom tick formatting that converts large numbers to abbreviations.

Ssnehareddygurram
84% match
Loading thumbnail…

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

This horizontal bar chart displays salary data for employees at different ages, using bars whose lengths encode salary values and y-axis positions encode age. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangle marks, with custom axis ticks rendered via D3’s `axisLeft`, `axisBottom`, and `scaleLinear` methods. It loads CSV data from a GitHub gist, filtering the first 15 rows, and renders entirely as SVG within a React component, with loading state managed via React hooks.

NNitheeshSama
84% match
Loading thumbnail…

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

This bar chart displays the titles and ratings of 15 movies, fetched from a remote CSV file. Built with React and D3 v5, it renders an SVG with horizontal bars and axes. The code uses `d3.csv` to load and parse data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and maps data to SVG `rect` elements for the bars.

AAISWARYAMARAPATLA1999
84% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This example visualizes the 2022 populations of movies in the "RICH" dataset as a bar chart using React and D3.js. The chart displays each movie’s runtime as a vertical bar, with movie names on the x-axis and runtime values on the y-axis. The code uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.csv` to load data from a remote CSV file. SVG elements render the bars, axis ticks, and gridlines, with margins and dimensions explicitly defined. React’s `useState` and `useEffect` hooks manage asynchronous data fetching and re-rendering.

Rrohithannadurai@my.unt.edu
84% match
Loading thumbnail…

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

This scatterplot-like bar chart displays the ages of fifteen individuals grouped by gender, using horizontal bars to compare values. The visualization combines React for component state management and rendering with D3 v7 for data loading and scale calculations. It loads CSV data from a GitHub gist via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars, with custom tick rendering instead of d3.axisBottom or d3.axisLeft.

Kkarumanchimanasa
84% match
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 15 Netflix movies by score, with red gridlines and labeled axes. It uses React to manage state and render the SVG, while D3 v5’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions handle data loading and scaling. The code builds custom axis ticks and rectangles instead of using D3’s axis generators, and the raw data comes from a gist-hosted CSV file. The chart updates when new data is fetched via the `useEffect` hook.

SSravaniPosina
83% match