27-12-95 (@27-12-95), VizHub

Lets Make a Face with D3 Format

This example visualizes survey data on platform usage, showing the percentage distribution between Windows and iOS as a single pie chart. The chart is rendered as an SVG using D3.js version 5, with the pie layout and arc generator computing the angles and paths for each slice. Colors are assigned via d3.scaleOrdinal with the schemeCategory10 palette, and the data is bound to SVG groups using the standard data join pattern. The visualization centers the pie within an SVG canvas of 500 by 300 pixels, with the radius set to half the smallest dimension.

Mar 9, 2020

Loading thumbnail…

Lets Make a bar chart with D3 Format

This example displays a bar chart built with D3.js v5, using a small hardcoded dataset of seven numeric values. It renders both x and y axes via `d3.axisBottom()` and `d3.axisLeft()`, with linear scales (`d3.scaleLinear`) mapping the data range to SVG dimensions. The bars themselves are absent; instead, the visualization focuses on demonstrating axis generation and scaling, with the SVG container sized at 900 by 500 pixels and axes offset via `transform` attributes. The chart is authored in React, though the code relies on direct D3 DOM manipulation.

Mar 8, 2020

Loading thumbnail…

Lets Make a bar chart with D3 Format

This example shows a bar chart that visualizes a static array of seven numeric values using blue rectangular bars with red value labels. The code uses D3 v5 to create SVG rectangles and text elements, with bar dimensions and positions calculated from the dataset. Bar heights map directly to data values, while labels sit slightly above each bar. The chart uses a fixed SVG viewport of 500 by 300 pixels, with bars spaced using a computed width and translate transform.

Mar 8, 2020

Loading thumbnail…

Stylized Bar Chart

This chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning, while SVG `rect` elements render the bars with native `<title>` tooltips. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The chart includes styled axes and a teal color scheme, with population tick labels formatted in billions.

Mar 5, 2020

Loading thumbnail…

First D3

A minimal D3 example demonstrates a single SVG circle moving across a 500-by-500 canvas in a three-step animated sequence. The circle initially appears at coordinates (50,50), then transitions horizontally to (150,50), drops vertically to (150,200), and finally returns to its starting x-position. The animation uses chained `transition()` calls with a 1500-millisecond duration per step. The code builds the SVG scene using `d3.select("body").append("svg")` and `attr()`, relying on D3 v3 loaded from the d3js.org CDN within a plain HTML page.

Feb 22, 2020

Loading thumbnail…

Lets Make a Face with D3 Format

This example uses D3 v5 to render a simple cartoon face as an SVG. The face is constructed from primitive shapes—a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth—all centered within a 900x500 viewport. The code leverages D3’s `select` API to access the SVG element and `arc` to generate the mouth’s path, with positions and sizes controlled by explicitly defined numeric constants. No external data source is used; the visualization is purely procedural, built directly through D3’s imperative SVG manipulation within a React context.

Feb 21, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible starting point for a web visualization or interface using only standard HTML and CSS. The page’s body uses a CSS `text-align` property and a `font-size` of 13em to achieve the dramatic scale, with no external libraries or scripts required. It serves as a minimal baseline that can be extended with frameworks like React or data-driven tools such as D3.

Feb 19, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible starting point for a web visualization or interface using only standard HTML and CSS. The page’s body uses a CSS `text-align` property and a `font-size` of 13em to achieve the dramatic scale, with no external libraries or scripts required. It serves as a minimal baseline that can be extended with frameworks like React or data-driven tools such as D3.

Feb 19, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible starting point for a web visualization or interface using only standard HTML and CSS. The page’s body uses a CSS `text-align` property and a `font-size` of 13em to achieve the dramatic scale, with no external libraries or scripts required. It serves as a minimal baseline that can be extended with frameworks like React or data-driven tools such as D3.

Feb 19, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on a plain white page. It demonstrates the simplest possible starting point for a web visualization or interface using only standard HTML and CSS. The page’s body uses a CSS `text-align` property and a `font-size` of 13em to achieve the dramatic scale, with no external libraries or scripts required. It serves as a minimal baseline that can be extended with frameworks like React or data-driven tools such as D3.

Feb 18, 2020