larsville

@larsville·2 public vizzes

Stylized Scatter Plot

A stylized scatter plot presents data from a heatmap dataset loaded via D3's `csv` function, displaying points on an SVG canvas where each circle's position maps to X and Y coordinates. The visualization uses D3 v5's `scaleLinear` and `extent` functions to compute the axes scales, while React components (`AxisBottom`, `AxisLeft`, `Marks`) render the chart structure and data points. The marks feature a semi-transparent red fill (`#cc008833`) and a native SVG `<title>` tooltip, with axis labels and ticks styled via CSS using the Poppins font.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example shows a heatmap of test results for link styling options, with points colored to reveal density patterns across X0 and Y0 coordinates. Built using the Vega-Lite API, it loads CSV data from a GitHub gist via d3.csv, then renders an SVG visualization with configurable axis styling and a tooltip handler from vega-tooltip. The visualization uses a single markPoint layer with opacity to encode overlapping data points, set to fit the window dimensions and customize fonts for readability.

Apr 26, 2020