aaron.chu626@gmail.com

@F84064014·8 public vizzes

VizFinal

An interactive dashboard combines a choropleth map of Taiwan with bar chart, line chart, and bubble chart views of agricultural statistics. Users select fruits, years, and data columns from dropdown menus to query a CSV dataset, while clicking counties on the map highlights them and reveals temporal trends. The visualization uses D3 version 7 with geoMercator and geoPath for map projection, axisBottom for chart axes, and transition animations for smooth updates.

Jan 12, 2023

Loading thumbnail…

spotify2

This example presents an interactive dashboard for exploring a Spotify track dataset loaded from CSV, offering linked views for bivariate analysis, distribution inspection, and feature correlation. Users select variables from dropdown menus to render a scatterplot with a linear regression line and R² value, histograms with kernel density estimates, boxplots, and a heatmap comparing Pearson, Spearman, and cosine correlations. A slider adjusts the IQR outlier threshold, affecting outlier classification across views. The visualization uses D3 v7 with SVG and animated transitions within a React framework.

Nov 21, 2022

Loading thumbnail…

Make a scatter plot

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two measured attributes (sepal length, sepal width, petal length, petal width) by selecting them from dropdown menus for the x and y axes. Each point is colored according to the iris species it belongs to, with a legend displayed in the corner. The visualization is built using React and D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader, rendering SVG circles. Users can explore how different features cluster or separate by species.

Nov 7, 2022

Loading thumbnail…

SpotifyData

This example loads a Spotify track dataset from a CSV file and renders a scatter plot using D3.js v7, which is imported via UNPKG. The visualization maps the `popularity` column to the x-axis and the `loudness` column to the y-axis, with each track represented as a red circle. The implementation uses D3’s `scaleLinear` for axis scaling, and the data is preprocessed in the main `index.js` module before being passed to the `scatter` function. The SVG output is 900 by 500 pixels.

Nov 7, 2022

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart visualizes the Iris dataset, with each vertical axis representing a flower measurement and colored lines tracking individual specimens across all four dimensions. Users can drag axes horizontally to reorder them, with connecting lines between adjacent axes updating in real time. The visualization uses D3.js v7 with React, employing `scaleLinear` for axis scaling and custom drag handlers. Data is loaded via `d3.csv`, and lines are rendered as SVG elements colored by species classification.

Oct 16, 2022

Loading thumbnail…

playground

This visualization presents a convolutional neural network architecture as a sequence of labeled boxes representing layers such as input, conv2d, maxpool, flatten, and fully connected layers, with each box annotated by its output dimensions. The design uses D3.js v7 to draw SVG rectangles and text, with utilities that generate each layer box and connecting lines. Styling for colors and geometry is defined separately, while the main script orchestrates the layout by advancing an x-coordinate between layers.

Oct 4, 2022

Loading thumbnail…

draw_tw

This interactive visualization maps Taiwan's counties, colored by a selected demographic or economic indicator from 2011 to 2021. Users can choose a metric via dropdown menus, triggering an animated bar chart that ranks counties alongside a national average line, while a line plot on the side tracks the temporal trend for the hovered county. The map is rendered using `d3.geoPath` on a TopoJSON topology, with choropleth coloring based on indicator values. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` for layout, and the line plot uses `d3.line` with a gradient stroke that changes color based on yearly increases or decreases.

Sep 26, 2022

Loading thumbnail…

Make a bar chart

This example shows a bar chart of the top 10 most populous countries, using population data from a CSV file. The visualization uses D3 v7 to create an SVG rendering, with a linear scale for population values on the x-axis and a band scale for country names on the y-axis. The code applies SVG `<rect>` elements filled with steel blue to represent each bar, and includes axis labels and tick marks with custom styling. Data is loaded via `csv()` and transformed with a multiplier before rendering.

Sep 13, 2022