sslee8778960

@sslee8778960·13 public vizzes

Cars Scatter Plot

This interactive scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars from the UCI Machine Learning Repository. Each red, semi-transparent circle represents a car, with its horizontal position determined by weight and vertical position by MPG, revealing a negative correlation between the two variables. The visualization is built using D3 version 5, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and custom SVG text elements for the title and axis labels. Data is loaded from a CSV file and rendered as SVG circles with a fixed radius of 10 pixels.

Feb 13, 2020

Loading thumbnail…

Lets make a face with D3.js!

This example constructs a cheerful cartoon face entirely from SVG shapes using D3.js v5. It shows a yellow circle head, black eyes with white irises, red cheeks, a short nose line, and two arc-based mouth segments. The code explicitly positions each shape using `svg.append`, relying on arithmetic for coordinates and the D3 `arc()` generator to form the smile. All rendering happens in SVG with a light blue background.

Feb 4, 2020

Loading thumbnail…

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Feb 3, 2020

Loading thumbnail…

Face with D3.js!

A cheerful cartoon face rendered in SVG appears on screen, built entirely with D3.js v5. The code uses `d3.select` and `d3.arc` to construct a yellow circle head, red eyes, blue rectangular eyebrows, and a purple arc-based mouth. The eyebrows animate via chained `transition()` calls, sliding inward and outward over three-second intervals. The example demonstrates composition of SVG primitives and basic animation without external data.

Feb 3, 2020

Loading thumbnail…

Lets make a face with D3.js!

A cheerful cartoon face is rendered as SVG using D3.js, composed of layered geometric shapes: a yellow circle head with black-outlined stroke, eyes, irises, cheeks, a nose line, and two mouth arcs built with d3.arc. The code uses d3.select to manipulate the SVG canvas and attributes like `attr` for positioning and styling. All facial features are positioned relative to the viewport dimensions (960x500). The mouth paths are generated via the `arc` function with specified inner and outer radii and angular ranges, demonstrating D3's utility for constructing complex shapes from simple primitives.

Feb 2, 2020

Loading thumbnail…

Let's make a face witb D3.js!

Built with D3 v5, this animation shows a cheerful yellow face constructed entirely from SVG shapes, including circular eyes, rectangular eyebrows, and a smile drawn using the `arc` function. The face is centered within an SVG canvas, and the eyebrows perform a looping vertical movement through chained `transition().duration()` calls. This example demonstrates fundamental D3 shape generation and animation techniques using selections, attribute manipulation, and the `arc` generator to create the mouth path.

Feb 2, 2020

Loading thumbnail…

Let's make a face witb D3.js!

This example uses D3.js v5 to draw a simple, stylized face within an SVG canvas. It positions a yellow circle as the head, two black circles as eyes, and a curved path as the mouth, all centered via a translated group. The code constructs the mouth using D3’s `arc` generator with specified inner and outer radii and angular range, while other shapes are created with basic SVG primitives (`circle` and `path`). The layout relies on hardcoded pixel offsets for features, and the SVG is sized at 960 by 500 pixels.

Feb 2, 2020

Loading thumbnail…

Let's make a face witb D3.js!

This example uses D3.js v5 to construct a simple face from basic SVG shapes against a red background. The page loads an empty `<svg>` element and selects it with `d3.select`, then applies a red background style to the entire SVG canvas. The code demonstrates the fundamental selection and styling methods of D3, setting up a blank canvas on which a face would be drawn. The static SVG provides a foundation for adding circles and paths to represent facial features.

Feb 1, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiley face from SVG shapes and animating its eyebrows. A yellow circle forms the head, with eyes, rectangular eyebrows, and an arc-based mouth positioned using D3 selections and attribute setters. The code uses d3.select, d3.arc, and chained transitions with .transition().duration() to move the eyebrow group up and down over two 2-second cycles. All elements are appended to an SVG container, with positioning handled via transform attributes.

Feb 1, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to build basic geometric shapes using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path rendered on an SVG canvas of 960 by 500 pixels. The code applies inline attributes like fill, stroke, stroke-width, and transform to style and position each shape, including a grouped set with yellow fill and black stroke. A purple rectangle and red circle highlight shape customization, while the stylesheet sets page margins and overflow properties.

Feb 1, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple, static HTML report listing three cars with model years and prices. The page uses a single `<h1>` heading and an unordered list to display the data. Styling is applied via an external CSS file (`styles.css`), which sets a large monospace font. The visualization relies entirely on basic HTML and CSS, with no JavaScript libraries or SVG elements involved. It demonstrates a minimal, text-based approach to presenting tabular information in a web browser.

Feb 1, 2020

Loading thumbnail…

Cars Report

This example displays a single car listing—a 2000 Honda Accord priced at $2800—in large, plain text on a webpage. The data comes from an embedded JavaScript array of five car objects, each containing year, make, model, and price. The code imports that array from `cars.js` as a JSON-parsed constant, then uses array methods `filter` and `map` to format and select entries, though the final display only shows the first car via a template literal. No external visualization libraries are used; the interface relies on basic DOM manipulation through `document.getElementById` to inject the message into a `<pre>` element.

Jan 31, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a large, centered "Hello React!" message on a plain white page. It serves as a basic starter template, showing the process of building a user interface component with the React library. The code defines a simple `App` component using JSX and mounts it to the DOM with `ReactDOM.render`. It imports React and ReactDOM directly and includes version 16.10.0 of the libraries via unpkg links in the HTML file. The styling is applied through a CSS class in the index.html file.

Jan 31, 2020