DavidHierholz

@DavidHierholz·2 public vizzes

Temperature in San Francisco Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each red, semi-transparent circle represents a single car, with position determined by its horsepower and weight values on the respective axes. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the chart, loading CSV data via the `csv` function and rendering to an SVG canvas.

Mar 29, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn using D3.js v5. The face consists of a circle for the head, two eyes, rectangular eyebrows, and a smile arc. The eyebrows animate up and down over two-second intervals using D3's `.transition()` and `.attr()` methods. The application uses `d3.select` to target the SVG element and `d3.arc` to generate the mouth path based on inner and outer radii and start and end angles.

Mar 29, 2020