stephanie0215

Spider Chart _ FIFA

This interactive visualization compares FIFA player statistics between two national teams using a spider chart and a side-by-side data grid. Users select countries and attributes via dropdown menus, with the radar path and grid values updating accordingly. Hovering over data points reveals a tooltip with exact values. The visualization uses D3 scales and line generators, React state management, and renders all marks as SVG elements. The dataset aggregates player attributes like overall rating, potential, and specific skills.

Jan 8, 2023

Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four numeric attributes (sepal length, sepal width, petal length, petal width) as vertical axes connected by colored polylines, with each line representing an individual flower and color encoding its species. Users can change which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights all lines belonging to that species while fading others. The visualization uses React state to manage attribute selections and hover interactions, while D3’s `scaleLinear`, `scaleOrdinal`, and `line` APIs handle axis scaling, color mapping, and path generation, with data loaded via `d3.csv` and rendered as SVG.

Dec 22, 2022

Track_Genre_Ranking Bar Chart

This interactive bar chart ranks the top 10 track genres by a user-selected audio attribute, such as popularity, danceability, or energy. It uses React state to manage the selected attribute and D3 v7 utilities like `csv`, `scaleBand`, `scaleLinear`, and `nest` to aggregate and sort the data from a CSV file. The visualization is rendered as SVG with custom `AxisBottom`, `AxisLeft`, and `Marks` components.

Dec 21, 2022

Spotify_Vertical Stylized Bar Chart

This visualization uses a Spotify track dataset to show the distribution of audio features and popularity across acoustic tracks. A histogram display counts tracks binned by user-selected attributes (like tempo, energy, or danceability), with bars colored in blue to represent frequency. An orange line overlay traces the average track popularity within each bin, while a small box plot on the right summarizes the overall spread of the selected attribute. The React app uses d3.histogram, scaleLinear, and scaleBand to compute and position marks, with dropdown menus for attribute and bin selection.

Nov 22, 2022

Spotify_Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes a Spotify song dataset, mapping selected audio features like danceability, energy, and popularity against each other on the X and Y axes. A color legend and dropdown menus allow users to switch the categories and attributes being compared, while hovering over legend items fades unrelated data points. The visualization is built with React and D3 v7, using SVG for rendering, and includes filtering capabilities to narrow the data by a popularity range.

Spotify_Interactive Polished Scatter Plot_two_track_genre

This interactive scatter plot explores Spotify track attributes, such as danceability, energy, and popularity, across two selectable musical genres. Users can choose attributes from dropdown menus to define the x- and y-axes, and hover over points to see the artist and track name. Circle colors encode the track genre. Built with React, the visualization uses D3 for scales, axes, and the color legend, rendering as SVG.

Comparison of different range of popularity

This interactive visualization compares musical attributes—such as danceability, energy, and tempo—across different popularity ranges using a song dataset from a CSV file. Users select a left and right popularity range via dropdown menus, and a diverging bar chart shows the average attribute values for each selection, with separate axes and color-coded bars. Built with React and D3 v7, the SVG rendering uses scales and custom axis components to display the filtered averages, allowing side-by-side comparison of how attribute profiles differ between popularity brackets.

Comparison of two different kind of track genre

This interactive visualization compares audio attributes of two track genres from a Spotify dataset. Users select genres from dropdown menus, and the view displays mirrored horizontal bar charts showing attribute averages (like danceability, energy, and tempo) side by side, with a third bar chart breaking down attribute values in detail. The D3.js v7 scales and SVG rendering handle the chart layout, while React state manages user selections and filters the CSV data, computing averages per genre to support direct comparison.

Spotify_Vertical Stylized Bar Chart

This interactive visualization explores the distribution of audio features across a Spotify tracks dataset. It displays a vertical, stylized bar chart where each bar represents the count of tracks within a specific numerical bin for a user-selected attribute, such as popularity or danceability. The chart is built with React and D3 v7, using `d3.histogram()` and `scaleLinear` to compute and map the bins. A line overlay charts the average popularity for each bin, while dropdown menus allow users to switch between attributes and adjust the number of bins. The visualization renders as SVG and includes dual axes and a color legend to simultaneously show track counts and average popularity.

