SathishAanand

@SathishAanand·3 public vizzes

Fork of Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The code uses d3.csv to load the data, then applies d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line with d3.curveBasis to render a smoothed SVG path. Axis gridlines and labels are added manually, while the title and axis text use custom styling. The data originates from the Data Canvas - Sense Your City project.

May 16, 2022

Loading thumbnail…

lets make a face with d3.js!

This example renders a simple, friendly face built from SVG shapes using D3.js. A yellow circle forms the head, with circles for eyes and rectangles for eyebrows positioned relative to a central transform group. The mouth is created with the `d3.arc()` path generator, which is then animated with a `transition()` and `duration()` to move it vertically. The visualization demonstrates basic D3 selections, SVG attribute manipulation, and shape generation in a React component.

Apr 23, 2022

Loading thumbnail…

Untitled

This example shows a dynamic globe where glowing arcs trace flight paths between cities across the world. It uses D3’s force simulation to position the nodes on the sphere and Canvas’s `getImageData` to render the points and curved paths. The visualization rotates the globe continuously via `d3.timer` while the arcs animate along their routes. The underlying geographic data is drawn with `d3.geoPath` and a Natural Earth projection, all rendered on a single `<canvas>` element.

Apr 14, 2022