Irene-zou

@Irene-zou·8 public vizzes

Fork of Fork of Stylized Line Chart

This visualization displays the weekly temperature variation in San Francisco over time, using a smooth, stylized line chart with a natural curve. The chart renders as an SVG through React components, with time on the x-axis and temperature on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and `extent` for domain scaling. Data comes from the Data Canvas Sense Your City dataset loaded via `d3.csv`, with axis ticks formatted using `timeFormat` and labeled “Time” and “Temperature.”

Mar 22, 2021

Loading thumbnail…

Fork of Working with Time

A fork of the Working with Time example, this visualization renders a scatter plot of the Data Canvas Sense Your City temperature dataset as a time series. Using React with D3 v5, the code employs `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates, with `AxisBottom`, `AxisLeft`, and `Marks` components drawing axes and data points. A CSV loaded via `d3.csv` provides the data, and each circle includes a `<title>` tooltip formatted with `timeFormat`. The visualization presents weekly temperature readings across the x-axis and temperature values on the y-axis.

Mar 22, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization uses React to render SVG circles positioned with D3’s `scaleLinear` and `extent` functions, while axis components generate ticks via `xScale.ticks()`. The code relies on `d3.csv` to load data from a GitHub gist, applies a custom tick formatter using D3’s `format` for compact notation, and styles marks with a fixed teal fill and a `title` element for tooltips.

Mar 22, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a smooth, stylized line chart of weekly temperature measurements from the Data Canvas Sense Your City dataset in San Francisco, with time on the x-axis and temperature on the y-axis. Built with React and SVG, it uses d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveNatural for the curved path, and custom React components for the axes. The chart omits individual data-point circles, instead rendering a single thick teal path with labeled axes and tick marks, styled via the Poppins font and CSS classes.

Mar 22, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSS Named Colors dataset loaded from a CSV file. It uses D3.js version 5's `d3.csv` method to fetch and parse the remote data, then renders the file size, row count, and column count in a large text element. The code also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`, demonstrating different approaches to CSV loading.

Mar 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face as an SVG using React and D3. It draws a yellow circular face with a black stroke, two black eyes, and a mouth arc, all positioned relative to the window’s center. The visualization uses React function components with JSX to create SVG elements, and the D3 `arc` generator to compute the mouth’s path. All shapes are defined with fixed pixel offsets and radii, adapting to the browser viewport size.

Mar 22, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, with a yellow circle for the head, two smaller circles for eyes, and a comment noting that a mouth is missing. The code imports React and ReactDOM, then renders a static SVG containing three circles with fixed coordinates, stroke, and fill attributes. The rendering approach is direct SVG markup embedded in an HTML file, with React included via CDN scripts. The visualization demonstrates basic shape composition and layout, though it does not yet implement the full face described in the project title.

Mar 21, 2021

Loading thumbnail…

smily face part i

This visualization displays a simple smiley face composed of three circles: one large yellow circle with a black outline for the face, and two smaller circles without fill for the eyes. The SVG (Scalable Vector Graphics) markup defines the canvas at 960 by 500 pixels, with the face centered at coordinates (480, 250) and a radius of 245 pixels. The eyes are positioned symmetrically at x-coordinates 350 and 600, both with a radius of 50. The code uses basic SVG elements (`<circle>`, `fill`, `stroke`, `stroke-width`) directly within an HTML page.

Mar 21, 2021