Arthur Kozhevnik

@Gaben1025·2 public vizzes

HTML Starter

This example demonstrates how to build a scatterplot in React using D3 v4, displaying the relationship between city and highway fuel economy from a CSV file. The code creates linear scales for both axes, appends SVG circles with opacity and color encoding, and calls `d3.axisBottom` and `d3.axisLeft` to render the axes. The page also includes a basic SVG canvas with circles positioned via `selectAll`, `data`, and `join`, showing a simple data-binding pattern in plain HTML.

Feb 3, 2022

Loading thumbnail…

Lab 3 SVG and D3

This example demonstrates basic SVG shape rendering and D3 selection manipulation. It displays multiple rectangles, an ellipse, a red teardrop-like path, and a yellow star-like polygon on a blank canvas. The code uses d3.v4 to select all rectangle elements via `d3.selectAll('rect')`, applies a red fill style, and iterates through each with `.each()` to set an `r` attribute. The SVG layout uses explicit coordinates and a transform translation for the grouped central shapes, with CSS styling linked from an external stylesheet.

Feb 3, 2022