Working with Time by Sidd

Working with Time

This visualization displays temperature readings over a one-week period in San Francisco, using a time-series line chart. The line connects daily data points across a time-based x-axis and a linear temperature y-axis, with styled tick marks and axis labels for readability. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for scaling, while `line` and `curveNatural` draw a smooth path through the data. The CSV data is loaded asynchronously via D3's `csv` utility and rendered as an SVG.

Nnexus1058

Working with Time

This visualization displays temperature readings over time for a week in San Francisco, using a smooth curved line to show the trend. The chart plots timestamps on the x-axis and temperature values on the y-axis, with the x-axis formatted to show abbreviated weekday labels. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` for the axes, and `line` with `curveNatural` to create the smoothed path connecting data points. The data is loaded from a CSV file using `d3.csv` and rendered as SVG.

Eekorre1001

Working with Time

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the horizontal axis and temperature on the vertical axis. The data is loaded from a CSV file using d3.csv, then rendered as an SVG through React components. The chart uses d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values, while d3.line with curveNatural generates the curved path connecting the data points. Custom axis components and a simple tooltip via SVG title elements are included.

JJohn Huang

Working with Time

This visualization displays temperature readings from San Francisco over one week, plotted as circles on a time-based x-axis and linear temperature y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the dataset, with SVG circles rendered through reusable axis and mark components. Time formatting via `timeFormat('%a')` labels the weekday ticks, while tooltips show the exact timestamp for each data point. The chart loads CSV data using `d3.csv`, with margins and labeled axes for clear temporal and temperature context.

SSam

Working with Time

This visualization shows temperature readings across a week in San Francisco as a smooth, curved line chart. Time runs along the x-axis with day labels, while temperature appears on the y-axis, both using scales from `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line` and `curveNatural`, and rendered as SVG paths within a React component. Data comes from a CSV file loaded via `d3.csv`, with axes built by custom React components that map ticks using D3's scale methods.

Cchamce

Working with Time

A line chart displays temperature readings over the course of a week in San Francisco, using a smooth curved path to emphasize trends. The visualization employs React to render SVG elements, with D3 v5 scales (scaleTime and scaleLinear) mapping timestamps and temperatures, while reusable axis components generate tick marks. Data is loaded asynchronously via d3.csv from an external URL, and the brush-free chart includes hover tooltips on circles for precise time values.

Ccynichole

Working with Time

Working with Time shows temperature readings from a week in San Francisco as a smooth line chart. The visualization uses React to render SVG elements, with D3's `scaleTime` and `scaleLinear` mapping timestamps and temperatures to coordinates. A natural curve connects the data points, which are marked with small circles that display tooltips via SVG `<title>` elements. The CSV data is loaded with D3's `csv` function, while custom axis components and a `line` path generator with `curveNatural` handle the plotting.

Aafcchilders

Working with time

A line chart tracks temperature in San Francisco across a week, with individual data points marked as circles. The x-axis displays time using abbreviated weekday labels, while the y-axis shows temperature values. Built with React and D3 v7, the visualization uses `scaleTime` and `scaleLinear` to map data, `line()` with `curveNatural` to draw the smoothed path, and SVG elements for rendering. Data comes from a CSV file loaded via `d3.csv`.

FFrederick O'Brien