Homework #2: D3 Linking - CSE 578 - Fall 2023

100%

Homework #2: D3 Linking - CSE 578 - Fall 2023

✓ Published0🌍 Public

Last edited Sep 20, 2023

Created on Sep 20, 2023

This example demonstrates linked views for character frequency analysis. A user enters text, which generates a donut chart showing the distribution of vowels, consonants, and punctuation, alongside a bar chart displaying the count for a selected character. The donut chart uses D3’s `d3.pie` and `d3.arc` for its ring layout, while the bar chart uses D3 scales and SVG paths. Bootstrap styles the interface, and React scaffolds the project. All data derives from user-provided text input.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Homework #2: D3 Linking - CSE 578 - Fall 2023

This example links a donut chart and a bar chart to visualize the distribution of vowels, consonants, and punctuation in user-submitted text. Users enter text in a textarea and click “Submit text” to generate the charts. Hovering over a donut segment highlights it and displays the corresponding character count in the linked bar chart. The code uses d3.pie for the donut layout, d3.arc for the ring geometry, and SVG event handlers for interaction.

Kkalyani76

95% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

73% match

Loading thumbnail…

11.00 Visualizing Data with React & D3

An interactive donut chart displays the proportional distribution of CSS named colors, with each arc segment filled using its corresponding RGB hex value. The visualization loads color data from a remote CSV file containing named colors and their hexadecimal representations. Built with React and D3.js, the code uses `d3.pie()` to compute arc segments and `d3.arc()` to generate SVG path data, rendering the result as a single `<svg>` element centered on the canvas.

EEric Weiss

73% match

Loading thumbnail…

Donut of Rendering Data with React & D3

A donut chart displays CSS named colors as equal-sized slices, with each slice filled by its corresponding hex value. The entire donut rotates continuously, creating a slow animation driven by a React interval updating state. D3’s `arc` and `pie` utilities compute the slice geometries from CSV data loaded via `d3.csv`, while React renders the SVG paths. The visualization uses React hooks (`useState`, `useEffect`, `useRef`) to manage the animation loop and data fetching from a gist URL.

HHarr

73% match

Loading thumbnail…

Rendering data with React & D3

This example combines React with D3 to render a donut chart of CSS named colors. It loads data from a CSV file using `d3.csv` and displays each color as an equal-sized arc using `d3.pie` and `d3.arc`, with the fill set to the hex value from the dataset. React manages the component state and conditional rendering, showing a loading placeholder until the data arrives, then draws the SVG paths inside a centered `<g>` element. The visualization demonstrates a simple division of responsibilities where D3 handles data parsing and geometry while React handles the DOM updates.

CCheng Tang

73% match

Loading thumbnail…

Rendering Data w/ D3 And React

This example renders a donut-style pie chart of CSS named colors using React and D3. The code fetches CSV data via `d3.csv` and employs `d3.pie` and `d3.arc` to compute and draw the SVG paths. Each slice is filled with its corresponding color value from the dataset, with React managing state and rendering the SVG elements.

AAndres de la Garza

73% match

Loading thumbnail…

Visualizing data with React & D3

A donut chart displays the proportional distribution of CSS named colors, with each color category represented as a slice of the pie. The visualization loads tabular data from a CSV file using the `d3.csv` utility, stores it in React state via `useState` and `useEffect`, and renders each slice as an SVG path. The chart uses the `d3.pie` layout and `d3.arc` generator to compute the arc geometry, while React maps over the data to create the path elements with the color's hex value as the fill.

MMarco Malvicini

72% match

Loading thumbnail…

Visualizing Data with React and D3

This visualization displays the CSS named colors as a donut chart, with each color represented by a wedge whose fill matches the color it encodes. The data comes from a CSV file listing named colors and their hex values, loaded asynchronously via `d3.csv`. React manages the component state and rendering lifecycle, while D3’s `pie` and `arc` functions compute the angular layout and path geometry. The SVG output is generated declaratively in JSX, with React re-rendering once the CSV data arrives.

Ddmagarian

72% match