Skip to main content
SimilarExport ZIP
100%

Autoupdating graphite timeseries in d3

✓ Published0🌍 Public
CCaged
Last edited Dec 16, 2014
Created on Dec 16, 2014

This example shows live-updating time-series graphs that automatically refresh their data at a regular interval. It renders each graph as an SVG with D3 scales and axes, drawing lines from Graphite’s JSON endpoint. The code uses `d3.json` for data fetching, `d3.svg.axis` and `d3.svg.line` for rendering, and a clip path to constrain the plotted area. A real-time mode triggers repeated requests using a dynamic URL that updates the time window based on the first payload’s interval.

AI-generated description

Similar vizzes

Loading thumbnail…

Update graph data automatically

A line chart of stock closing prices automatically refreshes with a new dataset every five seconds. Built with D3.js version 3, the visualization uses `d3.csv` to load two CSV files, `d3.time.scale` for the date axis, and `d3.svg.line` for the path. A `setInterval` triggers the update, which transitions the line and axes over 750 milliseconds using D3’s `.transition()` and `.duration()` methods. The SVG rendering relies on standard D3 SVG elements and selectors to swap the data seamlessly.

Dd3noob
73% match
Loading thumbnail…

Update d3.js data with button press

This example demonstrates how to update a line graph by pressing an "Update" button. It uses D3.js version 3.5.17 to render an SVG line chart of date and closing value pairs. The interaction is handled by an HTML `onclick` event that triggers the `updateData()` function, which re-fetches a different CSV file (`data-alt.csv`). The axes and line path are then updated with a smooth 750-millisecond transition, showing how to dynamically replace the dataset and rescale the visualization.

Dd3noob
72% match
Loading thumbnail…

dynamic update graph

A dynamic network graph incrementally reveals nodes and edges over time, simulating real-time evolution of a network. Each second, a new connection may appear, with new circles fading in and lines smoothly transitioning to new positions via the force-directed layout. The example highlights a timestamp counter in red and uses d3.forceSimulation with charge and link forces to position elements. It styles nodes with d3.scaleOrdinal and d3.schemeCategory20b, and renders everything as an SVG with animated transitions.

FFrissAnalytics
72% match
Loading thumbnail…

d3 v4 realtime line chart

A real-time line chart appends a new random data point every ten milliseconds, streaming it across a 500-pixel SVG canvas. The visualization displays both a raw path and a smoothed cardinal-curve version, with the x-axis domain shifting as new values arrive. The code uses d3.scaleLinear, d3.line, d3.axisBottom, and d3.curveCardinal from d3.v4, with d3.transition and d3.easeLinear animating the axis and path translations to create the continuous scrolling effect.

KKevinGutowski
71% match
Loading thumbnail…

Update and revert graph data

Two line charts share a common set of axes, displaying date-based stock closing values. Clicking the "Update" button loads alternate data (`data-alt.csv`) and animates the line and axis ranges over 750 ms using D3 transitions, while "Revert" returns to the original `data.csv` dataset. The visualization uses D3's `d3.time.scale`, `d3.scale.linear`, `d3.svg.line`, and `d3.svg.axis` to render the SVG line and axes, with `.transition()` on the `d3.select("body")` selection to smoothly interpolate the path and axis scales.

Dd3noob
71% match
Loading thumbnail…

Real time chart

This example demonstrates a real-time line chart that continuously updates with new data points. The visualization shows a scrolling line graph where new random values are appended and old ones shift out of view every half second. The chart uses D3 v5 to generate data with `d3.randomNormal`, and displays an animated SVG path created with `d3.line`. The updating mechanism relies on D3 transitions with `easeLinear`, using `transition.attrTween` (via the `tick` function) to slide the line horizontally while clipped by a clipPath.

PPiotr Paszek
71% match
Loading thumbnail…

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

Mmbostock
69% match
Loading thumbnail…

Update d3.js data with button press

Clicking the Update button swaps the visible line chart from one dataset to an alternative CSV file, animating the change over 750 milliseconds. The example demonstrates how to rebind D3.js v3 selections to new data by re-calling the same line and axis generator functions within an `onclick` handler. It uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path and axes, with transitions applied via `selection.transition().duration()`. The underlying data comes from two local CSV files with date and closing-value pairs.

CCBasis
69% match