Skip to main content
Log in
L

LiuXiangYuan

@LiuXiangYuan·5 public vizzes

Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This interactive D3 v5 visualization compares groundwater levels at two EPA monitoring wells against effective rainfall in a swamp marsh, using a main line chart with a linked brush chart and vertical bar histogram. Users brush a time range in the lower chart to filter the main view, which recomputes a dashed trendline via a least-squares regression function and displays its equation. The upper SVG rendering includes dual y-axes, a categorical color legend, and derives data from external CSV files parsed with `d3.timeParse` and plotted with `d3.line`, `d3.brushX`, and `d3.axisBottom`.

May 3, 2019
Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This example combines a line chart and bar chart to explore groundwater levels at the Bog of the Ring, comparing two observation wells against effective rainfall. A brushed time-series chart filters the main visualization, updating a least-squares regression trendline and its equation. The main chart renders blue and orange lines for well measurements with a bar chart for rainfall, using d3.brushX, d3.nest, and d3.scaleTime. Data loads from CSV files, with SVG rendering and a categorical color legend.

May 3, 2019
Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let viewers select which columns of a dataset appear on the x- and y-axes of a scatter plot. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to map numeric values, while a custom `dropdownMenu` module builds the `<select>` elements. Circles animate into position with `transition().duration(2000)` and a staggered delay, and the data comes from a CSV file containing movie attributes like budget, gross, and IMDb score.

May 3, 2019
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global population estimates for 2018, using circle size to represent population and color to indicate economic classification. The map renders countries as SVG paths via d3.geoPath with a natural Earth projection, while population circles are positioned using d3.geoCentroid and scaled with d3.scaleSqrt. The visualization employs d3.zoom for panning and zooming, d3.scaleOrdinal with schemeSpectral for the color legend, and loads data from TopoJSON world atlas and UN population CSV files. Hovering highlights countries in red.

May 3, 2019
Loading thumbnail…

HTML Cars Report

This example renders a simple face—a yellow circle with eyes, eyebrows, and an arc-shaped mouth—using D3 v5’s selection and shape APIs (`select`, `arc`). The SVG is sized from the `index.html` markup, and all elements are positioned via explicit transforms and coordinates. The data source is not a dataset but static geometric values defined in the script. Rendering uses SVG primitives (`circle`, `rect`, `path`) with styling from an external stylesheet.

Apr 27, 2019