Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Nov 10, 2021

Created on Nov 10, 2021

This scatter plot visualizes the relationship between time and gross profit (labeled "Temperature") using a dataset from Data Canvas Sense Your City. The visualization is built with React and D3 v5, leveraging `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.csv` to load the data. Axes are rendered as custom components (AxisBottom, AxisLeft), while individual data points appear as SVG circles with tooltips formatted via `d3.timeFormat`. The chart uses the Poppins font and a clean design, with axis labels and tick marks styled distinctly.

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 example visualizes the relationship between time and temperature using a scatter plot, with each circle representing a data point from the Data Canvas Sense Your City dataset. The x-axis displays time formatted by day of the week, while the y-axis shows temperature values, with a tooltip revealing the exact timestamp when hovering over a mark. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG rendering includes custom axis components and circle marks with a `title` element for tooltips. The chart is styled with the Poppins font and a teal color scheme.

Mmadhuudhai

88% 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

87% match

Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time, drawn from the Data Canvas Sense Your City Dataset. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with React components structuring the axes and circular marks. Axis ticks are generated from d3 scale methods, and each circle includes a native SVG `<title>` element for tooltips. The chart is rendered with React and D3 v5, loading data asynchronously via d3.csv.

JJoakim Warholm

87% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The chart uses a time-scaled x-axis showing weekday labels and a linear y-axis for temperature, with each data point rendered as a circle. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, and `extent` to map data, while custom `AxisBottom` and `AxisLeft` components generate SVG ticks and labels. Circles include a `<title>` tooltip displaying the formatted timestamp.

GGeekboxer

87% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a React-based SVG rendering with D3 scales. The x-axis employs `scaleTime` with day-of-week tick formatting, while the y-axis uses `scaleLinear` for temperature values. Circle marks represent individual data points, with native SVG `<title>` elements providing tooltips. The code leverages React hooks via `useData` to asynchronously load and parse CSV data, alongside custom `AxisBottom`, `AxisLeft`, and `Marks` components that map scales to SVG elements.

Ddr-rompecabezas

87% match

Loading thumbnail…

Fork of Working with Time

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendering a scatter plot with circular marks positioned by a d3.scaleTime x-axis and d3.scaleLinear y-axis. Built with React and rendered as SVG, the plot uses d3.csv to load the data and d3.extent to compute domains. The d3.axisBottom and d3.axisLeft components generate tick marks, while native SVG <title> elements provide hover tooltips formatted with d3.timeFormat.

GGokulkrishnan1996

86% match

Loading thumbnail…

Fork of Working with Time

This interactive scatter plot visualizes temperature over time, with each circle representing a data point from the Data Canvas Sense Your City dataset. The visualization uses an SVG rendering approach with React for the component structure. D3 version 5 APIs handle the core data processing, including the `csv` parser for loading data, `scaleTime` for the temporal x-axis, and `scaleLinear` for the temperature y-axis. The `extent` function calculates the domain for both axes, while `timeFormat` formats timestamp labels.

AAndro

86% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing the fluctuation of weekly temperatures. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data points as circles on an SVG canvas. Axes are rendered via custom React components, with `timeFormat` for date labels and a native SVG `<title>` element for hover tooltips. Data is loaded asynchronously using D3's `csv` method and processed through useState and useEffect hooks.

Aalitemel89

86% match