Fork of Working with Time

100%

Fork of Working with Time

✓ Published1🌍 Public

Last edited Mar 20, 2021

Created on Mar 20, 2021

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.

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

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

94% match

Loading thumbnail…

Fork of Working with time

This example visualizes temperature over time for a week in San Francisco, showing a smooth line through the data points. The chart is built with React and rendered as an SVG, using the D3.js library (d3.v5) for scales, axes, and the line generation. The line is drawn using the `line` function from D3, with the `curveNatural` method to create a natural cubic spline. The x-axis displays time formatted as abbreviated weekday names, while the y-axis shows temperature values.

TtrwMK

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

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

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

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