Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Jan 29, 2021

Created on Jan 29, 2021

This example visualizes the relationship between time and temperature for a week in San Francisco, plotting each observation as a circle along a time axis. The x-axis displays the day of the week, while the y-axis shows the temperature value. The chart is rendered as an SVG using React, with axes and data marks constructed from custom components. The implementation leverages d3’s `scaleTime`, `scaleLinear`, and `extent` functions for scaling and domain calculation, while data is loaded asynchronously from a CSV file using d3’s `csv` helper. Each circle includes a tooltip formatted with `timeFormat`.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This visualization shows how temperature in San Francisco varies over a week, with time plotted on the x-axis and temperature on the y-axis. The scatter plot uses a circle for each hourly measurement, with a hover tooltip displaying the day of the week. Built with React and D3 v5, it loads data from a CSV file, uses `scaleTime` and `scaleLinear` to map the data, and renders axes and marks as SVG elements.

AabhishekGNS

95% match

Loading thumbnail…

Fork of Working with time

This example visualizes temperature over time for a week in San Francisco, showing a smooth line through the data points. The chart is built with React and rendered as an SVG, using the D3.js library (d3.v5) for scales, axes, and the line generation. The line is drawn using the `line` function from D3, with the `curveNatural` method to create a natural cubic spline. The x-axis displays time formatted as abbreviated weekday names, while the y-axis shows temperature values.

TtrwMK

93% match

Loading thumbnail…

Fork of Working with Time

This scatter plot displays temperature readings over a week in San Francisco, using a time-scaled x-axis and linear y-axis. Built with React and D3 v5, the visualization applies `scaleTime` and `scaleLinear` to map data points, rendered as SVG circles with tooltips showing the abbreviated weekday. Data loads via the `csv` function from the `useData` hook, sourced from the Data Canvas Sense Your City dataset. The chart includes styled axes with tick marks, axis labels, and a responsive layout defined by explicit margins.

Hharshu532

93% match

Loading thumbnail…

Fork of Fork of Working with Time

This scatter plot shows how temperatures in San Francisco vary over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization loads data from a CSV file via the `d3.csv` function and renders SVG circles using React, with D3's `scaleTime` and `scaleLinear` managing the axes. Each circle includes a tooltip displaying the formatted date, while axis labels and ticks are generated by custom React components. The plot uses a clean, minimalist design with a Poppins font and muted colors.

RRoberto

93% match

Loading thumbnail…

Fork of Working with time

This fork of "Working with time" displays a temperature-over-time scatterplot for a week in San Francisco, with daily timestamps on the x-axis and temperature on the y-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveNatural for the trend path, and d3.csv for data loading. Axis components from d3.axis are manually recreated as functional React components, while circles with title tooltips highlight each data point.

LLawrence Liu

93% match

Loading thumbnail…

Fork of Working with Time

A line chart tracks San Francisco temperature readings over one week, with time on the x-axis and degrees on the y-axis. The visualization uses React components to render SVG axes and a d3.line path from the Data Canvas Sense Your City dataset. d3.scaleTime, d3.scaleLinear, and d3.extent handle scaling and domain computation, while d3.timeFormat labels weekdays.

SSan

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Fork of Working with Time

A scatter plot shows temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5, employing `scaleTime`, `scaleLinear`, `extent`, and `csv` to load and parse the Data Canvas Sense Your City dataset. SVG marks are rendered as circles with embedded tooltips, while `AxisBottom` and `AxisLeft` components generate tick marks. A natural curve connects the points, and the chart is styled with Poppins font and custom axis labels.

EEdgar Alves

93% match