jiangruofan

@jiangruofan·4 public vizzes

3 scatter plot

Three scatter plots display the classic Iris dataset, mapping petal length against sepal width for all 150 flowers. Each plot renders the same data as an SVG of teal circles with axes labeled accordingly. Users can brush a rectangular region on any plot to filter the visible points; the selection is immediately applied across all three charts, showing how the filtered subset appears in each view. The implementation uses React with D3 v5, employing `scaleLinear`, `extent`, and `brush` for scaling and interactive selection, with data loaded via `csv` from a GitHub gist.

Apr 25, 2022

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a geographic bubble map with a time-series bar chart, linked through interactive brushing. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render world landmasses, with circle size encoding total dead and missing migrants. Brushing the histogram filters map points by reported date. Data comes from the Missing Migrants Project CSV, rendered via React with D3 v5, including `scaleSqrt`, `scaleTime`, `histogram`, and `brushX`.

Apr 24, 2022

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width and coloring each point by species. Hovering over a species in the color legend filters the visible marks to that category while dimming the rest, implemented through React state and mouse events. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading, with all elements rendered as SVG within a React component structure.

Mar 23, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes temperature trends over time as a smooth line chart. The visualization uses the Data Canvas Sense Your City dataset, plotting timestamp against temperature with a natural cubic spline curve to connect data points. Built with React and D3.v5, the code leverages D3's `scaleTime`, `scaleLinear`, and `line` APIs to construct the axes and path, while SVG renders the final output. The chart is styled with a Poppins font and a teal color scheme, with axis ticks and labels formatted for clarity.

Mar 21, 2022