jwadhwa6

@jwadhwa6·3 public vizzes

Network graph

A yellow circle with two smaller black circles for eyes forms a simple face, rendered as an SVG network graph. The example uses React to construct the SVG elements, with D3 loaded via a CDN link. It demonstrates basic SVG shape creation—a large circle for the face and two offset circles for eyes—within a full-screen, marginless layout. The code highlights how to integrate React with D3 for declarative vector graphics, using inline coordinates and style properties to position and style each node.

Feb 21, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face composed of three SVG circles: a large yellow circle with a black stroke for the face and two smaller black circles for the eyes. The React component `App` returns the SVG markup directly, using JavaScript expressions within JSX curly braces to compute circle positions and dimensions relative to the viewport. The visualization demonstrates how React manages SVG rendering in the browser, with D3 loaded as a standalone library but not actively used in this static composition.

Feb 21, 2022

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. It plots time on the x-axis and temperature on the y-axis, with each city’s series drawn as a distinct colored path using D3’s `line` generator with a basis curve. The code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to structure the data, while axes and labels are rendered via `axisBottom` and `axisLeft`. The visualization is rendered as an SVG, with each city color-coded through the `schemeCategory10` palette.

Feb 21, 2022