Viz - Point - Default

100%

Viz - Point - Default

✓ Published0🌍 Public

Last edited Jan 20, 2018

Created on Jan 20, 2018

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - Point - drawPoints

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.

NNPashaP

89% match

Loading thumbnail…

Viz - Area - Line - Point

This example combines three chart types—an area, a line, and points—to visualize a dataset of twenty random values. The area uses a cardinal curve to create a smooth, filled shape, while the line traces the same values with a distinct stroke, and points mark each data location. Built with D3 v4 and the vizjs library, it renders to SVG, with the point layer using a custom `drawPoints` function to append circles. The data is generated on the fly via `randomData()`, and all three layers are drawn onto a shared group element.

NNPashaP

83% match

Loading thumbnail…

Viz - Area - Default

This example demonstrates a basic area chart generated from twenty random data points, where each point consists of a key and a value. The chart fills the area beneath the line with a steelblue color. The visualization is rendered as an SVG element, with the chart drawn inside a group that is translated 50 pixels from the top-left corner. The code uses the `viz.area()` function from the Viz.js library, invoked via `d3.select("g").call(...)`, and generates its random input data using `d3.range` and `Math.random`.

NNPashaP

82% match

Loading thumbnail…

Viz - Line - Axis

This example shows a simple line chart built with D3.v4 and Viz.js, plotting ten random data points connected by a steelblue path. The code explicitly constructs an x-axis using `d3.axisBottom()` scaled to the line’s key scale, and a y-axis via `d3.axisLeft()` on the value scale, with both axes and the line appended to an SVG group. Each data point is rendered as a white circle with a red stroke, and the underlying data is generated on the fly using `d3.range(10).map(...)` to produce key-value pairs. The visualization is rendered as SVG with a 960×500 viewport.

NNPashaP

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

81% match

Loading thumbnail…

Viz - Line - axis ticks

This visualization displays a simple line chart of ten random data points, with each point rendered as a red-bordered circle connected by a steelblue stroke. The example demonstrates how to add axis ticks and a grid using D3 v4’s `d3.axisLeft` with a custom `tickSize` that extends the ticks across the plot width. The chart is built using the `viz` library (v1.3.0) to generate the line and value scale, while SVG elements are styled via CSS classes for the grid lines, domain, and circles. Data is produced on the fly with `d3.range` and `Math.random`.

NNPashaP

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

79% match

Loading thumbnail…

Viz - Line - Default

This example shows a simple line chart rendered as an SVG polyline, with four data points plotted on a 960×500 canvas. The line uses a steelblue stroke and a slight transform offset, displaying the default styling of the viz.line API from the Viz.js library. The code loads D3 v4 and Viz.js 1.3.0, then passes an array of objects—each containing a key and value—to the viz.line function via the d3.select("g").call(...) method, producing the minimal line visualization.

NNPashaP

79% match