Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Ccharanchand9
Last edited Jun 26, 2022
Created on Jun 25, 2022

This example displays the top 10 cricketers by score as horizontal bars, using React to render SVG elements and D3 v5 scales (d3.scaleBand, d3.scaleLinear) to position the bars and axes. It loads a CSV dataset of cricket statistics via d3.csv, slicing the first 10 rows, and draws tick marks and labels for both the x and y axes. The chart, titled “10 Most Popular players,” uses blue gridlines, a left margin for player names, and no other visual encodings beyond bar length.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This visualization displays the top 10 cricketers by score using a horizontal bar chart, with the title and data loaded from a CSV file via `d3.csv`. React manages the component state and renders SVG marks, while D3 v5 provides the scales: `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The x-axis ticks are drawn explicitly using `xScale.ticks()`, but no y-axis line or tick marks are rendered, only text labels. The bar widths encode score values, and the chart lacks axis titles or a legend, making it a minimal representation of the underlying data.

Ccharanchand9
94% match
Loading thumbnail…

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

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

Vvidhyanamini
87% match
Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri
85% match
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 novelists ranked by their book counts, using React to render SVG marks and D3 scales to map data to positions. The code loads CSV data with `d3.csv`, slices it to 10 entries, and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Blue gridlines and tick labels are generated manually via `.ticks()` and `.domain()`. React state and effects (`useState`, `useEffect`) manage asynchronous data loading and re-rendering.

Mmandalasaikrishna007
85% match
Loading thumbnail…

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

A bar chart displays the goals scored by the nine most popular football players, with player names on the y-axis and a blue horizontal bar for each, scaled linearly by goal count. The visualization is built with React and D3, where D3's `scaleBand` and `scaleLinear` compute positions and widths, and React's `useState` and `useEffect` manage asynchronous loading of CSV data via `d3.csv`. Axis ticks and labels are rendered as SVG elements within a translated group.

Mmandalasaikrishna007
84% match
Loading thumbnail…

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

This visualization displays the ages of the top 20 players from a CSV dataset as a horizontal bar chart. Each player is represented by a blue rectangle, with the bar length encoding age using a linear scale, while player names are mapped to the y-axis using a band scale. The code integrates React’s `useState` and `useEffect` hooks with D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to load and transform data. SVG rendering is handled directly through React elements, with manual grid lines and tick labels generated from D3’s scales.

Ppravalliyaram
84% match
Loading thumbnail…

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

This example shows a horizontal bar chart ranking the top 10 most populous countries, with country names on the y-axis and population values on the x-axis. The chart loads data from a CSV file using `d3.csv`, sorts and slices the data to the first ten rows, and renders SVG rectangles whose widths are scaled using `d3.scaleLinear`. React manages the component state via `useState` and `useEffect`, while D3 provides the scales, axes, and tick formatting. The visualization demonstrates how React and D3 can be combined to render marks and channels declaratively.

SSnigdha6698
83% match
Loading thumbnail…

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

This example presents a horizontal bar chart ranking the top 10 most populous countries in 2019, loaded from a CSV file using d3.csv. The React component renders SVG marks (rectangles) whose widths and positions are scaled by d3.scaleLinear and d3.scaleBand, with custom tick labels and gridlines drawn manually. The code uses React hooks like useState and useEffect to manage asynchronous data loading, and d3.scaleLinear, d3.scaleBand, d3.max, and d3.format for scales and formatting.

TTharun2022
83% match