Skip to main content
SimilarExport ZIP
100%

Brush for data visualisation

✓ Published0🌍 Public
TThanaporn-sk
Last edited Feb 17, 2017
Created on Feb 17, 2017

A scatter plot of genetic positions against mutation counts uses a D3 v3 brush control to dynamically filter the main chart. The visualization is modular, built with the `TurncatingChart` closure, and reads JSON data that defines both the plotting data and chart options. Users can hover over individual points to see tooltips and save the SVG or a canvas-rendered PNG copy of the graph client-side.

AI-generated description

Built with blockbuilder.org

Interview testing 1:

  • the SVG and its PNG files can be downloaded in client-side;
  • No matter how mach data there will be, using brush can extract them and represented on main graph area;
  • hoove on a specific item will show a information tips;
  • The graph chart can be reusable;
  • The Data is json which combined with drawing data and chart options.

forked from <a href='http://bl.ocks.org/1Cr18Ni9/'>1Cr18Ni9</a>'s block: <a href='http://bl.ocks.org/1Cr18Ni9/cce6e6cfd620bd5eb18ded271edf3987'>Brush for data visualisation</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush for data visualisation

A scatter plot of genetic positions against mutation counts uses a D3 v3 brush control to dynamically filter the main chart. The visualization is modular, built with the `TurncatingChart` closure, and reads JSON data that defines both the plotting data and chart options. Users can hover over individual points to see tooltips and save the SVG or a canvas-rendered PNG copy of the graph client-side.

TThanaporn-sk
100% match
Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9
85% match
Loading thumbnail…

D3 Brush and Tooltip Complete

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

TThanaporn-sk
79% match
Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9
79% match
Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a brushable scatterplot where 800 random data points are plotted along a linear x-scale and a normally distributed y-axis. Users can drag horizontally to select a range, which highlights the corresponding circles in red while custom brush handles appear as resizable path shapes. Built with D3 v4, it uses `d3.brushX` for the brush interaction, `d3.axisBottom` for the x-axis, and `d3.randomNormal` to generate the y-values. The custom handles are drawn with SVG paths, and the brushing updates both circle classes and handle positions via the brush event handler.

TThanaporn-sk
76% match
Loading thumbnail…

Untitled

This example shows a brushable line chart for exploring genomic coverage data, plotting the percentage of covered positions along a chromosome. The main focus panel displays multiple colored lines, while a smaller context panel below provides a zoomed-out overview. Using D3.js v5, the visualization employs `d3.brushX` to allow brushing on the context chart, which updates the x-axis domain of the focus panel via a brush event handler. Data is loaded from a CSV file with `d3.csv`, and lines are rendered as SVG paths using `d3.line` with scales from `d3.scaleLinear`.

FFlorian Breitwieser
76% match
Loading thumbnail…

Brush I

A brushable scatterplot displays 300 randomly generated points. A horizontal brush initially selects a range, highlighting points within it in red with a brown stroke. The example uses d3.brushX to define the brush and handles the brush event to update the selection state. Clicking re-centers the brush using a fixed width, demonstrating interactive selection on an SVG rendered with d3.scaleLinear and d3.axisBottom.

MMorganhaoyu
76% match
Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ
76% match