x112358

@x112358·7 public vizzes

20170427直播用台灣

A weather map of Taiwan shows current conditions across cities and counties, with regions highlighted by hovering to reveal temperature ranges and weather type. The map uses SVG paths for geography and Vue.js to bind data to elements, handling mouseenter events to update a computed property that filters place data. The interface displays forecast details in a side panel, while CSS transitions provide visual feedback on hover.

Jan 13, 2021

Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Nov 25, 2020

Loading thumbnail…

node-link diagrams v.s. adjacency matrix123

This visualization compares node-link diagrams with adjacency matrices for network data. It displays a force-directed node-link diagram on the left, where nodes can be dragged, and a corresponding adjacency matrix on the right, where each cell represents a potential edge. Clicking a node in the left panel or a grid cell in the right panel highlights the corresponding link in red across both views. The code uses `d3-force` for the force simulation and `d3.select` for interactions, rendering with SVG. The data comes from a CSV file of network edges.

Nov 8, 2020

Loading thumbnail…

Iris Parallel Coordinates

A parallel coordinates chart displays the four numeric attributes of the classic Iris dataset, with each flower’s measurements drawn as a polyline across seven vertical axes. The colored lines represent the three species—setosa, versicolor, and virginica—using semi-transparent red, green, and blue strokes. Users can drag the axis labels to reorder dimensions, which triggers an animated transition of the foreground paths. The visualization uses `d3.svg.line`, `d3.svg.axis`, and the `d3.behavior.drag` API for interaction, with CSV data loaded via `d3.csv` and rendered as crisp SVG paths.

Oct 22, 2020

Loading thumbnail…

Iris Scatter Plot_0713316

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationships between four flower measurements (sepal length, sepal width, petal length, petal width). Users can select which measurements appear on the x- and y-axes via dropdown menus, with points colored by iris species (setosa, versicolor, virginica). The visualization uses React for component state management and D3 v5 APIs including `csv` for data loading, `scaleLinear` for axis scaling, and `scaleOrdinal` for categorical coloring. Rendered as SVG with custom axes, the plot updates dynamically when users change attribute selections.

Oct 6, 2020

Loading thumbnail…

Iris Scatter Plot 0516017

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four numeric flower measurements. The visualization uses D3 v5 with SVG rendering, mapping flower species to semi-transparent red, green, and blue circles. Dropdown menus built with D3 selection methods allow users to dynamically switch which measurement appears on each axis, triggering a full re-render of the chart through the `render` function. The chart includes labeled axes, a title, and a manual legend for the three Iris species categories.

Oct 6, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting measurements like sepal and petal length against each other. Users select which features to compare via two dropdown menus, which triggers animated transitions as the circles move to their new positions. The visualization uses d3.csv to load data, d3.scaleLinear and d3.axisBottom/axisLeft to construct axes, and d3.transition for the 1-second animations, rendering points as SVG circles color-coded by iris species.

Oct 2, 2020