doaa-shehab

@doaa-shehab·2 public vizzes

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.

Mar 20, 2021

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.

Mar 20, 2021