S

SandyWu7179290504

@SandyWu7179290504·24 public vizzes

Loading thumbnail…

Fork of Yearly Top Genre Trend and Artist with Music Signature

This interactive scatter plot explores the top 20 Spotify songs in the U.S. from 2010 to 2019, showing relationships between musical attributes like Tempo, Energy, and Loudness. Users can adjust the X and Y axes via dropdown menus, filter by year, and toggle color encoding between top genre and artist. Hovering over legend items highlights matching points, while hovering over a circle reveals the song’s title, artist, and genre. Built with React and d3.v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles for marks. Data originates from a public Spotify dataset.

Loading thumbnail…

test2

This interactive scatterplot explores the top 20 Spotify songs per year in the U.S. from 2010 to 2019, plotting musical attributes like tempo and energy against each other. Users can switch the color encoding between top genre and artist, and hover over legend items to highlight specific categories while tooltips reveal song details. The visualization uses React with D3 v5 scales for positioning and color, rendering as SVG circles with dropdown menus for axis and color selections.

Loading thumbnail…

Fork of Yearly Top Genre Trend and Artist with Music Signature

This interactive scatterplot visualizes the top 20 Spotify songs in the U.S. for each year from 2010 to 2019, letting users explore musical attributes like tempo, energy, and danceability across different genres and artists. A year slider filters songs, while dropdown menus select the x-axis, y-axis, and color encoding for artist or genre, with a hovering legend highlighting specific categories. The visualization uses D3 v5 scales for positioning and color, React for state management, and renders SVG circles with hover tooltips showing song details from the yearly_music_trend dataset.

Loading thumbnail…

HW2_example

This interactive parallel coordinate plot visualizes the Iris dataset, displaying 150 samples across four dimensions: sepal length, sepal width, petal length, and petal width. Each polyline represents a single flower, color-coded by species (setosa, versicolor, virginica) using a fixed color map. Users can drag the vertical axes to reorder dimensions, dynamically updating the line paths and axis positions with smooth transitions. Built with D3 v5 and React, the visualization uses `select`, `scalePoint`, `scaleLinear`, `line`, and `drag` APIs to render SVG paths and support the reordering interaction.

Loading thumbnail…

DV_HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with each of the 150 flowers represented as a polyline spanning four axes: sepal length, sepal width, petal length, and petal width. Lines are colored by class (setosa, versicolor, virginica) and rendered as semi-transparent SVG paths with a 0.35 opacity. Users can drag any axis horizontally to reorder the dimensions, using d3.drag and d3.line to update paths and axis positions dynamically. A legend identifies the three classes, and axis labels are added via d3.axisLeft.

Loading thumbnail…

HW2_move1

This example presents an interactive parallel coordinate plot for the Iris dataset, showing four measured attributes (sepal length, sepal width, petal length, petal width) across three flower species. Each polyline is colored by species using a scaleOrdinal mapping. Users can drag any vertical axis to reorder the dimensions; the lines and axes update live via d3.drag, while a smooth transition after release repositions everything to their new sorted order. The visualization uses D3 v5 with SVG rendering, scalePoint and scaleLinear for axes, and a legend highlighting species colors.

Loading thumbnail…

HW2_basis2

This visualization displays the Iris dataset as a parallel coordinate plot, with four axes representing sepal length, sepal width, petal length, and petal width. Each flower is drawn as a polyline, colored by species (setosa, versicolor, virginica) using a custom color mapping, with a legend indicating the classes. The code uses D3 v5’s `scalePoint` and `scaleLinear` for positioning, `line()` for generating paths, and `axisLeft` for rendering axes. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the plot is rendered as SVG with semi-transparent strokes.

Loading thumbnail…

HW2_move2

This interactive parallel coordinate plot visualizes the Iris dataset, with each polyline representing a flower sample and colored by its class (setosa, versicolor, or virginica) using d3.scale.ordinal. Users can drag any of the four axis labels to reorder dimensions, triggering smooth transitions via d3.behavior.drag and transition.attrTween. The SVG rendering uses d3.svg.line and d3.svg.axis, with background polylines in light gray and foreground strokes in class-specific colors. A legend and title are embedded in the same SVG canvas.

Loading thumbnail…

HW2_move1

This interactive parallel coordinate plot visualizes the Iris dataset, showing four measured attributes for three flower species. Users can drag any vertical axis horizontally to reorder the dimensions, with all data lines smoothly animating to reflect the new arrangement. Built with D3 v5 in React, the visualization uses SVG paths with `d3.line` and `d3.scalePoint`, while drag interactions rely on the `d3.drag` behavior. The axes re-sort via `d3.scalePoint` domain updates, and transitions use D3’s `transition` method for animated re-rendering.

Loading thumbnail…

HW2_basis1

This is an interactive parallel coordinates plot that visualizes the classic Iris dataset, showing the relationships between sepal and petal measurements. The code highlights each of the three flower species—setosa, versicolor, and virginica—using distinct colors via a d3.scale.ordinal() color scale. It renders the data as SVG line paths, with a light gray background layer for all records and a colored foreground layer for focus. Users can drag the axis labels to reorder the dimensions, an interaction implemented with d3.behavior.drag(), which reshuffles the columns and updates the paths.

