Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
Ggreghowe79
Last edited Mar 29, 2022
Created on Mar 29, 2022
Forked from Working with Time

This scatter plot visualizes temperature over time using the Data Canvas Sense Your City dataset, showing daily temperature readings across a week in San Francisco. The visualization uses D3 v5's scaleTime and scaleLinear to map timestamps to the x-axis and temperatures to the y-axis, with React 16 rendering the SVG output. Each data point is drawn as a circle with tooltip support via the SVG title element, while the left and bottom axes are generated programmatically through the custom AxisLeft and AxisBottom components. The code loads CSV data asynchronously using d3.csv and formats time labels with d3.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 interactive scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, focusing on a week of San Francisco weather data. The visualization maps timestamps to the x-axis and temperature values to the y-axis, with each data point rendered as an SVG circle. Built using React and D3 v5, the code leverages `scaleTime` for the temporal axis, `scaleLinear` for the temperature axis, and `extent` to compute domains. Axis components and marks are modularized into separate files, while hover tooltips display the formatted time via a native `<title>` element.

IIrull11
97% match
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes weekly temperature readings from San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization displays temperature against time, with each circle representing a temperature measurement at a specific timestamp. Built with React and D3 v5, the example uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis. The SVG rendering includes custom axis components and circle marks, with tooltips showing the day of each data point through D3's `timeFormat` function.

CCesar Varela
96% match
Loading thumbnail…

Fork of Fork of Working with Time

A scatter plot displays temperature readings over one week in San Francisco, using the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement at a specific timestamp, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.csv` for data loading. SVG circles render the marks, while native browser tooltips appear on hover via the `<title>` element.

Eeng-makumba
96% 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
96% match
Loading thumbnail…

Fork of Working with Time

This visualization presents a scatter plot of temperature readings taken hourly over a week in San Francisco, using the Data Canvas Sense Your City dataset. The code loads the data via D3’s `csv` and `scaleTime`/`scaleLinear` functions, then renders the time-series as SVG circles within a React component. Axes are built with reusable React components, and each circle includes a native `<title>` element for a tooltip displaying the formatted timestamp.

Ssivaprasadsidharth@gmail.com
96% match
Loading thumbnail…

Fork of Working with Time

This visualization presents a scatter plot of temperature readings taken hourly over a week in San Francisco, using the Data Canvas Sense Your City dataset. The code loads the data via D3’s `csv` and `scaleTime`/`scaleLinear` functions, then renders the time-series as SVG circles within a React component. Axes are built with reusable React components, and each circle includes a native `<title>` element for a tooltip displaying the formatted timestamp.

Ssivaprasadsidharth@gmail.com
96% 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
95% match
Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time using the Data Canvas Sense Your City dataset. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with each circle representing a data point. Tooltips reveal the day of the week for each point. Built with React and D3 v5, the code uses d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculations, and d3.csv for data loading. SVG circles render the marks, with custom AxisBottom and AxisLeft components generating the tick marks and labels.

TTyler Brown
95% match