Lydia Francis

@ljfrancis·4 public vizzes

Vega-Lite API Visualization

This example visualizes automobile performance data by plotting engine power (horsepower) against model year, with color and point size encoding vehicle weight. The scatter plot uses semi-transparent circles to reveal overlapping data points, and tooltips display the car model name on hover. Built with the Vega-Lite API (vl) wrapper, the code registers both Vega and Vega-Lite libraries, loads CSV data via d3’s csv function, and renders an SVG output. Custom axis styling and font sizes are applied through a shared config object for improved readability.

Jun 19, 2024

Loading thumbnail…

D3 React Starter

This example demonstrates a minimal React and D3 integration that loads a CSV file and displays its metadata—file size, row count, and column count—as plain text. The app uses React hooks (`useState` and `useEffect`) to fetch data asynchronously via `d3.csv` from a GitHub gist URL, then formats and renders the statistics in a `<pre>` element. The code initializes a React root with `createRoot`, while D3 v7 handles the CSV parsing, showing how the two libraries can work together for data loading and display.

Jun 19, 2024

Loading thumbnail…

Fetching Data

This example demonstrates a minimal approach to fetching and parsing CSV data using D3.js. It displays a simple text summary of the downloaded file, showing the file size in kilobytes, the number of rows, and the number of columns. The visualization uses D3 version 7.9.0, specifically the `d3.csv` function to load and parse the remote CSV file, and `d3.csvFormat` to calculate its size. The data comes from a GitHub gist containing color data.

Jun 19, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates a scatter plot of the Iris dataset, visualizing petal length against sepal length with different species represented by distinct symbols. The code constructs the visualization using D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to compute scales and render axes, while `scaleOrdinal` and `symbol` generate the categorical glyphs. Data is loaded as CSV via `d3.csv`, and the plot is rendered as an SVG element into the document body, adapting to the full window size.

May 9, 2024