Update d3.js data with button press

100%

Update d3.js data with button press

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Jun 21, 2014

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.

AI-generated description

This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.

It demonstrates the loading of new data and updating a graph on a button press. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes

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

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

80% match

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

78% match

Loading thumbnail…

Data Updating

This example demonstrates dynamic data updating in a bar chart built with D3.js v6 and rendered as SVG. The interactive visualization allows users to add or update data entries via input fields, triggering smooth transitions on bar widths as weights change, while axis scales adjust accordingly. Users can also filter the displayed data by setting a minimum weight threshold. The code employs `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleBand` for scales, and the data join pattern with `enter`, `merge`, and `exit` selections, alongside `transition` and `d3.axisLeft`.

DDasbach.EJ

76% match

Loading thumbnail…

d3.js tool tips with links in data

This example shows a line chart of stock closing prices that, when hovering over a point, displays a tooltip containing the date, the price, and a hyperlink to a related resource stored in the CSV data. The tooltip appears with a fade-in effect and includes an HTML anchor tag that opens the link in a new tab. Built with D3 v3, the code uses `d3.csv` to load the data, `d3.time.scale` and `d3.svg.line` for the chart, and SVG circles with mouseover events to trigger the tooltip, which is a styled `div` positioned at the cursor.

Dd3noob

73% match

Loading thumbnail…

Changing data

An interactive chart uses D3 to display circles representing two datasets. Clicking a button switches between datasets, triggering D3 transitions that animate the circles to their new positions and radii. The SVG rendering uses D3’s selection, data joins, enter/exit, and transition API to smoothly update the visualization, with a text label that updates accordingly.

SSerhii Ponomarov

73% match

Loading thumbnail…

Autoupdating graphite timeseries in d3

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.

CCaged

72% match

Loading thumbnail…

Simple graph and table using d3.js

This example pairs a simple line graph with an HTML table generated from the same CSV dataset, showing date and closing value pairs. The SVG chart uses D3.js scales, axes, and a line generator to plot the data, while a separate table function renders the raw values beneath it. The code relies primarily on `d3.csv` for data loading, `d3.time.scale` and `d3.scale.linear` for scaling, and `d3.svg.axis` for axis creation, all within D3 version 3.5.17. The table is styled inline with font and margin attributes.

Dd3noob

72% match