Petetoni

@Petetoni·4 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower (x-axis) and weight (y-axis) for cars, using data from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled and a title displayed. The visualization is built with D3 v5, using `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and SVG circles for rendering. Data is loaded via `csv` from a remote gist, with numeric fields parsed before rendering.

Jun 1, 2020

Loading thumbnail…

Auto MPG Summary

This visualization displays a plain-text summary of the Auto MPG dataset. The view shows the total row count, column count, and file size in kilobytes, followed by a JSON-formatted printout of the first ten records, rendered in a green monospace terminal aesthetic on a black background. The code loads the data from a GitHub-hosted CSV using D3’s `csv` function, then calculates the file size with `csvFormat`. It appends the summary lines and a pretty-printed JSON representation of the initial rows to the page body using `select` and `append`.

May 27, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example animates a smiley face composed of SVG shapes, including a yellow head, eyes, ears, nose, and a mouth, with eyebrows that rise and fall. The face is centered within an SVG canvas using D3.js’s `select` and `append` methods. The code uses `d3.arc` to generate the ear, nose, and mouth paths, while the eyebrow motion is driven by chained `transition().duration()` calls. All shapes are drawn directly with D3’s DOM manipulation, relying on the SVG rendering and animation capabilities.

May 22, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js shows animated eyebrows that move upward and downward in a looping transition. The code builds the face by appending a yellow circle for the head, two smaller circles for eyes, and a mouth path using D3's `arc` generator. Eyebrows are rectangles that animate via chained `transition().duration()` calls, shifting their y-position. The example demonstrates fundamental DOM manipulation with D3 selections and SVG attributes, using d3.select and d3.arc from the D3 v5 library.

May 21, 2020