Seolha Lee

@seolhalee·4 public vizzes

MouseFollower+Loading data with D3

A React app displays a scatter plot of U.S. census tract data, plotting households with residents aged 60+ against total population, with color encoding for Latino population percentage and tooltips showing tract names. The visualization loads CSV data from a GitHub gist using the D3 `csv` function with asynchronous `useEffect` and `useState` hooks. The chart is rendered as an SVG via Vega-Lite API, which configures circle marks with opacity and size, while a text overlay reports the dataset's size in kilobytes, row count, and column count.

Sep 24, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from an auto-mpg CSV file, plotting engine displacement against horsepower with points colored by opacity to reveal density. It uses the Vega-Lite API to construct a scatterplot, with D3’s `csv` loader fetching the data. The chart is rendered into an SVG via Vega’s view, configured with `vl.markPoint`, `vl.x`, and `vl.y` encodings, while a custom config adjusts axis and label styling for readability. Tooltips display car names on hover.

Sep 24, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset containing CSS named colors. It displays a summary of the data, including its size in kilobytes, row count, and column count, using large text. The visualization relies on D3.js version 5, specifically the `d3.csv` function for fetching and parsing the remote CSV file. The code also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`. The parsed data is logged to the console, while the summary metrics are rendered into a `<pre>` element via the DOM's `textContent` property.

Sep 24, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A forked D3.js and React visualization renders a classic smiley face inside an SVG canvas. The face is constructed using a yellow circle with a black stroke for the head, two small circles for eyes, and a mouth formed by a D3 arc path with a specified inner radius and start/end angles. The code uses React to declaratively define SVG elements, leveraging the `arc()` function from the D3 library to generate the mouth’s path data, with dimensions and positions computed from the canvas width and height.

Sep 24, 2023