vue axis test

100%

✓ Published0🌍 Public

Last edited Feb 25, 2018

Created on Feb 23, 2018

This example demonstrates a draggable slider controlling a linear scale and its corresponding axis. Built with Vue.js and D3 v4, the visualization renders an SVG line with a CSS transition and animated x2 attribute. The axis component generates tick marks and labels from a computed scale function, using D3's `scaleLinear` to map input values. Sample data from a JSON file displays university counts by state, but the chart itself focuses on interactive axis testing rather than representing that dataset directly.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 axis example

This example shows a simple linear axis created with D3.js version 7.8.5, rendered as SVG. A linear scale maps a domain of 0 to 10 to a pixel range of 400, and a bottom-oriented axis is generated using `d3.axisBottom()` and applied to an SVG group with the `.call()` method. The visualization demonstrates the basic workflow of defining a scale, constructing an axis, and attaching it to the DOM.

AAxVa 🐍 💪

76% match

Loading thumbnail…

SVG Demo

This demo displays a minimal SVG visualization: a single D3 axis rendered inside an SVG element. The axis is created from a two-value data array, with a linear scale using the extent of the data and a bottom-oriented axis. The code uses d3.scaleLinear, d3.extent, and d3.axisBottom, and calls the axis with a D3 selection. The scale’s domain is normalized with .nice(), and the axis is placed in a group with a transform offset. The bundle.js file contains the compiled index.js, which imports these D3 v5 functions directly.

GGabrz

74% match

Loading thumbnail…

scale

A slider controls the domain of a linear scale, demonstrating how D3’s axis and grid components respond to changing input ranges. The visualization shows a horizontal grid with major, minor, and sub-minor tick lines in red and blue, while a separate black axis displays four major ticks. Dragging the slider updates the domain and redraws both groups via `d3.svg.axis()`. The SVG rendering uses crisp edges, with the grid background and tick styling defined in CSS. Data is generated on the fly from the slider’s numeric value, with no external dataset.

SSmith5mr

74% match

Loading thumbnail…

Axis

This example demonstrates how axes and gridlines respond to changing data domains in a D3.js visualization. It shows a simple SVG chart with an x-axis and y-axis spanning a 500×500 pixel area, with dashed gridlines extending from each tick mark. The visualization randomly rescales both axes by generating a new maximum value between 0 and 100, smoothly animating the axis transitions using `d3.transition()` and updating gridlines dynamically. Built with React, the code uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` to render and update the axes, while the gridlines are appended as `line` elements within each tick group.

苏苏巨亮

74% match

Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Ppanmenghan

74% match

Loading thumbnail…

D3 linear slider

This example shows a draggable linear slider rendered as an SVG triangle handle that moves along an axis. Dragging the handle updates a numeric value between 34 and 100, logged to the console via a callback. The slider is built using D3 v7's `scaleLinear` for positioning, `axisBottom` for tick marks, and `drag` for user interaction. The handle is drawn with `symbol` and `symbolTriangle`, while `slideScale.invert` converts the dragged position back into the data domain.

AAlpineStranger

74% match

Loading thumbnail…

D3 - Axes

This example demonstrates how D3’s axis components render tick marks and labels for a linear scale. Four separate axes—left, right, top, and bottom—are drawn inside an SVG container, all sharing the same `d3.scaleLinear` domain of 0 to 100 mapped to a 400-pixel range. The code uses `d3.axisLeft`, `d3.axisRight`, `d3.axisTop`, and `d3.axisBottom` to generate the axes, then attaches each to a corresponding `<g>` group using `selection.call`. The visualization highlights the standard D3 approach for orienting axes around a plot area.

SSubhendu Karmakar

73% match

Loading thumbnail…

Scales and Axes

This example demonstrates how D3.js maps data values to screen coordinates using linear scales and renders labeled axes. A grey inner rectangle spans the plotting area, and the `scaleLinear` function transforms the domain 0–100 into pixel positions for both x and y dimensions. The `axisBottom` and `axisLeft` components generate tick marks and labels along the bottom and left edges, while the `join` method efficiently manages SVG elements. The visualization is created using D3 version 7.8.5, with the chart’s dimensions and margins dynamically calculated from the container size.

CCurran Kelleher

73% match