Yang Shun Yu

Homework 7: Horizon Chart

This example visualizes daily average air pollution levels for six pollutants across multiple districts over a selected year. The horizon chart technique uses stacked, color-coded bands to encode value magnitudes, with the number of bands adjustable via a dropdown. It loads data from a CSV file using d3.csv, transforms and aggregates measurements by date and district, and renders SVG axes and paths using d3.scaleTime, d3.scaleLinear, and d3.axisBottom. Users switch between years and band counts through interactive HTML select elements.

Nov 5, 2023

HW1 Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three flower species. Users can dynamically switch which measurements appear on the x and y axes using dropdown menus. The visualization uses D3 scales and axes for data mapping, while React manages the component state and UI controls. Points are rendered as colored circles in SVG, with a legend indicating species assignments. The code follows the React & D3 pattern where React handles the interface and D3’s selection methods update the SVG elements.

HW01-Iris

This interactive scatterplot explores the classic Iris dataset, displaying the relationships between sepal and petal measurements. Users can select any combination of the four attributes for the X and Y axes using radio buttons, and the visualization updates accordingly. The three Iris species are distinguished by color: purple, magenta, and indigo, with a legend shown above the chart. Built with React and D3.js (d3.scaleLinear, d3.axisBottom, d3.axisLeft), the SVG plot is rendered dynamically and responds to window resizing. Data is loaded asynchronously from a CSV file via d3.csv.

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a large 13em font size and aligned via CSS. The page uses a plain HTML document with embedded CSS and JavaScript, demonstrating fundamental web rendering without external libraries or data sources. The code defines a `.message` class to control typography and layout, and the rendering relies on standard browser parsing of the HTML and CSS, not on any JavaScript execution.

TEST

A scatterplot of the classic Iris dataset displays sepal length against petal length, with each point colored according to species. The visualization uses React components for layout and legend rendering, while D3 v7 handles data loading, scaling, and SVG circle generation. Axes are drawn with d3.axisBottom and d3.axisLeft, and the color mapping uses d3.scaleOrdinal. The code demonstrates a decoupled React and D3 integration pattern suitable for scaling.

HW01-Iris

This interactive scatterplot of the classic Iris dataset allows viewers to explore relationships between sepal and petal measurements by selecting any pair of features for the x- and y-axes via radio buttons. The plot displays 150 flowers, color-coded by species, with semi-transparent circles rendered as SVG. The visualization dynamically updates using D3.js scales and axes, and it redraws responsively on window resize. Data is loaded from a CSV file, and species-specific colors are applied through CSS classes.

Fork of React & D3 Starter

This example visualizes the classic Iris dataset as a scatter plot, where users select which of the four flower measurements to display on the X and Y axes through dropdown menus, and points are colored by species. The visualization uses React for state management and component structure, while D3 v7 handles data loading, scales, axes, and SVG circle rendering. A custom `viz` function builds the chart, and D3's `scaleLinear` and `extent` are used for positioning, with `axisBottom` and `axisLeft` generating the axes.

Sep 17, 2023

Fork of Refactored Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the left axis and population values on the bottom axis. Built with React and d3.scaleBand, d3.scaleLinear, and d3.max, it loads data from the United Nations World Population Prospects 2019 CSV, parses the 2020 population column, and renders SVG rectangles via the Marks component. Axes are drawn using custom AxisBottom and AxisLeft components, forming a clean, readable bar chart.

Scatter Plot

This example visualizes the classic Iris dataset, displaying flower measurements in a scatter plot with points colored by species class. Each circle represents a single flower, positioned by its sepal and petal dimensions using D3’s `d3.scaleLinear` for x and y axes. The code loads data with `d3.csv`, appends SVG circles via `svg.selectAll` and `enter()`, and includes placeholder logic for axis rendering and hover tooltips. The visualization is rendered as an SVG within an HTML page, styled with external CSS, demonstrating basic D3 data-binding and scale patterns.

Making a Bar Chart

This example produces a bar chart using D3.js, displaying the population of ten countries. D3’s `scaleLinear` maps population values to horizontal bar widths, while `scaleBand` positions each bar vertically by country name, with `bandwidth()` setting bar height. The visualization is rendered as SVG, generated by appending rectangles within an `svg` element. Data is loaded from a local CSV file, with population values converted to numbers before the chart is drawn.

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

A D3.js visualization draws an animated smiley face using SVG shapes. The face consists of a yellow circle, two eyes, movable eyebrows, and a mouth created with the `d3.arc` path generator. Eyebrows animate vertically through chained `transition` calls, moving down and back up over two seconds each. The code imports `select` and `arc` from D3 v5 and manipulates SVG elements directly, with data from `data.csv` displayed as an accompanying table.

Shapes with SVG and CSS

This example draws a simple smiley face using SVG shapes styled with CSS. The visualization creates a large yellow circle for the face, adds two smaller black circles for eyes, and uses CSS to set page margins and a large title font size. The D3 v7 library is loaded via UNPKG, and the code imports the `select` function from `d3` to select the SVG element and append circles with attributes for radius, position, fill, and stroke.

Sep 14, 2023