cpmorrill@gmail.com

@morrill-c·4 public vizzes

Fork of Melting Data for Multiple Lines

This example visualizes population over time by region from a UN dataset, showing multiple lines from 1950 to 2100 using nested data. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color, with `axisBottom` and `axisLeft` for tick marks. Lines are generated via `line` with `curveBasis`, and a custom `colorLegend` function displays the categorical color scale. The code employs `nest` and `descending` to sort regions by their final population value, rendering the SVG with a multiply blend mode.

Feb 2, 2024

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with multiple colored lines representing different areas. The chart uses a time-scaled x-axis and linear y-axis, with a legend mapping colors to region names. The code relies on D3 v5 functions including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and `axisLeft`/`axisBottom`. Data is sourced from UN population estimates, melted from wide to long format via custom logic, and rendered as an SVG with blended strokes.

Feb 2, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that renders the text “Hello HTML!” in large, centered type, serving as a foundational template for HTML, CSS, and JavaScript projects. The page is built with standard HTML structure, applies styling through an embedded CSS block that sets the font size and alignment, and includes no interactive behavior. It uses plain JavaScript-free markup, with the visual result produced directly by the browser’s default rendering of the styled `<div>` element.

Jan 30, 2024

Loading thumbnail…

Fork of HTML Starter

This example displays a simple yellow circle with a black outline centered in an SVG canvas, serving as the foundation for a larger smiley face visualization. The React component renders SVG elements using JSX, specifying the circle’s position and radius relative to the viewport dimensions. The code imports the `arc` function from D3 v5, though it is not used in the current output. ReactDOM renders the `<App />` component into the `#root` div, with styling applied via CSS classes for the body and message elements.

Jan 10, 2024