Zhou180

@Zhou180·7 public vizzes

Realtime Orderbook

This example visualizes a real-time order book for cryptocurrency pairs, displaying bid and ask depth as an interactive SVG chart. It uses D3.js (v5) to render cumulative price levels, with green and red areas representing bids and asks. Data streams from Binance via Socket.IO, while a REST API fetches the initial snapshot, and the chart updates dynamically with each incoming trade. Users can switch between BTCUSDT, ETHUSDT, and BNBUSDT symbols using a dropdown menu.

Jun 16, 2022

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive visualization uses parallel coordinates to explore the classic Iris flower dataset, with each of the four measurements plotted as a vertical axis. Colored lines represent individual flowers, with species indicated by distinct colors (purple, blue, and green) and a legend showing the mapping. Users can drag axes to reorder dimensions, while hovering over a line highlights all flowers of that species and dims others. The code uses d3.scale.ordinal, d3.svg.axis, d3.behavior.drag, and d3.svg.line with SVG rendering and transitions for smooth updates.

Jan 29, 2021

Loading thumbnail…

Fork of Force Directed Graph

This example displays a force-directed graph of 410 nodes with 5 color-coded groups, alongside an adjacency matrix visualization rendered as a separate SVG. The force layout uses `d3.forceSimulation` with link, charge, and center forces, while nodes are draggable and the view supports zooming. The adjacency matrix is built with `d3.scaleBand` axes and colored rects reflecting node groups. Both visualizations update together, with node IDs matching between the graph and matrix.

Jan 27, 2021

Loading thumbnail…

Iris Parallel Coordinate Plots

This visualization uses parallel coordinate plots to display the Iris dataset, with each axis representing a measured attribute and each polyline encoding one specimen’s values. Hovering over a line highlights all specimens of that species while dimming others, using color-coded strokes for the three classes. The implementation relies on D3 v3 APIs such as `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.line`, with animated transitions for reordering axes and a brushing extent. Data is loaded via `d3.csv` from a remote source, and the SVG rendering includes interactive mouseover events and a legend.

Jan 26, 2021

Loading thumbnail…

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

Jan 26, 2021

Loading thumbnail…

Iris

This example visualizes the classic Iris dataset as a scatter plot, with dropdown menus that allow the user to select which of the four flower measurements appears on the x-axis and y-axis. Clicking the confirmation button updates the chart, recalculating the linear scales and redrawing the circles. The SVG rendering is built with React and D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Points are colored by species (red, green, blue) and the chart includes labeled axes and gridlines.

Nov 29, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data as concentric arcs, with click interactions drilling into nested levels and animating transitions via `d3.transition` and `attrTween`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color encoding. Data comes from the `@observablehq/flare` module requiring the Observable standard library. Labels rotate and fade based on arc visibility, and the visualization loads data asynchronously using `d3.csv` fetches.

Nov 29, 2020