Skip to main content
Log in
C

christina030

@christina030·8 public vizzes

Loading thumbnail…

Final Project2

This visualization displays Taiwan’s national and six-municipality demographic trends from 2010 to 2021, comparing natural increase rates against birth, death, marriage, and divorce rates. A dropdown menu lets viewers switch between regions, updating a multi-line chart rendered as SVG. The chart uses d3.scaleLinear and d3.line to draw trends, with axes generated via d3.axisLeft, d3.axisRight, and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and rates are computed by scaling raw counts against population figures.

Jan 13, 2023
Loading thumbnail…

Final project

This visualization compares population growth between Taiwan and the United States from 99 to 110 years, displaying animated bar charts that rank regions by population. The bars update dynamically each year, with the current year displayed prominently and tooltips showing exact population values on hover. The animation uses `d3.interval` to cycle through yearly data, while `d3.scaleLinear` and `d3.axisTop` handle the chart scaling and axes. The visualization also includes a separate line chart plotting population rates for Taiwan, rendered with `d3.line` and interactive circles for each data point.

Jan 12, 2023
Loading thumbnail…

Spotify Tracks Dataset

This interactive visualization explores a Spotify tracks dataset, letting users examine tracks by artist, album, and genre through a series of linked bar charts. Each chart displays tracks sorted by popularity, with dropdown menus to filter the data. Clicking a bar reveals detailed track information, including danceability, energy, and tempo. Built with Vue and D3 v5, the SVG-based charts use `scaleBand` and `scaleLinear` for axes and `select` for DOM manipulation, with a custom tooltip providing hover feedback. The dataset includes track metadata such as artist, album, and audio features.

Nov 22, 2022
Loading thumbnail…

Parallel Coordinate Plots of Iris Dataset

This visualization uses parallel coordinate plots to display the Iris dataset, with each of the four flower measurements (sepal and petal length/width) represented on separate vertical axes. The plot colors each of the 150 observations by species—setosa, versicolor, and virginica—using distinct blue, orange, and purple lines. The code employs D3 v5 functions such as `scalePoint`, `scaleLinear`, `axisLeft`, and `line` to render the SVG paths and axes. Interactive buttons on the right allow users to reorder the axis sequence by selecting and moving individual feature labels.

Nov 20, 2022
Loading thumbnail…

Scatter Plots of Iris Dataset

This interactive scatter plot visualizes the Iris dataset, showing how sepal and petal measurements separate three flower species. Users select which features appear on each axis via button panels, dynamically updating the visualization. The plot is rendered as an SVG using D3.js v5, with scales created via `scaleLinear`, axes via `axisLeft` and `axisBottom`, and species drawn as semi-transparent circles in distinct colors. Data originates from the included `iris.csv` file.

Oct 20, 2022
Loading thumbnail…

Fork of Fork of Bowl of Fruit - Hover to Select

This interactive scatterplot displays the classic Iris dataset, showing sepal length against sepal width for three flower species. A side panel of eight clickable buttons lets users select an X or Y axis variable, with selected buttons highlighted in blue. The visualization uses d3.v5's `select`, `scaleLinear`, and `axisBottom`/`axisLeft` functions to render the plot, while a custom `buttonPanel` component manages the button interactions. Data is loaded from a local CSV file, and the scatter points are animated transitions using d3's `.transition()`.

Sep 30, 2022
Loading thumbnail…

Fork of Hello VizHub2

This example demonstrates a minimal D3.js setup for displaying a message in the browser. It loads D3 v5 from UNPKG via a CDN script tag and uses the `d3.select` API to target the `#message` div and set its text content. The page structure is defined in `index.html`, while the visualization logic lives in `index.js`. It also imports a local CSS file for styling, showcasing basic module and library integration within the VizHub environment.

Sep 30, 2022
Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

A fork of the Bowl of Fruit example shows a row of five apples rendered as SVG circles that transition between states over time. Clicking a fruit selects it with a black stroke, while the dataset changes through timed updates: fruits disappear, a lemon replaces an apple, and positions shift. The visualization uses D3 v5 with `scaleOrdinal` for color and radius, plus `transition().duration()` to animate entering, updating, and exiting circles.

Sep 30, 2022