Skip to main content
100%

Flot - Downsampling Plugin

✓ Published0🌍 Public
ZZJONSSON
Last edited May 15, 2013
Created on May 15, 2013

This example demonstrates a Flot line chart with a downsampling plugin that simplifies dense data series using Visvalingam's algorithm. The chart displays one of three demo datasets selected from a dropdown, and a slider controls the simplification threshold, dynamically updating the number of points rendered in the 900x300 pixel plot area. The plugin caches the simplified results for performance, using a triangle-area-based approach to remove the least visually significant points while preserving the overall shape. A readout shows the current threshold and total point count. The gray-themed page includes a header, content box, and a threshold slider with a warning that it works best in full screen mode.

AI-generated description

Only works in full screen http://bl.ocks.org/ZJONSSON/raw/5581551/

Similar vizzes

Loading thumbnail…

Down-sampling time series data

This example demonstrates how the Largest-Triangle-Three-Buckets (LTTB) algorithm reduces a 1,000-point time series to a smaller set that preserves the visual shape of the data. The chart first shows the raw data as a line, then applies LTTB with a threshold tied to half the SVG width, ensuring at most one point per two pixels to avoid aliasing. The code uses D3.js (v3) with `d3.time.scale` and `d3.svg.line` for axes and rendering, and the algorithm is adapted from Steinarsson's thesis. A label updates to show the original versus downsampled point counts.

FFraserChapman
66% match
Loading thumbnail…

Interactive line chart by Flazy

This interactive line chart visualizes monthly data from a JSON dataset, showing changes in values over time. The visualization combines a black polyline with gray dashed vertical drop lines and circular markers at each data point. Hovering over a circle highlights it in red, enlarges the corresponding value label, and makes its dashed line more visible, providing immediate feedback on the selected data point. The chart uses d3.json to load data, d3.svg.line for the path, d3.scale.ordinal for the x-axis, and d3.scale.linear for the y-axis, all rendered as SVG elements with transitions on mouse events.

FFlazyy
63% match
Loading thumbnail…

Line chart scroller II

This interactive line chart visualization displays 100 randomly generated financial time series, each represented by a colored line. Users can navigate by scrolling over the chart to zoom, hovering over the table rows to highlight individual series, or scrolling the table to scroll through the data. The visualization uses the Visvalingam line simplification algorithm to dynamically adjust line detail based on zoom level, with opacity and stroke-width emphasizing the currently selected series. The y-axis rescales based on the visible data, and all interactions are animated via SVG transitions.

AAndresAnayaIsaza
61% match
Loading thumbnail…

Line Simplification

This example demonstrates line simplification, a technique that reduces the complexity of geographic shapes by removing points based on their calculated area. Using a United States land mass dataset loaded via TopoJSON, it animates the transition between high and low simplification thresholds, cycling the minimum area from 0.1 to 100 square pixels and back. The visualization uses d3.simplify, a custom algorithm that employs a min-heap to prioritize point removal by triangle area, and renders the results with d3.geo.path and SVG. A text label displays the current threshold and the percentage of points retained.

Mmbostock
60% match
Loading thumbnail…

NVD3 Line with View Finder Chart - data from CSV file

The chart uses the NVD3 library's line-with-view-finder model to display five daily time series from a CSV file, with a main line chart on top and a smaller brushed viewfinder below to zoom and pan the date range. The data, parsed from daily_data.csv with d3.v3, renders as smooth multi-series lines in SVG with hover interactions and animated transitions between states.

EEfratVil
60% match
Loading thumbnail…

Zoomable Icicle

This zoomable icicle chart displays a hierarchical dataset of file sizes from the Flare visualization library. Users click any rectangle to zoom in and explore deeper levels, or click the top bar to zoom out. The visualization uses d3.layout.partition to compute the layout and d3.scale.linear for positioning, with smooth transitions animating the rescaling of rectangles over 750 milliseconds. The data is loaded from a JSON file and rendered as SVG rectangles with a categorical color scale.

Mmbostock
60% match
Loading thumbnail…

Fork of Zoomable Icicle

This example shows a zoomable icicle chart that visualizes the hierarchical Flare-2 dataset. A click on any rectangle zooms the view to that node, animating the layout and revealing the subtree; clicking the same node again zooms back out to its parent. The code uses React and the D3 v7 module, specifically `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and `d3.quantize` to compute the layout and colors, while SVG elements are created and animated with `d3.select`, `.attr`, and `.transition`. The visualization renders in a full-window SVG with no margins or scrollbars.

TTony Brown
60% match
Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr
60% match