Yifu Chen

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG elements inside an HTML page, using CSS to style page layout. It shows a circle, a rectangle, a group containing both shapes, and a blue line, all positioned within a fixed 960x500 SVG viewport. The visualization relies on native SVG tags (`circle`, `rect`, `g`, `line`) directly in the markup, with attributes like `cx`, `cy`, `r`, `fill`, and `stroke` controlling appearance. A linked stylesheet (`styles.css`) manages body margins and overflow, while inline SVG attributes handle shape-specific formatting. No JavaScript libraries are used; the example purely demonstrates static SVG rendering.

Oct 2, 2020

MOOC Certifications

This example visualizes a network of Marvel superheroes as nodes connected by links, with the force layout positioning the graph. The visualization uses the MOOC Certifications dataset, rendering each hero as an image that expands on hover and reveals text details on click. Built with D3 v3 and React, it employs `d3.layout.force` for physics-based positioning, SVG images for node representation, and smooth transitions for interactive elements. The graph loads JSON data from a remote source and uses a collapsible tree structure derived from the dataset.

Aug 13, 2020

Map with D3.js

This example renders a world map as an SVG using D3 v5 and TopoJSON. It loads country boundary data from the world-atlas dataset via `d3.json`, converts TopoJSON features to GeoJSON with `feature()`, and logs the resulting country collection to the console. The visualization itself is minimal—a blank SVG canvas sized 960 by 500 pixels—with no geographic projection or path drawing applied yet, focusing on data loading and transformation rather than visual output.

Dec 28, 2019

Bowl of Fruit - Hover to Select

Five apples appear as red circles that grow from zero radius on an SVG canvas. Hovering over a fruit turns its stroke blue, while clicking turns it black; these selections persist on a random ID. The visualization uses d3.v5's selection, transition, and merge methods to animate arrivals and removals with a one-second duration. A setTimeout sequence demonstrates the animation by removing one apple, changing another to a yellow lemon, and filtering out a third.

Dec 28, 2019

Bowl of Fruit - Click to selected

Five fruit circles transition and animate inside an SVG as apples are removed and one apple becomes a lemon. Clicking any fruit highlights it with a blue stroke, and the selection persists through data updates. Built with D3 v5, the visualization uses a data join with enter, merge, and exit selections, plus `transition().duration()` for size and position animation. Fruit type maps to color and radius via `scaleOrdinal`.

Dec 28, 2019

Bowl of Fruit

A bowl of fruit demonstrates animated data joins with D3.js. Five apples render as colored circles, then a sequence of timed transitions removes fruit, changes an apple into an orange, and filters another apple, showing enter, update, and exit selections. The code uses `scaleOrdinal` for color and size, `transition().duration()`, and custom `fruitBowl` and `render` functions, rendering SVG groups with circles and text labels. Data is generated randomly with `Math.random` IDs.

Dec 27, 2019

Bowl of Fruit

This example demonstrates a simple data-driven fruit bowl visualization where apples and oranges are rendered as colored circles with text labels. The code uses d3.scaleOrdinal to map fruit types to colors and sizes, with SVG circles and text elements animated through D3’s enter/update/exit pattern. A timed sequence of snack events (eating an apple or swapping one for an orange) triggers re-renders. The implementation imports specific functions like scaleOrdinal and range from d3, with the fruitBowl module handling the selection joins.

Dec 27, 2019

Cars Report - Yifu

This example demonstrates an asynchronous data pipeline that fetches car listings and filters them by price to generate a text report. The page initially displays “loading…” before using a Promise with `setTimeout` to simulate a two-second network delay. After retrieving the JSON data, the `generateReport` function filters cars priced above $2,000 and formats each entry using template literals from `formatCar`. The final report replaces the loading message in the HTML `<pre>` element, showcasing basic JavaScript async programming and modular exports.

Temperature in San Francisco

This line chart shows temperature readings in San Francisco over time, with a blue gradient area beneath the curve and semi-transparent circles marking each data point. The visualization uses d3.csv to load the dataset, then applies d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to screen coordinates. Axes are rendered with d3.axisBottom and d3.axisLeft, while the shaded region is generated using d3.area with a basis curve. Data comes from the Data Canvas - Sense Your City project, and the chart is drawn as an SVG with custom styling.

Yifu's World Population Dataset

This visualization shows global population growth from 1960 to 2015 using an area chart with overlaid circles for each data point. The chart displays population on the y-axis and year on the x-axis, with a steel-blue filled area and semi-transparent circles. It uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.area, d3.curveBasis, d3.axisBottom, and d3.axisLeft to render the SVG. The data comes from the Data Canvas - Sense Your City dataset. Gridlines span the plot, and axis labels clarify the variables.

Yifu's Temperature in San Francisco

This scatterplot displays time-series data of temperature readings in San Francisco, plotting each observation as a circle against a time axis. The visualization uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG circles rendered via D3’s data join. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with gridlines and labeled margins. The data comes from the Data Canvas - Sense Your City project, loaded as CSV and parsed into Date and numeric values.

Yifu's Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset. Each circle represents a car, with its position determined by the x- and y-scales derived from the data’s extent. Built with D3 v5, the SVG rendering uses `select`, `csv`, `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) to generate labeled axes with tick marks and a title. The chart displays a negative correlation, as lighter cars tend to have lower horsepower. Styling uses CSS for circle opacity, font size, and background color.

Yifu's Scatter Plot

This scatter plot displays the population of the top ten most populous countries, with each circle representing a country’s total population. The chart uses a linear scale for the x-axis and a point scale for the y-axis, with axis labels and a title. Built with D3 v5, it loads data from a CSV file using `d3.csv`, applies `scaleLinear` and `scalePoint`, and renders SVG circles via `selectAll('circle').data().enter().append()`. The data originates from the United Nations Population Prospect 2017.

Yifu's Customized Bar Chart

This horizontal bar chart displays the population of the top ten most populous countries, using data from the United Nations Population Prospect 2017. The visualization ranks countries along the y-axis, with bars extending rightward proportionally to population values. Built with D3 v5, the code uses `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements. The chart applies custom tick formatting to abbreviate population numbers, removes default axis lines, and styles the bars with a steelblue fill against a light green background.

Yifu's Customized Bar Chart

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It highlights customized D3 axes, including formatted tick labels that abbreviate large numbers, removed axis lines, and custom gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart in SVG. The population values are multiplied by 1000 from the CSV data, and a custom tick format converts billions to "B".

Smiley Face with D3.js

This example renders a static SVG smiley face—yellow circle, eyes, nose, and an arc-based mouth—centered on a 960×500 canvas. D3.js v5 selections build the shapes, while the `arc()` generator defines the mouth and nose paths. The only animation is a repeated 2-second `transition()` that moves the eyebrows up and down, demonstrating D3’s chained transitions on SVG attributes.

Dec 24, 2019

HTML Starter

This example presents a minimal HTML page that renders the text “Hello HTML” in the browser, centered with a large 13em font size. It demonstrates the fundamental structure of an HTML document using the `<!DOCTYPE html>` declaration, `<html>`, `<head>`, `<style>`, and `<body>` tags. The inline CSS sets the text alignment and font size to achieve a simple, bold visual effect. It serves as a bare-bones starting point for creating web-based visualizations or interfaces, with no external libraries or JavaScript involved.

Dec 24, 2019