Nov 15, 2022

Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements through dropdown menus that switch the X and Y axes. Points are colored by species, with a color legend that fades non-hovered points for focused comparison. Built with React and D3 v7, the visualization uses D3's `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering points as SVG circles. The code leverages React state for user selections and D3 utility functions like `csv` to load and parse the data.

Nov 8, 2022

Stylized Scatter Plot

This scatter plot uses the Iris dataset to visualize the relationship between sepal length and sepal width. The React application loads data with D3’s `csv` utility. Styled SVG circles represent individual plant samples, while custom D3 scales and tick components render the axes with a clean, Poppins-font aesthetic. Tooltips appear on hover, revealing the sepal length value for each point.

Oct 17, 2022

Fork of HTML Starter

This example visualizes the Fisher’s Iris dataset as a parallel coordinates plot. Multiple axes represent sepal and petal measurements, with each sample rendered as a polyline across the axes. The code uses d3.csv to load the data, d3.scaleLinear for each dimension’s scale, and d3.scalePoint to position axes. Lines are drawn with the d3.line generator, and axes are built with d3.axisLeft. The SVG output is styled with a green stroke and partial opacity.

Oct 13, 2022

HW1 : Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements to compare on the X and Y axes via dropdown menus. The plot displays all 150 data points, colored by species, with a legend that highlights a selected species while fading the others. Built with React and D3 v7, the visualization uses D3’s `scaleLinear` and `scaleOrdinal` to map data to coordinates and colors, and renders the chart as SVG.

HW1 : Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements by selecting different attributes from two dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal to map species to colors, and displays a color legend for the three Iris species. Built with React and D3 v7, it renders SVG circles with hover tooltips showing x-values, while React state (useState) handles the user’s menu selections to update the chart dynamically.

Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. It uses React state to track the selected axes, dynamically updating the chart when users change the X and Y dropdown menus. The visualization renders as an SVG, with each species color-coded via a `d3.scaleOrdinal` color scale, and includes a color legend to identify species. D3’s `scaleLinear` handles the continuous axes, while custom `AxisBottom` and `AxisLeft` components render the ticks.

Polished Scatter Plot with Menus and Colors

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through drop-down menus that select which attribute appears on each axis. Points are colored by species using d3.scaleOrdinal, with circles rendered as SVG marks that include tooltips showing values. Built with React and D3 v7, the visualization uses React state to manage selected attributes and re-scale axes via d3.scaleLinear, with custom axis components generating ticks and labels.

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the x- and y-axes via dropdown menus. Built with React and D3 v7, it uses `scaleLinear` for axes, renders SVG circles through a `Marks` component, and loads data with the `csv` utility. Dropdown changes update React state, re-scaling and re-rendering the plot with dynamic axis labels.

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. The React-based interface manages state for the selected X and Y axes, while D3 v7 scales map data values to SVG coordinates. Users switch between quantitative attributes like sepal length, sepal width, petal length, and petal width, with an axis label updating to reflect each selection, and a tooltip showing the precise value of each data point.

Menus with React

This example shows a pet-selection menu built with React, where choosing an option from a dropdown updates the displayed selection. The app initializes with "spider" as the selected value, and the `Dropdown` component receives options, an ID, a change handler, and the current value via props. The `onChange` event on the `<select>` element triggers `onSelectedValueChange` with the new value, updating state through React's `useState` hook. The code uses React 16.9 and ReactDOM to render the interface, with the dropdown styling controlled by CSS in the HTML file.

React Starter

