drean205287

@drean205287·3 public vizzes

Iris Scatter Plot

This visualization displays monthly出入境 (immigration and emigration) passenger totals across 29 Taiwanese airports and harbors from 2015 onward, using a multi-line chart. Users toggle individual locations via checkboxes to add or remove their corresponding time-series lines, while a shared y-axis scales dynamically to the selected data range. The chart is built with D3 v5, using `d3.scaleTime` and `d3.line` for path generation, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG rendering.

Jan 13, 2021

Loading thumbnail…

Iris parallel coordinate plot

This visualization displays the classic Iris dataset as an interactive parallel coordinate plot, using D3.js v4. Each polyline represents a flower sample, colored red, green, or blue according to its species. The four axes correspond to sepal and petal length and width. Users can click and drag axis labels to reorder the dimensions, which triggers a dynamic swap of axes and updates the paths via the `d3.drag` and `path` functions. Hovering over any line highlights all flowers of that species while dimming others, using CSS transitions.

Jan 12, 2021

Loading thumbnail…

node-link diagram and adjacency matrix

This example presents a node-link diagram of the infect-dublin network alongside an adjacency matrix, with nodes colored by degree. Users can reorder the matrix by node name or degree via a dropdown. The network is rendered using `d3.forceSimulation` with link, charge, and center forces, while the matrix is drawn as SVG rectangles. The code uses D3 v4 and parses the edge list from the `infect-dublin.edges` file.

Nov 6, 2020