Skip to main content
SimilarExport ZIP
100%

Fork of Data Visualization- ICE-06 - Bar chart

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

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.

AI-generated description

This bar chart shows population of the top 10 most revenue atheletes. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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
85% 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
82% 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
80% match
Loading thumbnail…

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

This bar chart displays student statistics by area for the top 15 entries, using horizontal bars where area names appear on the y-axis and numeric stats on the x-axis. The visualization is built with React and D3 v5, using `d3.csv` to load remote data and `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent the marks, with grid lines and tick labels generated via `d3.ticks()`. Data is pulled from a GitHub gist CSV, and the chart renders within a fixed 960x500 viewport with defined margins.

SSaiipriiya
80% 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
80% match
Loading thumbnail…

Fork of Data Visualization - ICE-6 - Bar chart

This visualization displays a horizontal bar chart of the world’s top 10 revenue-generating athletes, with bars sized by total pay in millions of dollars. The React component uses `useState` and `useEffect` to load CSV data via D3’s `csv` method, then renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Custom axes are drawn manually, including tick lines and labels, while CSS styles colored bars red and tick text blue. Data originates from a GitHub Gist, loaded asynchronously before rendering the chart.

NNHRK555
79% match
Loading thumbnail…

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

A bar chart displays population data for the top 11 bestselling books, with each bar’s length encoded by population size and its position on the y-axis by book title. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG `rect` marks. Data is loaded from a CSV file via `d3.csv`, while axes and gridlines are generated manually using `xScale.ticks()` and text elements.

TTulluripallavi
79% match