mgrundell

@mgrundell·4 public vizzes

Blank Canvas

A blank, rounded rectangle fills the entire browser viewport, rendered in muted gray as a purely visual placeholder. The example demonstrates the simplest possible D3.js v5 SVG setup, drawing a single `<rect>` element that adapts to the window's dimensions. The code logs the viewport's width and height to the console, then uses D3's `select` to append the rectangle with `rx` corner radius to an empty `<svg>`. Styling via CSS fixes the body's position and hides overflow, ensuring the canvas remains static regardless of scroll or resize.

Dec 15, 2019

Loading thumbnail…

Blank Canvas

A nearly empty SVG canvas fills the entire browser viewport, containing only a single small rectangle with default black fill. The example demonstrates the most basic D3 setup: selecting the root `<svg>` element, reading the browser window’s dimensions, and setting the SVG’s width and height attributes accordingly. Using d3.select, the code appends one `<rect>` element with hardcoded width and height values, serving as a minimal starting point for further visualization development. The renderer is SVG with D3 v5, and the layout is fully responsive to the viewport size.

Dec 15, 2019

Loading thumbnail…

Multi Line

This multi-line chart displays the environmental sensor data from San Francisco over time, with the CSV data source parsed using D3's `csv` function. The visualization renders as an SVG element, with a title and a transformed group element for the chart area. The code also loads and logs additional JSON data using `json`, and demonstrates nesting data with `d3.nest()` to explore categorical dimensions, though the primary chart focuses on the time-series data from the CSV file.

Dec 8, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Each city appears as a distinct colored line, sorted by final temperature, with a legend showing city names. The visualization uses d3-scale for time and linear axes, d3-shape’s line generator with curveBasis smoothing, and d3-scaleOrdinal with schemeCategory10 for colors. Rendering employs SVG within a d3.v5 setup, including axis components and custom color legend logic.

Dec 8, 2019