ssd4

@ssd4·8 public vizzes

Create bar chart!

A bar chart displays population figures for ten countries, with bar length proportional to population and each bar labeled by country name. The visualization uses D3 v5’s `scaleLinear` for the x-axis population scale and `scaleBand` for the categorical y-axis country bands. Data is loaded from a CSV file via D3’s `csv` function, with population values parsed and multiplied by 1000. The SVG rendering appends rectangles directly to the canvas, using the scales to set each bar’s width and height based on the data.

Feb 12, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Feb 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

An interactive SVG face built with D3.js v5 is drawn using simple shapes, with JavaScript objects and arrays managing the facial features. The tutorial demonstrates modular code organization, separating the drawing logic into an index.js file while styling lines and highlighting states via CSS. It uses D3 selections and SVG path elements to construct the face. The example, sourced from a video walkthrough, serves as a beginner-friendly introduction to composing visualizations with D3’s declarative data-binding approach.

Feb 10, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Feb 10, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to build a simple HTML car report using SVG-free CSS styling and JavaScript modules. It renders a list of car entries, highlighting one with a red color class, while the JavaScript imports functions from separate modules to generate a report message. The code uses vanilla DOM APIs like `document.getElementById` and `textContent` to update the page, with CSS defining a monospace font and red emphasis. No visualization library or data source is demonstrated beyond the static HTML list and commented-out module imports.

Feb 10, 2020

Loading thumbnail…

Cars Report

This example displays a text-based car report, listing vehicles under a specified price threshold. It demonstrates working with JavaScript objects, arrays, and modules by fetching car data asynchronously via a Promise, filtering it, and formatting each entry with the `formatCar` and `generateReport` functions. The report renders inside an HTML `<pre>` element using vanilla JavaScript, without additional visualization libraries.

Feb 10, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtered by price and formatted into a readable list. It shows how asynchronous data retrieval works with a Promise-based `getCars` function that simulates a two-second delay before returning a JSON array of car objects. The `generateReport` module filters cars under a specified maximum price and maps each entry to a string using `formatCar`, which combines year, make, model, and price. The final output is displayed in a `<pre>` element on the page, updated via `document.getElementById` after the promise resolves.

Feb 3, 2020

Loading thumbnail…

HTML Starter

This example renders the text “Hello HTML” in the browser using a bare minimum HTML page. The body is styled with CSS to center the text and set a large font size of 13em. The page contains no external libraries or data sources, relying solely on standard HTML and inline CSS for its static display. It serves as a minimal starting point for web-based visualizations, contrasting with the React Starter version.

Feb 1, 2020