Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published0🌍 Public
Llatifiss
Last edited Sep 12, 2022
Created on Sep 12, 2022
Forked from Working with Time

This fork visualizes a week of San Francisco temperature readings from the Data Canvas Sense Your City Dataset as a scatter plot. Time runs along the horizontal axis with temperature on the vertical axis, rendered as SVG circles using React components. The code employs d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.extent for domain calculation. Native SVG title elements provide hover tooltips, while custom AxisBottom and AxisLeft React components generate the tick marks and labels.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

A scatter plot visualizes temperature readings over time for one week in San Francisco, using data from the Data Canvas Sense Your City dataset. React components render SVG circles positioned with d3.scaleTime and d3.scaleLinear, while d3.timeFormat formats weekday tick labels. The visualization uses React hooks to load and parse CSV data asynchronously, with native SVG `<title>` elements providing hover tooltips.

RReymond Mesuga
96% match
Loading thumbnail…

Fork of Working with Time

This fork of a working-time example plots temperature against time for one week in San Francisco, using data from Data Canvas Sense Your City. A scatter plot displays each temperature reading as a circle, with time on the horizontal axis and temperature on the vertical axis. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, while `d3.csv` loads the dataset from a remote URL. Axes are rendered as custom React components, with time-formatted tick labels and an SVG `<title>` element for tooltips.

WWilliam Cheung
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
95% 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
95% 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
95% 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
95% match
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
95% match
Loading thumbnail…

Fork of Working with Time

This is a fork of a D3.js line chart that visualizes temperature measurements over time, depicting a week of San Francisco weather data from the Data Canvas Sense Your City dataset. The visualization uses a time-scaled x-axis and a linear y-axis for temperature. The chart is built with React and uses D3's `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to create a smooth path, rendered as SVG.

Llatifiss
95% match