YouSheng-Do

@YouSheng-Do·5 public vizzes

Fork of Data Visualization Homework 6: ThemeRiver

This visualization displays house property sales trends using a scatter plot, where each point represents a sales record from a CSV file, colored by property type and positioned by median house price (MA) over time. It uses D3 v5 with SVG rendering, including smooth animated transitions that move circles from the center to their final positions. The plot features axis labels, gridlines, and a categorical color legend built with `scaleOrdinal` and `schemeCategory10`. The visualization reads data from `ma_lga_12345.csv` and updates dynamically through a re-rendering function.

Nov 2, 2023

Loading thumbnail…

hw1

This interactive scatterplot displays the Iris dataset, with each flower plotted as a semi-transparent circle colored by species. Dropdown menus allow switching which quantitative variable appears on each axis, while a click triggers a staggered animation as the circles transition to their new positions. The visualization is built with D3 v5, using `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `transition().duration()`. Animated updates render in SVG.

Sep 23, 2023

Loading thumbnail…

hw1

This example displays a single, large, centered message reading “Hello HTML!” on a blank page, demonstrating fundamental web styling and structure. The visualization uses an HTML `<div>` element with a CSS class that sets the font size to 13em and centers the text horizontally. The page is built with plain HTML and CSS, with no JavaScript or external libraries involved, and the markup is minimal, consisting only of a `<head>` with embedded styles and a `<body>` containing the styled text. It serves as a basic starter for integrating HTML, CSS, and JavaScript in a React-based visualization framework.

Sep 21, 2023

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates how D3.js handles updates to a dataset by animating the addition, removal, and modification of elements. It shows a bowl of fruit represented by colored circles with labels, using D3's `select`, `range`, and `scaleOrdinal` functions. The `transition().duration(1000)` API animates radius and text changes as apples are eaten and replaced with lemons, while the SVG and g elements are created and removed through the general update pattern.

Sep 19, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to construct a smiley face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc for the mouth. The animation repeatedly moves the eyebrows up and down by chaining two `transition().duration(2000)` calls that modify the group’s `transform` attribute. The code selects the SVG element, computes its dimensions, and positions a central group before appending shape elements with fixed offsets and radius values. It relies on D3’s `select`, `arc`, and transition methods, rendered as static SVG with animated transforms.

Sep 18, 2023