Fork of Working with time

100%

Fork of Working with time

✓ Published1🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

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.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Working with Time

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.

Ddoaa-shehab

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 Working with Time

A line chart plots San Francisco temperature readings over a week, using a natural curve to connect daily data points from the Data Canvas Sense Your City dataset. The React app loads CSV data with d3.csv, maps timestamps with `scaleTime`, and maps temperature values with `scaleLinear`. SVG rendering uses React components for axes and marks, while d3's `line` generator with `curveNatural` draws the path, and native SVG `<title>` elements provide tooltips.

PPratik Raja

94% match

Loading thumbnail…

Fork of Working with Time

This example shows a time-series line chart of San Francisco weekly temperatures, with daily points plotted along a smooth curve and native SVG tooltips on hover. The code loads CSV data, parses timestamps and numeric values with `useEffect`, and renders axes and marks using React components. D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` handle scaling and path generation, while `timeFormat` formats tick labels. React state manages the fetched data, and SVG elements are produced from JSX in the `AxisBottom`, `AxisLeft`, and `Marks` components.

NNikita Toropov

93% match

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

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

93% match

Loading thumbnail…

Fork of Working with Time

This fork of the Working with Time example displays a San Francisco temperature time series as a smooth curved line chart in SVG. The visualization uses React components for axes and marks, with D3 scales (scaleTime, scaleLinear) and the curveNatural line generator to render the data path. The data comes from the Data Canvas Sense Your City Dataset’s weekly temperature measurements, loaded via d3.csv.

EEugenio2192

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