Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
AAnton Vasilev
Last edited Jun 20, 2019
Created on Jun 20, 2019
Forked from Making a Bar Chart

Five apples render as red circles in an SVG, demonstrating how React components build visualizations from data arrays. The example uses a d3.scaleOrdinal for color and radius mapping, while d3.range generates the initial dataset. Though the FruitBowl component references a selectedFruit variable, no interaction is yet wired, leaving the visualization static. React handles the SVG circle rendering, with d3 providing the scale functions for this simple, non-bar chart illustration.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

Five apples rendered as red circles sit in a row, and clicking one selects it with a black outline. The example demonstrates building a custom React component with D3 scales, using `d3.scaleOrdinal` for color and radius mapping and `useState` for selection state. SVG circles are positioned with a simple index-based formula within a React app.

AAnton Vasilev
95% match
Loading thumbnail…

Making a Bar Chart

Five fruit circles render in an SVG using React components, with apples styled red and lemons yellow via d3-scaleOrdinal color and radius scales. Clicking a fruit toggles a black stroke around it, updating state through React’s useState hook. The example demonstrates how to combine React’s declarative component model with d3 scales for mapping data to visual properties, producing an interactive selection interface.

AAnton Vasilev
94% match
Loading thumbnail…

Fork of Bowl of Fruit - Click to Select

A circular SVG chart displays five apples as red circles with black outlines, allowing a viewer to click any apple to select it, which highlights the chosen fruit with a thicker stroke. D3's `scaleOrdinal` maps fruit types to fill colors and radii, while React's `useState` manages both the fruit collection and the selected identifier. The visualization is built with React components rendering SVG circles, using D3 v5 for scales and React 16.8 for stateful interaction logic.

Ggharakhani1986
88% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples rendered as red SVG circles sit in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit via React state, using the d3 scaleOrdinal for both color and radius mapping. The example demonstrates how React components and d3 scales can combine to create interactive SVG visualizations annotated with d3.v5.

CChenluWang96
85% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples rendered as red SVG circles sit in a row, with a black stroke highlighting the currently selected fruit. Clicking any apple moves the selection to that fruit via React state, using the d3 scaleOrdinal for both color and radius mapping. The example demonstrates how React components and d3 scales can combine to create interactive SVG visualizations annotated with d3.v5.

CChenluWang96
85% match
Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualization renders five identical red apples as circles arranged horizontally across an SVG canvas. The code uses d3.select and d3.range from D3 v5 to generate the dataset, then appends SVG circle elements with fixed positioning and a uniform fill color. Each circle is placed at increasing x-coordinates, creating a simple linear layout without interaction or animation. The visualization demonstrates basic data binding with d3's enter/append pattern in a React framework context.

Cclaire1801
85% match
Loading thumbnail…

Basic Bar Chart

This example shows a basic bar chart comparing fruit categories (Apples, Oranges, Bananas, Pears) with corresponding numerical values. The chart renders as an SVG using React and D3 v5, employing `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Bars appear in steelblue, with axes generated through `d3.axisBottom` and `d3.axisLeft`. The underlying data is hardcoded in the React component, and the visualization updates whenever the data prop changes.

ZZac02
85% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl. A black outline highlights the currently selected fruit, which changes when a user clicks a circle. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius mappings and handles the click interaction through React state, `setSelectedFruit`.

Bbeca8675
85% match