Fork of Working with time

100%

Fork of Working with time

✓ Published0🌍 Public

Last edited Sep 18, 2021

Created on Sep 18, 2021

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

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

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

92% match

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

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

92% match

Loading thumbnail…

Fork of Working with Time

This example visualizes the relationship between time and temperature for a week in San Francisco, plotting each observation as a circle along a time axis. The x-axis displays the day of the week, while the y-axis shows the temperature value. The chart is rendered as an SVG using React, with axes and data marks constructed from custom components. The implementation leverages d3’s `scaleTime`, `scaleLinear`, and `extent` functions for scaling and domain calculation, while data is loaded asynchronously from a CSV file using d3’s `csv` helper. Each circle includes a tooltip formatted with `timeFormat`.

YYedrup

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

92% match

Loading thumbnail…

Fork of Working with time

This fork of "Working with time" displays a temperature-over-time scatterplot for a week in San Francisco, with daily timestamps on the x-axis and temperature on the y-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveNatural for the trend path, and d3.csv for data loading. Axis components from d3.axis are manually recreated as functional React components, while circles with title tooltips highlight each data point.

LLawrence Liu

91% match