Working with Time

Working with Time

This visualization shows a week of temperature readings in San Francisco as a smooth line chart, with points marking each hourly measurement. The time axis uses a time scale and formats tick labels as abbreviated weekday names. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and custom `AxisBottom` and `AxisLeft` components to render the SVG. Data comes from the Data Canvas Sense Your City API, loaded via `csv`, with tooltips on points displaying the formatted timestamp.

Jjiro2017

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 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 shows how temperature varies over time, plotting weekly temperature measurements as a connected line with individual data points. The chart uses D3 scaleTime and scaleLinear to map timestamps and temperatures to SVG coordinates, with tooltips revealing the day of the week for each point. React manages the component state and rendering, while D3’s csv loader fetches the San Francisco temperature dataset. The marks component applies D3’s curveNatural interpolation to create a smooth line between observations, and the custom axis components generate the time-based tick labels.

Ssxtnxy

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

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 the change in temperature over the course of a week in San Francisco, using a line of circular marks along a time-series scatter plot. The React-based application uses D3 v5 utilities like `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates. Data is loaded from a CSV file via `csv`, with the x-axis formatted to show abbreviated day names using `timeFormat`. The custom SVG components (`AxisBottom`, `AxisLeft`, and `Marks`) render gridlines, axis labels, and tooltips that display the day on hover.

NNikhil Reddy Manda

Working with Time

This visualization displays a week of San Francisco temperature data as a smooth time series line chart. The chart uses a React front end to render SVG elements, with D3 v5 providing the scales (`scaleTime`, `scaleLinear`) and the `line` and `curveNatural` generators for the path. Temperature readings from the CSV dataset are plotted against time on the x-axis, with formatted tick labels showing the day of the week. The code reveals the underlying data loading through `csv` and a custom `useData` hook that parses timestamps and numeric values.

Hhuashe418