Working with Time

Working with Time

A scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` to map data domains to pixel coordinates. The `Marks` component renders circles for each data point, while the `AxisBottom` and `AxisLeft` components draw the axes. Data is loaded from a CSV file via D3's `csv` method, with timestamps parsed as `Date` objects and temperatures converted to numbers.

CCodeDuckie99

Working with Time

This interactive scatter plot visualizes temperature readings over a week-long period, using a time-based x-axis and linear temperature scale on the y-axis. Built with React and D3 v5, the visualization loads CSV data from the Data Canvas Sense Your City dataset and renders SVG circles for each measurement. The code utilizes scaleTime, scaleLinear, extent, and timeFormat APIs to handle temporal scales and date formatting, while custom React components manage axis rendering and data point marks with tooltips showing the day of the week.

NNick

Working With Time

This example shows a scatter plot of temperature readings over the course of a week, using a time-based x-axis and a linear y-axis for temperature. The data is loaded from a CSV file containing timestamps and temperatures for San Francisco, fetched via the `csv` function from `d3`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, with React components rendering the axes and circular marks. Each point includes a tooltip showing the corresponding day of the week, generated with `d3.timeFormat`.

Rrayking99

Working with Time

This scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Each orange circle represents a data point, and hovering reveals its exact timestamp and temperature. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` to map the data. SVG elements render the axes, tick marks, and labels, while the data is loaded from a CSV file and parsed with `csvParse`.

EEhtisham UL Hassan

Working with Time

This visualization displays temperature readings over time, using SVG circles to represent individual data points across a week-long period. The scatterplot employs D3.js v5 for scales and formatting, with React components rendering axes and marks. The time-based x-axis uses `d3.scaleTime()` with day-of-week labels, while the temperature y-axis uses `d3.scaleLinear()`. Data comes from a CSV file fetched via `d3.csv()` and parsed into JavaScript Date objects, with tooltips showing the formatted time on hover.

JJohanna Magdalena

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11

Working with Time

A scatter plot displays hourly temperature readings over a week, using a time-based x-axis and a linear y-axis for degrees. Built with React and D3 v5, it renders circles as SVG marks, with axes generated by custom components. The data comes from a CSV file of San Francisco temperatures, loaded via `d3.csv`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, and tooltips are provided by native SVG `<title>` elements showing formatted time values.

MMinh Luong

Working with Time

This example visualizes a week of temperature readings in San Francisco, plotting each measurement as a dot along a time-based x-axis and a temperature-based y-axis. The scatter plot uses D3’s `scaleTime` and `scaleLinear` to map data to SVG coordinates, while React components render the axes and circular marks. The data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and each circle includes a `<title>` tooltip formatted with D3’s `timeFormat` to show the specific day.

JJun Suzuki