Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
AAnton Vasilev
Last edited Jun 21, 2019
Created on Jun 20, 2019
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

AAnton Vasilev
94% match
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
92% match
Loading thumbnail…

Select a fruit

Five fruit circles render in an SVG, each an apple or lemon represented by color and size. Clicking a circle selects it, adding a black stroke. D3 transitions animate the fruit entering, exiting, and changing type over time. The React framework manages state for selection and fruit data, while the D3 `scaleOrdinal` maps fruit types to colors and radii, and `data` joins drive the update pattern.

JJoseph Popoola
86% 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
86% match
Loading thumbnail…

Stylized Bar Chart

This example demonstrates a stylized bar chart built with React and D3.js v5. It creates an array of five fruit objects using D3’s `range` function, each initialized with the type “apple.” The chart visually represents this categorical data using a custom bar layout, leveraging React’s component structure for rendering and D3’s utility APIs. The design emphasizes aesthetic styling over raw quantitative comparison, focusing on the playful presentation of identical fruit entries rather than varying magnitudes.

TThamjith Thaha
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
84% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five fruits render as colored circles in an SVG, with apples and lemons distinguished by size and color. Clicking a circle records its selection and triggers a re-render. The visualization demonstrates data joins and transitions using d3.selectAll, data binding, and transition methods, with fruits added, removed, and type-changed over timed intervals. The d3.scaleOrdinal maps fruit types to radii and colors, while React manages the click handler and state updates.

Ccathykan
84% match
Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit production from 2006 to 2015, with four series (Red Delicious apples, McIntosh apples, oranges, and pears) drawn as colored rect layers. The chart uses d3.layout.stack to transform the data, d3.time.format to parse years, and ordinal and linear scales to position the bars and axes. A legend maps colors to fruit names, and a tooltip—created as an SVG group with rect and text elements—displays the numeric value of each segment on mouseover. The SVG is rendered inside a React framework, with axes drawn using d3.svg.axis.

Aanonymous5776
83% match