Viz - Point - drawPoints

100%

Viz - Point - drawPoints

✓ Published0🌍 Public

Last edited Jan 20, 2018

Created on Jan 20, 2018

This example renders 200 randomly generated data points as circles on an SVG canvas. Each point is colored either steelblue or red based on the parity of its key value, with a semi-transparent fill and matching stroke. The visualization is built using the `viz.point()` API, which is configured with a custom `drawPoints` function that appends circle elements to the SVG group. The code relies on D3 v4's `d3.range` and `d3.select` for data generation and DOM selection, while the rendering itself uses standard SVG `circle` elements positioned by the x and y coordinates provided by the point layout system.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - Point - Default

This example displays a basic scatterplot of 20 random points, each represented by a steelblue circle without an outline. The visualization is generated by calling `viz.point()` on a selected SVG group element, with data supplied by a custom `randomData()` function that maps each index to a random value. The chart renders as an SVG using D3 v4 and the Viz.js library, where the point layer’s styling is defined via CSS targeting the `.point circle` selector. The code demonstrates a minimal setup for creating a point chart with dynamic, arbitrary data.

NNPashaP

89% match

Loading thumbnail…

Viz - Point - Brushend

This example demonstrates a scatterplot of 1,000 randomly generated points, rendered as SVG circles. Users can drag a rectangular brush over the plot to select points, which then turn blue and gain black outlines. The visualization uses the `viz.point()` charting API to generate the plot, while a `d3.brush()` instance handles the selection interaction. On brush end, `point.filterRect()` identifies points within the selection rectangle and updates their CSS class accordingly.

NNPashaP

82% match

Loading thumbnail…

Viz - Point - Brush

This example shows a scatterplot of 1,000 random points, where users can drag a rectangular brush to select points and highlight them in blue. It uses the viz.js `viz.point()` function to render the SVG circles and `d3.brush()` to handle the brushing interaction. On brushing, the code calls `point.filterRect()` to identify which points fall within the selection and applies a CSS class to style selected circles with a blue fill and black stroke.

NNPashaP

81% match

Loading thumbnail…

Viz - Point - Transition

This example displays 200 points that are randomly repositioned on a two-dimensional plane every two seconds. Each point shifts to a new location based on freshly generated random x and y coordinates, demonstrating a transition between data states. The visualization uses the `viz.point()` API from the Viz.js library, building on D3 v4, to render the points as SVG shapes with a steelblue fill and stroke. The `point.transition()` method animates the movement of each point to its updated position, while the code explicitly resets the key and value scales before each update to recompute the coordinate mappings.

NNPashaP

80% match

Loading thumbnail…

Viz - Line - Redraw

This example demonstrates a dynamic line chart where data points are randomly regenerated every two seconds, causing the line to redraw with a new path. The visualization uses the viz.js library’s `viz.line()` API, with data bound to an SVG `<g>` element via D3 v4’s `selection.call()`. Each update resets the `valueScale` to recompute the y-axis domain, while the line’s stroke is styled as a steel-blue path. The animation is driven by `setInterval()`, which maps the original keys to new random values, showcasing live re-rendering of an SVG line in response to changing data.

NNPashaP

78% match

Loading thumbnail…

Viz Test

This example renders a static SVG visualization of a blue circle centered on a 600x400 canvas, with a hardcoded dataset of five countries and their GDP values prepared for display using D3’s `scaleOrdinal` and `schemeDark2` color scale. The code uses `d3.select` to append the circle and defines the data array, though no bar chart or other shapes are actually drawn from the dataset. The page loads D3 v6 via a CDN, and the SVG is styled with basic attributes like `stroke` and `fill`.

RRan Guin

74% match

Loading thumbnail…

Viz - Line - Transition

A line chart continually updates every two seconds, displaying ten points with random values connected by a steelblue line. The visualization first shows a single transition of the line and its points, then repeatedly re-draws the chart with new data. Built with D3 v4 and the viz.js extension, the example calls `viz.line()`, sets a 1000-millisecond duration, and uses `line.transition()` to animate the changes. The SVG render uses a `g` element, and the `randomData` function generates the varied point positions.

NNPashaP

74% match

Loading thumbnail…

Hello VizHub

This example demonstrates interactive circles on an SVG canvas, where users can drag each circle to reposition it or click to trigger a temporary scale-and-color animation. The visualization highlights D3 v5’s drag behavior and transition system, using chained transitions to enlarge circles to black and then restore their original size and color. It generates 20 randomly positioned circles with a fixed radius, colored via the `d3.schemeCategory10` palette. The code relies on `d3.create`, `d3.range`, `d3.drag`, and `selectAll().join()` to manage dynamic elements and event handling.

Hhvindshoej

73% match