TimmyLu

@Tiffamy·9 public vizzes

Project

This interactive dashboard visualizes Taiwanese outbound traveler flows by country and month, using animated bar charts to show passenger volumes for specific airports or seaports. Users filter by year, transport mode (airplane or ship), and individual countries across continents, with a month slider and sorting options for distance or quantity. Built with React and D3.js, the project renders SVG bar charts that update dynamically, pulling data from a CSV file containing annual and monthly travel statistics for destinations across Asia, the Americas, Europe, and Oceania. The interface also provides a slider to scrub through months and a dropdown to sort results, enabling comparative analysis of travel patterns over time.

Jul 18, 2023

Loading thumbnail…

hw3

This visualization displays a hierarchical clustering of data from a CSV file, using a dendrogram layout to reveal the relationships between data points. The code uses reorder.js to compute the optimal leaf ordering and d3.js to render the tree structure as an SVG. The visualization also includes an interactive element where users can select nodes, triggering animated transitions that highlight the selected branches. The implementation relies on d3.v3 and reorder.js for the clustering and layout algorithms, with the final output rendered as animated SVG elements.

Nov 25, 2020

Loading thumbnail…

Globe Zoom - Animate

This interactive visualization presents a globe that users can spin and zoom into, transitioning between orthographic, Winkel, and Mercator projections. It overlays animated geo-scatterplot transitions of global meat consumption and population growth data. Built with React and D3.js v3, it uses `d3.geo.path()` for map rendering, `d3.behavior.zoom()` for interaction, and SVG marks for data points, with tooltips showing exact values.

Nov 21, 2020

Loading thumbnail…

Untitled

An interactive 3D visualization of a motion autoencoder, showing animated humanoid skeletons that transition between poses in real time. The scene renders skeletal figures with colored joint connections against a dark fogged background, with camera controls allowing orbit around the models. A web-based interface loads three ONNX models (motion VAE, target pose, and joystick) and executes them via ONNX.js with a WebGL backend, while Three.js handles the 3D scene rendering and animation loop. A dat.gui control panel provides parameter adjustment for exploring the latent motion space.

Nov 19, 2020

Loading thumbnail…

test

This example combines a force-directed node-link diagram with an adjacency matrix visualization, allowing interactive exploration of network connectivity. Clicking a node in the diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell reports the presence or absence of a link between the two nodes. The code uses d3.forceSimulation for layout, d3.zoom for panning and scaling, and SVG circles and rectangles for rendering. Data appears to be loaded from an external CSV or TSV source, and the interface supports dragging nodes and dynamically updating matrix highlights in response to selections.

Nov 8, 2020

Loading thumbnail…

Iris_Analysis

This interactive scatter plot explores the classic Iris dataset, visualizing measurements of sepal length, width, and petal length, width for three iris species. Users select which measurements to compare on the x- and y-axes via dropdown menus and a confirm button. The visualization updates with animated transitions, using D3 v5's `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs to render SVG circles colored by species. Axes and gridlines adjust automatically to the selected data ranges, and a title reflects the current comparison.

Nov 8, 2020

Loading thumbnail…

Iris_Analysis_Parallel Coordinate

This visualization displays the classic Iris dataset using a parallel coordinate plot, where each flower sample is depicted as a polyline across four axes for sepal and petal measurements. The lines are colored by species—Iris-setosa (red), Iris-versicolor (green), and Iris-virginica (blue)—and are semi-transparent to reveal overlapping patterns. Hovering over a line highlights all samples of that species while dimming others. Users can drag any axis to reorder the dimensions, with the polylines updating dynamically. The chart is built with D3 v3, using `d3.svg.line` for polylines, `d3.behavior.drag` for axis interaction, and `d3.transition` for animated updates. Data is loaded from a CSV file.

Oct 18, 2020

Loading thumbnail…

Iris_Analysis_Parallel Coordinate

This example visualizes the classic Iris dataset using a parallel coordinate plot, where each of the 150 flowers is represented as a polyline crossing four vertical axes for sepal length, sepal width, petal length, and petal width. Each species (setosa, versicolor, virginica) is color-coded red, green, or blue, with the lines drawn semi-transparent through SVG paths. The code uses d3.scale.ordinal and d3.scale.linear to map data to positions, and d3.behavior.drag enables users to reorder or reposition axes by dragging, which obviously recalculates the lines via a d3.svg.line generator.

Oct 18, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while data is loaded via `csv` from an external auto-mpg dataset. Circles are rendered as SVG elements with a steelblue fill and partial opacity, and the chart includes labeled axes and a title, all drawn within an SVG canvas sized 960 by 500 pixels.

Sep 23, 2020