Skip to main content
Log in
M

Millie White

@milliewhite·12 public vizzes

Loading thumbnail…

Scatter plot - MW

This scatter plot displays the populations of the ten most populated countries, plotting each country as a circle along a point scale for country names on the y-axis and a linear scale for population on the x-axis. The circles highlight the relative magnitude of each nation’s population, with China and India appearing as the largest values. Using D3 v5, the visualization imports methods like `csv`, `scaleLinear`, `scalePoint`, and `axisLeft` to construct an SVG chart with gridlines and labeled axes. Population data comes from a local CSV file derived from the United Nations World Population Prospects.

Jan 8, 2022
Loading thumbnail…

Stylized Bar Chart - MW

This stylized bar chart displays the population of the ten most populous countries, using horizontal bars scaled with d3.scaleLinear and d3.scaleBand. The chart omits axis lines and ticks, presenting a clean, minimalist layout with steelblue rectangles and custom SVG text styling. Data is loaded from a local CSV file using d3.csv and formatted with d3.format. The visualization is rendered entirely in SVG, with axes generated via d3.axisLeft and d3.axisBottom, and includes a manually added title.

Jan 8, 2022
Loading thumbnail…

Fork of HTML Starter

This example shows a single web page displaying the text “Hello HTML!” in a large, centered font. It demonstrates the fundamental structure of an HTML document with embedded CSS for styling and does not include any JavaScript logic. The page uses the standard HTML elements `<div>`, `<style>`, and `<head>` to organize content, with the CSS `font-size` and `text-align` properties applied to the message class. It serves as a minimal starting point for web-based projects.

Jan 8, 2022
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019, with horizontal bars ordered by country name. Built with React and D3 v5, the visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, rendered as SVG rectangles with tooltips. The `csv` function loads and parses the dataset, while `format('.2s')` converts population values into abbreviated tick labels (e.g., "1.4B"). A custom font (Poppins) and a muted teal color scheme give the chart a stylized, modern appearance.

Jan 8, 2022
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populated countries in the world, using data from the UN World Population Prospects. It renders the countries on the y-axis with horizontal bars scaled by population via `d3.scaleLinear` and `d3.scaleBand`. The SVG visualization is built with d3 v5, using `d3.csv` to load the data, `d3.axisLeft` and `d3.axisBottom` for labeling, and includes a steelblue fill for each bar.

Jan 8, 2022
Loading thumbnail…

Let's make a face with D3.js! MW

A yellow smiley face drawn with SVG shapes demonstrates basic D3.js DOM manipulation and transitions. The code uses `d3.select` to build a circle, eyes, and an arc-based mouth from the `d3.arc` API. Two rectangular eyebrows animate upward and downward via chained `transition().duration()` calls, moving in a looping motion. The face is centered using a group transform, with all elements rendered in a 960 by 500 SVG canvas.

Jan 7, 2022
Loading thumbnail…

Shapes and Colors with SVG and CSS - MW

This example shows how SVG shapes, including circles, rectangles, lines, and paths, can be styled with colors, strokes, and transforms. A group with a fill and stroke applies consistent styling to its child elements, while a CSS class sets stroke width, linejoin, and linecap on the path. The drawing uses inline SVG markup within an HTML document, with a linked stylesheet controlling layout and class-based stroke properties. No JavaScript libraries are used; rendering relies entirely on native SVG and CSS.

Jan 7, 2022
Loading thumbnail…

HTML Cars Report

This example presents a simple HTML and CSS interface for a cars report, displaying three used vehicles with their prices in a bulleted list. It highlights the 2012 Nissan Leaf in red using the `.highlighted` class. The page uses a monospace font at a large size, with basic structure from `index.html` and styling from `styles.css`, and loads a bundled JavaScript file via `bundle.js`. The report is static and does not include interactive or data-driven elements.

Jan 7, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal text display that changes the message shown on the page, illustrating basic VizHub project structure. It loads D3 v5 via UNPKG and uses ES6 modules to import a message from a local file, which is then inserted into the DOM. The code includes two separate message definitions—one in the main script and one in an imported module—though only the imported one is displayed. The page uses a simple HTML div and CSS styling for centered, large text, with no data or interactive behavior.

Jan 7, 2022
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter page that renders the text “Hello D3 version 7” in the center of the browser window at a very large font size. It uses the D3 v7 library, specifically the `select` function from the `d3` module, to target the `body` element and set its text content. The page loads D3 from the unpkg CDN and runs the logic in a separate bundle.js file, with styling applied through a CSS rule that sets the body’s text alignment and font size.

Jan 7, 2022
Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of the original stylized scatter plot visualizes the Iris dataset, encoding each flower as a circle positioned by sepal length and petal length, with color distinguishing species. The plot emphasizes clustering patterns among the three species. The visualization uses d3.v5 with SVG rendering, employing linear scales for axes, an ordinal color scale with the category-10 scheme, and the d3-legend library for a color legend. The code loads CSV data via `d3.csv` and customizes axes through `d3.axisBottom` and `d3.axisLeft`.

Jan 7, 2022
Loading thumbnail…

Fork of HTML Starter

This example shows a single web page displaying the text “Hello HTML!” in a large, centered font. It demonstrates the fundamental structure of an HTML document with embedded CSS for styling and does not include any JavaScript logic. The page uses the standard HTML elements `<div>`, `<style>`, and `<head>` to organize content, with the CSS `font-size` and `text-align` properties applied to the message class. It serves as a minimal starting point for web-based projects.

Jan 7, 2022