Loading thumbnail…

Fork of HW1_Iris

This example shows an interactive scatter plot of the classic Iris dataset, letting users select which of four sepal and petal measurements appear on each axis. A color legend identifies the three flower species, and hovering over a species dims all non-matching points. Built with React, the visualization uses D3 v5 scales like `scaleLinear`, `scaleOrdinal`, and `extent` to map data to positions and colors, rendering SVG circles and axes, with ReactDropdown for menu controls.

Loading thumbnail…

HW1_Iris

An interactive scatterplot of Fisher's Iris dataset lets users explore relationships between sepal and petal measurements by switching the X and Y axes via dropdown menus. Species are encoded by color, with a legend that filters the displayed points on hover. The visualization is rendered as an SVG using React and D3 v5, employing D3's `scaleLinear` and `scaleOrdinal` scales for axes and color, along with D3's `extent` for domain calculation.

Loading thumbnail…

HW1_Iris

This interactive scatterplot displays the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting attributes for the x- and y-axes via ReactDropdown. Points are colored by species using d3.scaleOrdinal, with a legend that highlights one class on hover. The visualization uses React and d3.v5, rendering circles as SVG marks with d3.scaleLinear axes. Hovering over legend items filters the plotted circles’ opacity, while built-in tooltips show exact values.

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the x and y axes while coloring each point by species. The visualization includes an interactive color legend on the right side, allowing viewers to distinguish between the three iris species. Built with React and D3 v5, the chart uses d3.scaleLinear for the axes and d3.scaleOrdinal for color encoding. Native SVG elements render the circles and legend, with d3.csv loading the dataset and reusable components managing axis and mark rendering.

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris Dataset, mapping petal length and sepal width to the x- and y-axes. Each data point is rendered as an SVG circle colored by species, with a legend and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom components like `AxisBottom` and `Marks` for layout.

Loading thumbnail…

Scatter Plot with Color_ex1

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal width to the y-axis. Points are colored by species using a categorical color scale. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for color mapping. SVG circles are rendered via a `Marks` component, with hover tooltips generated using native `<title>` elements. Data is loaded asynchronously from a CSV file using D3’s `csv` function.

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The chart uses specific D3 v5 APIs: `scaleLinear` for the population axis, `scaleBand` for countries, `axisLeft` and `axisBottom` for axes, and a custom tick formatter converting values from millions to billions (e.g., `G` for `B`). The SVG rendering includes a title, an x-axis label, and gridlines created with negative tick sizes.

Loading thumbnail…

Iris Scatter Plot_test

This scatter plot visualizes the relationship between sepal width and petal width for the Iris dataset, with each circle representing an individual flower sample. The visualization uses D3 v5 and renders as an SVG. It employs `d3.scaleLinear` for both axes, `d3.extent` to determine data domains, and `d3.axisLeft` and `d3.axisBottom` for the axes with custom tick styling. Despite the README mentioning car data, the actual code uses CSV data with Iris attributes, displaying blue semi-transparent circles without color encoding by species.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each blue semi-transparent circle represents a car, with positions scaled by linear axes for both variables. The visualization is rendered as an SVG using D3 v5, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to compute domains and draw axes. Data is loaded from a CSV file and parsed into numeric values before rendering.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations’ World Population Prospects. The visualization emphasizes customized axes, with a linear scale for population and a band scale for countries, both rendered as SVG. The code relies on D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, while formatting tick labels with `format`. Population values are multiplied by 1,000, and the chart includes a title and axis label, with grid lines created via custom tick sizing.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiling face and animating its eyebrows. The code appends SVG shapes—circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth—using D3’s `select` and `append` methods. The eyebrows move via chained `transition()` calls with a two-second duration, shifting their vertical position and then returning. The scene is rendered in an SVG canvas with a 960 by 500 coordinate space, centered through a transform.

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, showing a filtered list of vehicles priced under $2,000 based on a hardcoded JSON dataset. The page initially displays "Loading......" while the app fetches car data asynchronously via a Promise-based `getCars` function with a simulated 2-second delay. It uses modern ES module imports (`import`/`export`) to separate car formatting, report generation, and data retrieval logic, with D3 version 6 referenced in the README. The final report renders as plain text in an HTML `<pre>` element using vanilla JavaScript.

Loading thumbnail…

Cars Report_example

This example demonstrates a JavaScript module pipeline that loads car inventory data from an embedded JSON string and filters it by price. The page initially displays “Loading…” while `getCars()` waits two seconds before resolving the parsed array, then `generateReport(cars, 2000)` filters for cars under $2,000 and formats each entry using `formatCar` to produce a text report. The final output, rendered in a large `<pre>` element, lists affordable cars like the 2009 Ford F150 and 2003 Honda Pilot, and also includes a YouTube tutorial embedded in the README.

Loading thumbnail…

Fork of Scatter Plot with Color Legend_ex1

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each point colored by species and a corresponding color legend. The visualization is built using React and D3 v5, leveraging d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. Points are rendered as SVG circles, with axes and legend drawn via custom React components. Hovering reveals a tooltip showing the petal length value.