Demi Johnson

@demrjohn·8 public vizzes

loading data

This example demonstrates loading and logging data from a CSV file using D3 v5. The visualization initializes an SVG canvas with fixed dimensions and imports the `select` and `json` functions from the D3 library. Using the `json` method, the code fetches `data.csv` and logs the parsed data to the browser console. The chart itself remains empty, focusing solely on the asynchronous data-loading workflow.

Sep 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

A face built from basic geometric shapes appears on a yellow circular head with two black eyes, created entirely with D3.js v5 SVG elements. The code uses `d3.select` to append circles for the head and eyes, while the mouth is drawn with the `d3.arc` shape generator using an inner and outer radius with specified start and end angles. All elements are positioned relative to the SVG's width and height, demonstrating simple compositing of primitive shapes in a static visualization.

Sep 21, 2020

Loading thumbnail…

Let's make a face with D3.js!

A simple yellow circle face is drawn with D3.js, featuring two black eyes and an arc-based mouth. The visualization demonstrates basic SVG shape creation using D3 selections, appending circles and a path element. The mouth is generated with the `d3.arc()` generator, using specified inner and outer radii and angles to form a curved smile. The face is centered on a 960x500 SVG canvas, with eye positions offset horizontally and vertically from the center.

Sep 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and a path—can be styled using both inline attributes and CSS. It shows the interplay between explicit presentation attributes like `fill` and `stroke`, and stylesheet rules targeting classes such as `.lines` and `.lines path`. The rendering uses raw SVG elements within an HTML document, applying a `scale` transform and grouped translations to position the geometry. CSS handles stroke color, width, and line joins for the path, while inline attributes set fills on individual shapes.

Sep 21, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple HTML-based report listing three used cars with their model years and prices. It uses plain HTML list elements with one entry, the 2012 Nissan Leaf, highlighted in red through a custom CSS class. The styling relies on a global stylesheet that sets a large monospace font for the body. No JavaScript libraries or data visualization APIs are used; the entire chart is static markup and CSS styling defined in index.html and styles.css.

Sep 19, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML-based report of three used cars, each listed with its model year, name, and price. The page presents the data as a bulleted list, with the first car, the 2012 Nissan Leaf, highlighted in red to draw attention. It uses plain HTML with a linked CSS stylesheet for styling, with the body set to a large monospace font and the highlighted class applying the red text color. The rendering approach is entirely static, with no JavaScript or external data-visualization libraries involved.

Sep 19, 2020

Loading thumbnail…

HTML Cars Report

This example presents a static inventory of three used cars, listing the model year, make, and price for each vehicle. It demonstrates a minimal, unstyled HTML report achieved through a plain unordered list, with the first entry manually assigned a CSS class. The page uses no JavaScript or external libraries, relying solely on the browser’s default rendering of HTML elements and a linked stylesheet. The `styles.css` file defines a large monospace font for the entire body and applies a red text color to the `.highlighted` class, making the Nissan Leaf stand out from the other two entries.

Sep 19, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static message, “Hello React!”, centered on the page. The app component is defined inline using React’s JSX syntax and is mounted into the DOM via `ReactDOM.render`. The page loads React and ReactDOM from CDN links in `index.html`, while the core application logic resides in `index.js`. The styling is applied through a CSS rule targeting the `.message` class, showcasing a basic React setup without any data processing or interaction.

Sep 19, 2020