Mari Roberts

@mr4909·4 public vizzes

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

Sep 15, 2020

Loading thumbnail…

Barchart

A horizontal bar chart displays each country’s population as a scaled rectangle, with Russia and India appearing largest. The data comes from a CSV file, loaded via `d3.csv`, and values are multiplied by 1000 before rendering. The SVG visualization uses `scaleLinear` for the x-axis width, `scaleBand` for the y-axis country ordering, and `selectAll` with `enter().append` to create the rectangles. Styling is minimal, with the chart filling the viewport and bars drawn in the default black color.

Sep 15, 2020

Loading thumbnail…

Lets make a face

A yellow circle with a black outline fills the center of an SVG canvas, representing a simple, abstract face. The example demonstrates basic D3.js shape creation and attribute manipulation in version 5. The code uses `d3.select` to target the SVG element, then appends a circle and sets its radius, x and y coordinates via `attr`, with hard-coded pixel values derived from the SVG's width and height attributes. Rendering is done through SVG, with the page structure and styles defined in HTML and CSS.

Sep 14, 2020

Loading thumbnail…

HTML Starter

This example displays a minimal HTML page with the text “Hello HTML” centered on a white background. The page loads without any external libraries or frameworks, relying instead on plain HTML, CSS, and JavaScript. The code includes an inline style block that sets the text size to 13em and centers the content, while a script tag logs “Hello JavaScript!” to the browser’s console. The implementation demonstrates a basic structure for a web page, with no external data or rendering libraries involved.

Sep 14, 2020