Untitled

100%

✓ Published0🌍 Public

Last edited Mar 1, 2022

Created on Feb 24, 2022

This example shows a scatterplot of data points colored by alignment (yes/no) that can be zoomed along the x-axis using a brush. The visualization loads CSV data and renders circles with an SVG, using d3.brushX to let users select a horizontal range, which then updates the x-axis domain and repositions the circles with a transition. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and a clipPath to confine the brush and points to the plotting area. Data comes from a remote GitHub CSV file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit

86% match

Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Aamnicpo

83% match

Loading thumbnail…

Untitled

Aamnicpo

83% match

Loading thumbnail…

Untitled

This example demonstrates a basic scatter plot where users can brush-select points to highlight them in red. It uses D3 version 7 to generate 200 random data points and render them as SVG circles. The brushing interaction is handled by `d3.brush()`, which triggers a callback that updates the fill color of selected points. The code uses `d3.select()` and the `.join()` API to efficiently manage the circle elements.

Ttebanieo

82% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

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

81% match

Loading thumbnail…

Untitled

This example shows a scatterplot of 100 randomly generated points in a 600x400 SVG canvas, with the ability to pan and zoom the view. The points are rendered as small circles inside a group element, and their positions are updated using D3’s data join pattern. The code initializes a D3 zoom behavior on the SVG and applies the current zoom transform to the group on each zoom event. It uses the D3 library for zoom and data binding, while the SVG is defined directly in the HTML.

TTrushin Arseniy

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

80% match