reo440

@reo440·9 public vizzes

Population time-series

This visualization shows population trends over time for world regions, with each region's trajectory drawn as a distinct colored line. A color legend identifies the regions, and the chart title clearly labels the relationship between population and year. The visualization uses D3 v5 APIs including `nest` for data grouping, `scaleTime` and `scaleLinear` for axes, and `line` for generating SVG paths. Data comes from UN population estimates and historical datasets processed via Promise loading. The color legend component updates with transitions, while lines use blend modes for overlapping clarity.

Sep 24, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature measurements over time from the Data Canvas Sense Your City dataset. The data is rendered as a smooth, natural curve using D3’s `line` and `curveNatural` functions, displayed as a thick teal path within an SVG. Axes are labeled “Time” and “Temperature”, with ticks styled in muted grays and a Poppins font applied throughout. The React application loads CSV data via `d3.csv`, maps timestamps and temperatures, and uses `scaleTime` and `scaleLinear` with `extent` and `nice` to set domains and ranges.

Sep 24, 2020

Loading thumbnail…

Let's Make a face with D3.js!

This example uses D3.js to draw a smiling face entirely with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The code employs ES6 imports, selections, and attribute setters to construct the face, centered within a 960x500 SVG. The eyebrows feature an animated loop using chained `transition` calls with `.duration(2000)`, moving them up and down over two seconds each way. The visualization demonstrates basic SVG composition and D3’s transition API for simple motion.

Sep 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid with varied fill and stroke styling. It demonstrates how CSS classes and inline attributes control shape appearance, including a group with a light blue fill and black stroke, plus a separate group of lines with a thick round-joined stroke. The visualization uses plain SVG markup within an HTML file, linked to an external stylesheet, and does not rely on D3 or any JavaScript libraries. The shapes are scaled uniformly via an SVG transform.

Sep 20, 2020

Loading thumbnail…

HTML Cars Report

This example displays a static, text-based report titled “Cars Report” that lists three used vehicles with model years, names, and prices. It demonstrates basic HTML and CSS rendering within VizHub, using a linked `styles.css` file to set a large monospace font and highlight the first car entry in red via a `.highlighted` class. The page does not include any JavaScript or data-processing logic; it is purely a styled HTML document.

Sep 20, 2020

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, rendering a message to the page. It uses D3 v5 loaded from UNPKG and imports the library via the ES6 module syntax. The code also shows how to import local CSS and JavaScript modules, with the HTML structure defined in index.html and the visualization logic in bundle.js.

Sep 20, 2020

Loading thumbnail…

Cars Report

This example generates a text-based report of cars from an embedded JSON dataset, filtering vehicles under $2,000 and formatting each entry with its year, make, model, and price. The code imports car data from `cars.js` and a `formatCar` utility, then uses `generateReport` to chain `filter`, `map`, and `join` operations. The resulting multiline message is written into the DOM via `document.getElementById` and rendered in an HTML `<pre>` element. Data is hardcoded in the source rather than loaded dynamically.

Sep 20, 2020

Loading thumbnail…

Cars Report

This example presents a minimal "Cars Report" page built with React, where the main content is a static HTML text message. It uses a React starter template and relies on a Rollup-generated bundle.js file to handle module bundling. The visualization itself is absent—only the plain text "Hello HTML" is displayed, with no data sources, charts, or interactive components shown in the provided code.

Sep 20, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” in large, centered type, with a console message logged on load. It demonstrates the simplest possible setup for a web-based visualization or application, using only native HTML, CSS, and JavaScript—no external libraries or frameworks. The page structure includes inline styles for typography and a script tag that writes “Hello JavaScript!” to the browser’s developer tools. This serves as a foundational starting point for more complex projects, highlighting the bare essentials needed to run code in a browser.

Sep 20, 2020