Fork of Fork of Working with Time

100%

Fork of Fork of Working with Time

✓ Published0🌍 Public

Last edited Mar 20, 2021

Created on Mar 20, 2021

This visualization displays temperature readings over a week in San Francisco, using a smooth curved line to show the trend across time. The chart loads CSV data via D3's `csv` utility, parses timestamps with `new Date`, and uses React hooks to manage the asynchronous data fetching. D3 scales (`scaleTime`, `scaleLinear`) map the data to SVG coordinates, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and the line path using `d3.line` with `curveNatural` interpolation.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This example visualizes weekly temperature data from San Francisco as a smooth line chart over time, using a natural curve to connect hourly readings. The visualization relies on React for component-based rendering and D3 utilities like `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to map timestamps and temperatures. Axes are custom-built with `AxisBottom` and `AxisLeft` components, while data loading uses D3’s `csv` parser to fetch and format the remote dataset. All graphics render as SVG elements within a React application, with styling applied via CSS classes.

Ddoaa-shehab

94% match

Loading thumbnail…

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

RRMartins11

94% match

Loading thumbnail…

Fork of Working with Time in LIne Chart

This line chart visualizes temperature readings over a week for San Francisco, using a smooth natural curve to connect daily data points. The chart displays time on the x-axis and temperature on the y-axis, with hover tooltips showing the day of the week for each point. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and renders as SVG. Data comes from a CSV file loaded via `d3.csv`, with axis labels and tick marks styled through CSS.

AAdriana Rodriguez Sanabria

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

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

92% match

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

92% match

Loading thumbnail…

Fork of Working with time

This example visualizes the weekly temperature variation in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The React-based application loads CSV data from a GitHub gist (United Nations World Population Prospects 2019) using d3.csv in a custom useData hook. d3.scaleTime and d3.scaleLinear map the data to SVG coordinates, while d3.line with curveNatural draws the path. Custom AxisBottom and AxisLeft components render the ticks and labels, and the chart includes axis titles for both dimensions.

DDanier

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

92% match