katherine3849@gmail.com

@yiiichen·5 public vizzes

6

This visualization uses a streamgraph to display median house sale prices over time, broken down by property type and number of bedrooms. A dropdown menu allows the user to select which stream is sorted at the top of the graph. The stacked areas are rendered as SVG paths using `d3.area` with a `stackOffsetSilhouette` layout, and the x-axis encodes time as years with seasonal divisions. Hovering over a stream reveals a tooltip with the price for that date, calculated from the stack’s bounds. The data comes from a CSV file (`ma_lga_12345.csv`) listing sale dates and median prices.

Oct 16, 2024

Loading thumbnail…

3

This example displays a correlation matrix for the Abalone dataset, showing pairwise Pearson correlation coefficients between eight physical measurements and age (rings). Each cell is a rectangle colored by its correlation value, with a diverging color scale from blue through white to red, emphasizing strong positive and negative relationships. The visualization is rendered as an SVG using D3 v4, with axes labeling variables on both the x- and y-axes. The correlation values are precomputed in the embedded data array rather than calculated on the fly, and the code relies on standard D3 scales and SVG elements to draw the matrix and its axes.

Sep 19, 2024

Loading thumbnail…

Fork

A parallel coordinates plot displays the Iris dataset, coloring each of the 150 flower samples by species to reveal patterns across sepal and petal measurements. Users can drag and reorder the four attribute axes, rendered as sortable HTML divs, to bring distant dimensions together for easier comparison. The visualization uses D3.js scales and axes to draw polylines, with the Sortable.js library managing axis reordering. The SVG re-renders with a new axis order whenever a drag operation completes, using color to differentiate the three Iris classes.

Sep 18, 2024

Loading thumbnail…

TEST

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two of four flower measurements. Each point represents a flower, colored by species, and the chart includes a legend and labeled axes. Animated transitions move points to new positions with a staggered delay when the axes change. The visualization uses D3's `scaleLinear`, `axisBottom`, `axisLeft`, `scaleOrdinal`, and `transition` APIs, with SVG rendering and dropdown menus for selection.

Sep 8, 2024

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length in the Penguins Dataset. The D3 code uses `scaleLinear` for axis scaling, with circles positioned via `xScale` and `yScale` and rendered with configurable radius and opacity. Axis labels are applied through the `@curran/axis-labels` library, while axes themselves come from `xAxis` and `yAxis` helpers. The plot includes a gray inner rectangle as a backdrop, with margins and dimensions determined by the container’s client size.

Sep 8, 2024