Cola731

@Cola731·7 public vizzes

台灣歷年成人吸菸率

This interactive bar chart visualizes Taiwan’s adult smoking rates from 2004 to 2016, broken down by age group and education level. Clicking the PLAY button animates the charts annually, showing how smoking peaks shift toward older age cohorts over time. A checkbox overlays data from five years earlier for comparison. The visualization uses d3.v5 with SVG rendering, leveraging d3.scaleBand and d3.scaleLinear for axes, and employs setInterval for the animation loop. Data is loaded from a remote CSV via d3.csv.

Jan 14, 2021

Loading thumbnail…

Scatter plots

This interactive scatter plot visualizes the Iris flower dataset, displaying sepal and petal measurements as colored circles representing three species. Users select which quantitative attributes appear on the X and Y axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, d3.axisBottom and d3.axisLeft for gridlines, and d3.scaleOrdinal to map species to a viridis color palette. Circles are rendered as SVG elements with opacity, and axes include rotated labels for clarity.

Dec 23, 2020

Loading thumbnail…

Parallel Coordinate

This example visualizes the Iris flower dataset using a parallel coordinate plot, showing how four numeric attributes (sepal length, sepal width, petal length, petal width) relate across three species. Each species is color-coded via a custom `class_color` function, with semi-transparent polylines drawn as SVG paths. The code uses `d3.scalePoint` for the horizontal axis positions, `d3.scaleLinear` for each vertical dimension, and `d3.axisLeft` to render tick marks. Static axes are labeled, and the visualization renders with the d3.v5 library.

Dec 12, 2020

Loading thumbnail…

Matrix

The matrix visualization combines a force-directed graph with an adjacency matrix to explore relationships in a car dataset. Users can click nodes in the force-directed layout or cells in the matrix to highlight corresponding rows and columns, revealing connections. Built with D3 v6, it uses `d3.forceSimulation`, `d3.forceLink`, and `d3.drag` for the interactive network, while the matrix uses `reorder.js` functions like `mat2graph` and `barycenter_order`. Data originates from the UCI Auto MPG dataset.

Nov 25, 2020

Loading thumbnail…

HW3

The visualization compares a node-link diagram with an adjacency matrix for the same network, rendered side-by-side. It uses D3.js v4 with a force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`) for the node-link layout, while the matrix is drawn with SVG rectangles. Users can drag nodes and zoom, with interactions highlighting links and nodes. The data comes from the `infect-dublin.edges` file, and node colors indicate class groupings.

Nov 8, 2020

Loading thumbnail…

Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset as an interactive parallel coordinate plot, using semi-transparent polylines to compare sepal length, sepal width, petal length, and petal width across three species, each assigned a distinct color. Users can drag any vertical axis horizontally to reorder the dimensions, which updates the line paths and axis positions with smooth transitions. Built with D3 v5 in a React framework, the code leverages `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line()`, and the `drag` behavior, rendering to SVG with a legend and animated reordering via `transition`.

Oct 21, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars as semi-transparent red circles. Users select which columns to map to the X and Y axes via two dropdown menus, built with D3 v5’s `select` and `selectAll` APIs. The visualization uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and an animated `transition` to reposition points when selections change.

Oct 1, 2020