Skip to main content
SimilarExport ZIP
100%

D3 course - working with time

✓ Published5🌍 Public
JJames Rhodes
Last edited Apr 5, 2022
Created on Mar 28, 2022
Forked from Iris Scatterplot

This example visualizes a week of San Francisco temperatures in degrees Celsius using a line chart with a gradient stroke and colored scatter points. It shows temperature fluctuations over time, with each point offering a tooltip displaying the exact date and rounded temperature. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` for axes, `d3.line` with curve interpolation for the path, and a custom `linearGradient` for the stroke. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

AI-generated description

Working with time

Temperature in degrees celcius in San Francisco for one week

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

This example visualizes the temperature of a week in San Francisco over time, using a line chart to show the trend. The visualization is built with React and D3 v6, rendering to SVG. It loads CSV data from a URL, maps the timestamp and temperature fields, and uses `scaleTime` and `scaleLinear` for the axes. The smooth curve is created with `curveNatural` from the `line` API, with axis labels and tick marks styled via CSS.

Kkragovic
90% match
Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings in San Francisco as a smooth line chart, with circular marks highlighting each data point and tooltips revealing the exact timestamp. It uses React to manage component state and render the SVG, while D3 v5 utilities handle data loading, scales, and shape generation. The data is fetched from a CSV file using `d3.csv`, then mapped through `scaleTime` and `scaleLinear` to position points along the time and temperature axes. Curves are drawn with `d3.line` and the `curveNatural` interpolation, and custom React components encapsulate the axes and marks.

JJanet Li
89% match
Loading thumbnail…

Working with time

This example visualizes the daily temperature of a week in San Francisco using a time-series scatter plot, with points connected by a line to highlight trends. The chart uses D3 scales (`scaleTime`, `scaleLinear`) to map timestamps and temperature values to SVG coordinates, with React managing the rendering of axes and marks. The data is loaded via D3’s `csv` parser from a remote file, and each point includes a tooltip showing the day of the week via `timeFormat`.

AAnthony Zornig
89% match
Loading thumbnail…

Working with Time

A line chart displays temperature readings over the course of a week in San Francisco, using a smooth curved path to emphasize trends. The visualization employs React to render SVG elements, with D3 v5 scales (scaleTime and scaleLinear) mapping timestamps and temperatures, while reusable axis components generate tick marks. Data is loaded asynchronously via d3.csv from an external URL, and the brush-free chart includes hover tooltips on circles for precise time values.

Ccynichole
89% match
Loading thumbnail…

Working with Time

This visualization shows temperature readings across a week in San Francisco as a smooth, curved line chart. Time runs along the x-axis with day labels, while temperature appears on the y-axis, both using scales from `d3.scaleTime` and `d3.scaleLinear`. The line is generated with `d3.line` and `curveNatural`, and rendered as SVG paths within a React component. Data comes from a CSV file loaded via `d3.csv`, with axes built by custom React components that map ticks using D3's scale methods.

Cchamce
89% match
Loading thumbnail…

Working with Time

This visualization displays a week of temperature readings in San Francisco as a smooth line chart, with time on the horizontal axis and temperature on the vertical axis. The data is loaded from a CSV file using d3.csv, then rendered as an SVG through React components. The chart uses d3.scaleTime and d3.scaleLinear to map the timestamp and temperature values, while d3.line with curveNatural generates the curved path connecting the data points. Custom axis components and a simple tooltip via SVG title elements are included.

JJohn Huang
89% match
Loading thumbnail…

Working with time

This example visualizes San Francisco temperature readings over one week, plotting temperature against time as a smooth curve with individual data points marked by circles. It uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear mapping the temporal and temperature domains. The d3.line generator with curveNatural creates the interpolated path, while custom AxisBottom and AxisLeft components draw the ticks. Data is loaded as CSV via d3.csv and parsed into JavaScript Date objects, with tooltips formatted using timeFormat.

MMosheAron
88% match
Loading thumbnail…

Working with Time

This example visualizes temperature over time in San Francisco, using a line chart to show how readings fluctuate throughout the week. The chart is built with React and renders as an SVG, using d3. `scaleTime` and `scaleLinear` handle the axes, while `line` with `curveNatural` draws a smooth path through the data points. The underlying CSV data is loaded asynchronously via `useData`, which parses timestamps and numeric temperature values.

Aalexandermodell
88% match