Hao2020560

@Hao2020560·4 public vizzes

Fork of HTML Starter

This fork of the HTML Starter demonstrates a minimal static web page that renders the text “Hello HTML!” using CSS for styling and JavaScript for a single DOM selection. The page’s index.html defines a styled div, while index.js calls `d3.select()` and attempts to set the color of an `h1` element that does not exist. It shows the basic structure for embedding D3.js in a plain HTML document without any data or visualization.

Aug 1, 2022

Loading thumbnail…

Smily face part I

This example renders a simple static smiley face using React and D3 v5, drawing SVG circles directly in the HTML. The face consists of a large yellow circle for the head and two smaller black circles for eyes, with no mouth or other features. The code uses plain SVG elements with hardcoded coordinates and attributes, bypassing D3's data-driven utilities. React is imported but only logs to the console, while the visual output relies entirely on static markup. The sketch includes a comment hinting at future eye-offset calculations, but no interactive or animated behavior is present.

Aug 1, 2022

Loading thumbnail…

Fork of Hello HTML

This example presents a scatter plot of the classic Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It demonstrates a decoupled React and D3 integration pattern, where a custom `useData` hook loads and parses the CSV, while a `viz` function handles scales and rendering using `d3.scaleLinear` and `d3.axisBottom`. The visualization is rendered as SVG circles with coordinated axes, showcasing scalable project structure for future complexity.

Aug 1, 2022

Loading thumbnail…

Hello HTML

This example visualizes the classic Iris flower dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. It serves as a starter template demonstrating best practices for integrating React with D3, using `select` and `join` from D3 to update SVG elements declaratively. The code features a decoupled architecture with separate modules for axes, data loading, and the main visualization logic, leveraging `scaleLinear`, `extent`, and `axisBottom` APIs to render the chart.

Aug 1, 2022