marci640

@marci640·4 public vizzes

React Starter

This example demonstrates a newspaper-style layout built with React, featuring multiple columns of text, headlines, and GIF images. The design uses a serif typographic hierarchy with Playfair Display and Droid Serif fonts, styled through CSS. React components render the page structure, while the `useData` hook uses `d3.csv` to fetch and parse the Iris dataset from a remote URL, converting string values to numbers for potential data analysis. The example showcases how React integrates with D3 for data loading and manipulation within a visually rich, editorial interface.

Jul 5, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This fork of a polished scatter plot renders the Iris Dataset as an interactive SVG visualization using React and D3 v5. Users select which flower measurements appear on the x- and y-axes via ReactDropdown menus. The plot maps numeric values (sepal length, sepal width, petal length, petal width) with `d3.scaleLinear` and `d3.extent`, styling circles with SVG titles for tooltips. The code organizes axis rendering into dedicated components, using `d3.csv` to load the data from a GitHub gist.

Jun 28, 2021

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes in D3.js animates its eyebrows upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3’s `select` and `append` methods to build circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. A chained `transition` with a two-second duration moves the eyebrow group’s `transform` attribute, showing how to animate SVG elements with D3’s transition system.

Jun 22, 2020

Loading thumbnail…

Let's make a face with D3.js

This example builds a yellow smiley face in an SVG canvas using D3.js v5 within a React framework. The face is constructed from primitive shapes: a circle for the head, two circles for the eyes, and an arc path for the mouth, all positioned relative to the center of the viewport. The code uses D3’s `select` and `append` to build the scene, and employs a `transition` on the eyebrows to animate them over ten seconds, rotating them via a CSS `transform`. The entire composition is rendered as static SVG, with the animation handled through D3’s transition system.

Jun 22, 2020