Viz - Area - defined

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`.

88% match

Viz - Area - line

This example combines a filled area chart with an overlaid line chart to visualize 20 random data points generated by `randomData()` via `d3.range` and `Math.random`. The area uses a red fill with low opacity, while the line is drawn in solid red, both smoothed with `d3.curveBasis`. The code relies on the `viz.area()` and `viz.line()` APIs from the Viz.js library, which internally leverage D3 v4 scales and shapes, and renders to an SVG element selected from the page.

86% match

Viz - Area - key value1

This example shows a simple area chart built from twenty randomly generated data points, mapping each point’s index to the x-axis and its random value to the y-axis. The chart renders as a filled steel-blue area with no stroke, drawn inside an SVG group. The code uses the Viz.js library’s `viz.area()` function, configured with `.key()` and `.value1()` accessors, and appends the result to a D3 v4 selection via `d3.select("g").call(area)`. The data is generated on the fly using `d3.range()` and `Math.random()`.

84% match

Viz - Area - curve

This example draws a smooth area chart from twenty randomly generated data points. It uses the Viz.js library’s `area` generator, configured with a basis curve via `d3.curveBasis`, and renders the result as an SVG path with a steelblue fill. The random data is created on the fly using `d3.range`, and the chart is placed inside a `<g>` element translated within an SVG canvas.

84% match

Viz - Area - orient right

This example shows a right-oriented area chart generated from 20 random data points. The visualization uses the `viz.area()` API from the Viz.js library, configured with `orient("right")` and a basis curve via `d3.curveBasis`. The area fills with a steelblue color in an SVG container. Data is produced by `randomData()`, which maps a range of 20 values to `{key, value}` pairs using `d3.range` and `Math.random`. The chart is rendered by calling the area generator on a selected `<g>` element.

Viz - Area - value0 value1

This example shows a simple area chart where a single series is bounded by two dynamic value columns, value0 and value1, rendered as a filled steel-blue region inside an SVG. The chart uses the viz.area() API from viz.js v1.3.0 to generate the area shape, with accessor functions mapping each data point’s value0 and value1 properties. Random data is produced via d3.range(20) and Math.random(), and the area is drawn by calling the area function on a d3-selected <g> element. D3 v4 handles the SVG container and selection, while viz.js manages the area geometry.

Viz - Area - line - axis

This example combines an area chart and a line chart on a shared y-axis, rendering 20 randomly generated data points as a smooth basis curve. The SVG output uses two D3 v4 modules: `viz.area()` fills the area beneath the curve with semi-transparent green, while `viz.line()` draws the line itself in solid green. A left-oriented axis with grey ticks and horizontal gridlines is created using `d3.axisLeft()`. The data is generated on the fly by `randomData()`, and the chart is assembled by passing the area and line components to a single `d3.select("g")` selection.

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.