This example demonstrates a minimal React application that uses ReactDOM to render a static message, “Helllo React!”, into a div with the id “root”. The code loads React and ReactDOM via unPkg CDN links within an HTML file and uses JavaScript’s `ReactDOM.render` to mount a functional component. It serves as a basic starter template for integrating React with D3-based visualizations, though the visible implementation only outputs text.

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG, with two black eyes and a curved mouth, centered on a 960 by 500 canvas. Built with React and D3 v5, the face uses `d3.arc()` to generate the mouth path, while circles for the face and eyes are defined with JSX inside the SVG. The code sets explicit positions and radii for each visual element, with the face drawn using simple SVG primitives and a transform to center the group.

Stylized Bar Chart

This stylized bar chart displays the population of ten countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization uses React state via hooks to load and manage CSV data from a GitHub gist, while D3 v7 utilities like `scaleBand` and `scaleLinear` handle the scaling. The SVG rendering includes custom axis components and tooltips that format values using D3's `format` function. The chart features a clean, modern aesthetic with Poppins typography and muted teal and gray colors.

Refactored Bar Chart

This example presents a horizontal bar chart that ranks the top ten countries by their 2020 population. It demonstrates how D3’s scale functions and React state can be combined to build a clean, interactive visualization. The chart uses a band scale for the categorical y-axis and a linear scale for the continuous x-axis. Axis tick marks and labels are generated with custom React components, while bars are drawn as SVG rectangles. Data is loaded from a remote CSV file using the D3 `csv` method and managed through React’s `useState` and `useEffect` hooks.

Axes with React & D3

This example demonstrates a bar chart with axes built using React and D3 v7. It loads UN population data from a CSV file using `d3.csv`, then renders an SVG with a linear x-axis and a banded y-axis. React hooks like `useState` and `useEffect` manage the asynchronous data loading and component state. The chart displays tick marks, rotated labels, and population values as rectangles, with all axes drawn manually using SVG line and text elements. Data is sliced to the top 10 countries and rendered with a fixed margin layout.

The Margin Convention

This example demonstrates the margin convention in data visualization by rendering a bar chart of population data for the top 10 countries from a UN Population 2019 CSV file. The chart uses D3 v7’s `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, with React state managing the asynchronous data loading via `d3.csv`. The SVG is sized to the window, and the chart is translated by fixed margin values, showing how inner plotting area dimensions are calculated from the total width and height minus margins.

Pathetic Bar chart

This example displays a bar chart of the ten most populous countries, using horizontal bars to compare 2020 population estimates. The visualization loads data from a CSV file via `d3.csv` and manages it with React state, employing `useState` and `useEffect` to trigger the asynchronous fetch. The chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders the bars as SVG `<rect>` elements. A loading message appears until the data is ready.

Iris Dataset Scatter Plots with Color Legend

This visualization displays the Iris dataset as a scatter plot of petal length versus petal width, with each of the three flower species (setosa, versicolor, virginica) distinguished by a distinct color from a D3 ordinal scale. Using D3 v7, the code loads CSV data, scales the x and y axes with `scaleLinear`, and renders circles as data points. Axes are generated with `axisBottom` and `axisLeft`, and the SVG output includes a color legend that maps class labels to specific hex color values.

Fork of Rendering Data with React & D3

This visualization displays the CSS named colors as a circular pie chart, with each color category represented by a wedge sized proportionally to its index in the dataset. The React application loads data from a CSV file containing CSS color names and their RGB hex values using D3’s `csv` function, then uses React state to manage the loading process. Each wedge’s path is generated with the D3 `arc` and `pie` APIs, creating arcs that extend from the center to the outer edge of the screen. The final SVG output is rendered using ReactDOM, which maps over the loaded data to create the colored paths.

Rendering Data with React

This visualization demonstrates a simple scatterplot-like rendering of CSS named colors, where each color is represented as a small 10x10 pixel square using its corresponding RGB hex value as the background color. The data is loaded asynchronously from a CSV file of CSS color names using D3's `csv` utility, and React's `useState` and `useEffect` hooks manage the data fetching and loading state. React's declarative JSX maps over the data array to generate the colored divs, with an SVG fallback commented out in the HTML. The program uses D3 v7 and React 16.9.0, rendering directly to the browser window via `ReactDOM.render`.

Loading Data with React and D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying dataset metrics such as file size, row count, and column count once the data arrives. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading of a CSV file from a GitHub gist via `d3.csv`, storing the parsed result in component state. While loading, a simple "Loading..." message appears, and after fetching, the `message` function formats the data summary into a large `<pre>` element. React 16.9 and D3 v7 are the primary libraries, with SVG reserved but not actively used for rendering.

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the loaded dataset in a large text element. It fetches the classic Iris dataset from a GitHub gist via `d3.csv`, then reports the file size in kilobytes, row count, and column count. The visualization also includes commented-out alternative code using the Fetch API with `async/await` and `d3.csvParse`, highlighting two approaches for handling CSV data in D3 v7 within a minimal HTML page.

Mouse Follower

A smiling face follows the mouse cursor across the full-screen React SVG canvas, with its yellow circular head, black-bordered face, and two large eyes continuously repositioning based on pointer coordinates. The component uses React hooks (`useState`, `useCallback`) to track mouse movement through the SVG's `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The visualization demonstrates state-driven rendering with React 16.9 and SVG, where the mouth and eyes remain static while the entire face translates to match the cursor's position.

