dktaylor916

@dktaylor916·9 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Jun 10, 2020

Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js (v5) to construct a simple cartoon face directly in an SVG canvas. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, with the mouth generated using D3’s arc generator with specified inner and outer radii and angle ranges. All shapes are positioned relative to the SVG’s width and height, and the styles are defined in a separate CSS file. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s selection and append methods.

Jun 9, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path, with colors applied both as inline attributes and through CSS classes. The SVG is scaled and translated using transform groups, while the `.lines` class controls stroke properties like width and color, and the path uses round line joins and caps. Rendering relies on raw SVG elements within an HTML page, styled entirely by an external stylesheet.

Jun 9, 2020

Loading thumbnail…

Let's make a face with D3.js!

Jun 9, 2020

Loading thumbnail…

Shapes with SVG

This example demonstrates how to render basic SVG shapes—specifically a circle—within a React application. The visualization displays a single circle element inside a 960x500 pixel SVG canvas. The code uses React's HTML and CSS rendering approach, with a minimal setup that loads an external stylesheet. The stylesheet applies a monospace font and increases the base font size to 2em, affecting any text content. The implementation relies on raw SVG markup directly in the React component rather than a dedicated charting library, showcasing the simplicity of embedding vector graphics in a web page.

Jun 8, 2020

Loading thumbnail…

Cars Report

This example demonstrates a data-reporting workflow for a small dataset of five used cars, showing how structured data can be transformed into a readable text summary. It begins by displaying a “Loading...” message while using a promise-based `getCars()` function to simulate an asynchronous fetch with a two-second delay. Once resolved, the `generateReport()` function filters vehicles by price and applies the `formatCar` module to convert each car object into a formatted string like “2000 Honda Accord: $2800”. The final report is rendered inside an HTML `<pre>` element, with JavaScript modules and object destructuring driving the entire process.

Jun 7, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data report that lists cars under a specified price threshold. The page initially displays a "Loading..." message, then fetches car data via a promise-based `getCars` function with a simulated two-second delay. Once resolved, the `generateReport` function filters the array and formats each car using the `formatCar` utility, outputting lines like "2000 Honda Accord: $2800" into a preformatted HTML element. The code uses native JavaScript promises, array filtering, and destructuring, with modules organized for reuse.

Jun 5, 2020

Loading thumbnail…

Cars Report

This example displays a single car make from a static dataset of five used cars, rendered as plain text on a web page. The code imports an array of car objects from a local JavaScript file and uses `document.getElementById` to update the text content of a pre-formatted element. The data is embedded as JSON and parsed with `JSON.parse`, while the React framework is referenced but not directly used in the visible logic. The visualization serves as a minimal proof of concept for loading and displaying dataset values.

Feb 3, 2020

Loading thumbnail…

Cars Report

This example displays the text “Cars Report” centered on a plain HTML page, with a fixed font-size of 13em applied via inline CSS. A separate script loads a bundled JavaScript file, which uses the DOM API `document.getElementById` to set the text content of a `<pre>` element to the string “hello world”. The visualization relies on React as its framework, though the visible code itself is minimal, showing only a basic HTML structure and a simple message assignment.

Feb 3, 2020