Mila Frerichs

@milafrerichs·4 public vizzes

HTML Starter

Anscombe's Quartet demonstrates how four datasets with identical statistical summaries produce drastically different scatterplots. The visualization animates between quartet members using Svelte's tweened motion store, smoothly interpolating point positions with a cubicOut easing. D3's scaleLinear maps the data coordinates to the responsive SVG viewport. The chart includes radio buttons to manually select a quartet member, and each point renders as an orange semi-transparent SVG circle with dashed axis tick marks.

Dec 16, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal Svelte application that renders a simple text greeting. The code uses the Svelte framework to create a component with a reactive `name` prop, which is displayed inside an `<h1>` element. The setup also includes a separate plain HTML file that outputs “Hello HTML” alongside a console log, demonstrating the difference between Svelte’s component-based approach and static markup. The React Starter link indicates a comparable implementation exists for React.

Dec 4, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. The code uses React and ReactDOM, specifically the `ReactDOM.render` method to mount a functional component into a root div. Styling is handled with plain CSS, setting the font size and text alignment. No data sources or visualization libraries are involved; it demonstrates the basic setup for a React-based project.

Nov 20, 2020

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example links a bubble map of migrant deaths with a brushed time-series histogram. Users can brush a date range in the histogram to filter the circles shown on the world map. The map renders SVG circles with `d3.geoNaturalEarth1` and `d3.geoPath` for country boundaries, while the histogram uses `d3.bin`, `d3.brushX`, and `d3.scaleTime` to aggregate monthly totals. Data comes from the Missing Migrants Project CSV, with interactions managed in React.

Jun 11, 2020