Sep 27, 2022

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, ranking each nation by its population from United Nations World Population Prospects 2019 data. Using React with D3 v5, the chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the population values, rendered as SVG rectangles. The code includes custom `AxisBottom` and `AxisLeft` components that generate ticks and labels, while a `Marks` component draws each bar with a tooltip using the native SVG `<title>` element. The axes and styling are customized through CSS classes and the Poppins font.

Sep 27, 2022

Iris Scatter Plots_HW

This interactive scatter plot visualizes Fisher’s Iris dataset, letting users compare any two measured attributes (sepal/petal length and width) via dropdown menus. Points are colored by species using a ordinal scale, with axes and gridlines rendered through d3.axisBottom and d3.axisLeft. The React-driven interface updates scales, circles, and axis labels dynamically, while the SVG rendering uses d3.scaleLinear with nice extents. The code loads data via d3.csv and applies CSS opacity for overlapping points.

Sep 26, 2022

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, showing relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes via two ReactDropdown menus. The visualization is built with React and renders SVG circles using d3.scaleLinear for both axes, with custom Axis components handling tick marks and labels formatted using d3.format.

Sep 26, 2022

Scatter Plots

This scatter plot ranks the top ten most populous countries along a horizontal population axis, using a categorical vertical axis for country names. The chart encodes population values as the x-coordinate of each circle, with a linear scale that formats ticks in billions. Built with D3 v7, the visualization uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the plot, while data from a CSV file is loaded via d3's `csv` function and multiplied by 1000 to convert values to actual population counts. The SVG output is styled with CSS classes for the circular marks, axis labels, and title.

Sep 24, 2022

Custominzing Axes

This example visualizes the top 10 most populous countries using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The chart uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the bars and axes, with custom tick formatting that converts large numbers into abbreviated units. Data is loaded from a CSV file via `d3.csv`, and population values are multiplied by 1000 before plotting. The SVG output includes axis labels, a title, and styled grid lines, all defined in a separate stylesheet.

Sep 23, 2022

Making a bar chart

This example shows a horizontal bar chart of population data for the ten most populous countries, drawn as SVG rectangles scaled by population and ordered by country name. It uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to render ticks. The chart loads data from `data.csv` via `d3.csv`, converts population values to numbers, and appends the rectangles with a fixed steelblue fill.

Sep 22, 2022

Let's make a face with D3.js!

This example builds a stylized cartoon face using SVG primitives within a React framework, driven by D3 v7. D3 selections and the `arc` generator construct a yellow circular head, black eyes, and a mouth, while rectangular eyebrows animate upward and back down via chained `transition` methods. The face is centered using SVG transform attributes, and the code demonstrates basic data binding and shape creation without external data.

Sep 20, 2022