wusushi

@wusushi·9 public vizzes

Iris Parallel Coordinate Plots

This interactive parallel coordinate plot visualizes the Iris flower dataset, displaying four measurements (sepal length, sepal width, petal length, petal width) as vertical axes with polylines colored by species. Users can drag any axis to reorder the dimensions, which immediately redraws the paths and scales. Built with D3 v4 (d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.drag), the SVG rendering uses data from iris.csv, with distinct colors for Iris-setosa, Iris-versicolor, and Iris-virginica.

Jan 3, 2021

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, comparing measurements of sepal length, sepal width, petal length, and petal width across three iris species. Users select axes via dropdown menus, and the chart updates its scales, labels, and title dynamically. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `d3.schemeSet1` to color points by species. Each update removes the previous SVG group and re-renders the plot from the CSV data, with circles drawn at a 10-pixel radius and partial opacity.

Jan 2, 2021

Loading thumbnail…

Final ProjectV2

This interactive visualization displays average housing prices across Taiwanese counties from 2012 to 2020. Users click on a map of Taiwan rendered as SVG paths to select regions, which adds corresponding line charts to a time-series graph. The visualization uses D3 v5 for scales, axes, and line generation, with Vue and jQuery handling user interaction and state updates. Historical housing data is loaded from a GitHub-hosted JSON file, and each selected county appears as a colored trend line with a label in the right margin.

Dec 20, 2020

Loading thumbnail…

Multiple Line Chart with ToolTip

This example presents a multiple line chart that tracks sales quantity, total revenue, and total profit across four daily time periods (morning, noon, evening, late night). It uses React with D3 v4 to render an SVG visualization where each metric is drawn as a separate colored line. A hover interaction with an overlay rectangle and a vertical dashed line enables tooltips, displaying precise values for each data point at the cursor position. The chart uses d3.axisBottom and d3.axisLeft for scales, plus d3.bisect for date lookup, with data embedded directly in the JavaScript.

Dec 20, 2020

Loading thumbnail…

Multiple Line Chart with ToolTipV2

This example shows how state populations in California, Michigan, and Texas changed from 1910 to 2010 using a multiple line chart with color-coded lines and a legend. The visualization also provides an interactive tooltip that appears on mouse movement, displaying the exact year and population value for each state. It uses D3 v4 with SVG rendering in a React framework, leveraging `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct the chart. An invisible overlay rect captures mouse events, while a separate tooltip div and vertical guide line highlight data points.

Dec 20, 2020

Loading thumbnail…

Final Project

This visualization displays the average housing prices across Taiwan by region and year, rendered as an interactive SVG map. A slider allows users to select a year from the available data, while clicking or hovering over a region highlights it and updates a Vue-powered display to show the selected county and year. The project uses D3.js (v6) for the slider and map interactions, Vue 2 for the dynamic text updates, and jQuery for handling mouse events. Data is loaded asynchronously from a remote JSON file containing aggregated price statistics.

Dec 14, 2020

Loading thumbnail…

Face With D3.js

A yellow face with black eyes and eyebrows is drawn in the center of a red SVG canvas. The code uses D3 v5 to create and style the shape, then animates the eyebrows upward and back down with `transition().duration()`. The mouth is drawn using the `d3.arc()` generator. The example demonstrates basic SVG rendering with D3 selections and transitions, without loading external data.

Dec 10, 2020

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two network visualization techniques: a node-link diagram and an adjacency matrix. The node-link diagram uses a force-directed layout with draggable, zoomable nodes, while the adjacency matrix displays connections as colored cells; clicking on matrix cells highlights the corresponding links and nodes in both views. The code uses D3 v3’s `d3.layout.force`, `d3.behavior.zoom`, and SVG circles and lines, with data loaded from a space-separated dataset file.

Nov 18, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a colorful static composition. It shows circles, rectangles, lines, and paths arranged in a scaled group, with some shapes using inline fill attributes and others inheriting styles from a parent `<g>` element or a `.lines` CSS class. The rendering uses plain SVG within a React app, though the visible chart is entirely hand-coded markup rather than generated data. CSS controls stroke color, width, and path-specific styling, while SVG attributes handle positioning and transforms.

Sep 23, 2020