Skip to main content
SimilarExport ZIP
100%

Fork of D3 course - working with time series

✓ Published1🌍 Public
RRobFaj
Last edited Apr 3, 2023
Created on Apr 3, 2023

This visualization shows the daily Federal Funds borrowing rates over time, displayed as a smooth curved line chart with data points colored on a gradient from blue to red based on their value. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and rates to SVG coordinates, with custom axis components and a line path generated via `d3.line` with cardinal tension. The data is fetched from a CSV file containing historical rate values, and the chart includes interactive tooltips showing the exact date and rate for each point.

AI-generated description

Working with time

Temperature in degrees celcius in San Francisco for one week

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays the U.S. Federal Funds borrowing rate over time as a single steelblue line chart, with a focus on user interaction. Hovering the mouse over the plot reveals a small black circle and a text label that track the nearest data point, showing its date and rate value. The visualization uses d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear for axes, and d3.line for the path. It also employs a d3.bisector to locate the closest data point, with SVG elements for rendering.

RRobFaj
82% 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
77% 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
77% match
Loading thumbnail…

Fork of Time Series Graph Using D3

This visualization shows a time series line chart of a numeric value over time, with a color gradient applied to the line that transitions from gold at the minimum value to blue at the maximum. The chart uses D3 v4 to load CSV data from a GitHub-hosted dataset, parse dates with `d3.timeParse`, and scale the x-axis with `d3.scaleTime` and the y-axis with `d3.scaleLinear`. The line is rendered as an SVG path using `d3.line`, with its stroke set to a `linearGradient` definition containing two color stops.

Eethanrampersaud@gmail.com
77% match
Loading thumbnail…

D3 course - working with time

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.

JJames Rhodes
76% match
Loading thumbnail…

Fork of Fork of Fork of Chart redesign

This example visualizes a time series of daily humidity data as a line chart with overlaid seasonal summaries. The chart uses a colored timeline gradient and highlights distinct season spans (Spring, Summer, Fall, Winter) as shaded rectangles, alongside dotted data points and dashed season mean lines. The visualization is built with React and D3 v5, using `d3.json` to load the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` with `d3.curveBasis` to generate the smoothed line path. The chart is rendered as an SVG, with downsampling applied to the data for smoother curve rendering.

Ssrividyap03
76% match
Loading thumbnail…

Fork of Working with time

This visualization displays temperature readings over time, rendered as a smooth line chart in an SVG canvas. The React app loads CSV data from a GitHub-hosted weather dataset and uses D3 v5 utilities like `scaleTime`, `scaleLinear`, and `extent` to map timestamps and temperatures to coordinates. The `line` and `curveNatural` functions from D3 draw the path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks. Axis labels and tick styling are defined in CSS with the Poppins font.

SSamirAhma
76% match
Loading thumbnail…

Fork of Working with Time

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

李李文韬
76% match