pete0707

@pete0707·8 public vizzes

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Spotify song dataset, allowing users to explore relationships between musical attributes such as valence, popularity, and danceability. Users select attributes for the X and Y axes via dropdown menus and filter data points using range sliders. The visualization updates dynamically, with points colored by musical key and a color legend that highlights specific keys on hover. Built with React and D3 v5, it uses SVG rendering with custom axes, scales, and a color legend.

Nov 23, 2022

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, displaying petal length against sepal width. Each point is colored by species, with a color legend on the right. Hovering over a legend item fades all non-matching points, highlighting only the selected species, while hovering over data points reveals their values via tooltips. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for rendering SVG marks, axes, and the interactive legend.

Nov 23, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors from a Spotify CSV file as a radial burst, with each color rendered as a wedge in a pie chart. Using React for component structure and state management, the code loads data via D3's `csv` utility and computes arc paths with `d3.arc` and `d3.pie` functions. The SVG rendering maps each color's hexadecimal value to a filled path, creating a full circle divided into equal segments.

Nov 15, 2022

Loading thumbnail…

Fork of React + D3 Viz Starter

This visualization demonstrates a blank SVG canvas with visible margin boundaries, ready for React and D3.js content. The `VizContainer` component abstracts the SVG and group elements, following the standard margin convention by translating the inner group. The code uses `ReactDOM.render` to mount the app, and shows the outer and inner rectangles as gray and light gray fills when `showMargins` is true. The example uses CDN-loaded React, ReactDOM, and D3 v6 libraries, with dimensions and margins defined as variables.

Nov 15, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from an external file. It uses the D3.js library, specifically the `d3.csv` method, to fetch the `spotify.csv` file. Upon loading, the program calculates and displays the data file size in kilobytes, the number of rows, and the number of columns within a large text element. The visualization presents this dataset summary information as simple text output, not as a graphical chart. Additionally, commented-out code shows alternative approaches using the `fetch` API with `async`/`await` and a nested promise structure.

Nov 15, 2022

Loading thumbnail…

Fork of Mouse Follower

A React-based SVG visualization demonstrates mouse tracking by rendering a filled circle that follows the cursor across a 960 by 500 viewport. The app uses React’s `useState` and `useCallback` hooks to store and update the mouse position on every `mousemove` event, setting the circle’s `cx` and `cy` attributes accordingly. The circle starts at the canvas center and moves immediately as the pointer travels, with no delay or animation. The implementation relies on React 16.9 and ReactDOM to render the SVG element directly into the DOM.

Nov 14, 2022

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot displays the Iris Dataset, showing petal length against sepal width with circular marks. Built with React and D3 v5, it renders as an SVG using `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components. The code loads data from a remote CSV via `d3.csv` and maps numeric values for the visualization. Axis labels and tick formatting use D3’s `format` function, while hover tooltips reveal precise values via the `title` element in each circle.

Nov 14, 2022

Loading thumbnail…

Viz HW1

This interactive scatterplot lets users explore the classic Iris flower dataset by switching between four numeric measurements for the x- and y-axes via dropdown menus. The visualization uses React to manage state and render SVG circles, with D3 v5 providing scales, axes, and CSV data loading. Points are color-coded by iris species, and a legend identifies the three classes. The interface includes axis labels and tick marks generated with D3’s scale API, while React’s `useState` and `useEffect` handle data fetching and attribute selection.

Nov 14, 2022