Skip to main content
SimilarExport ZIP
100%

Axis Grid

✓ Published0🌍 Public
KKelvinZCH
Last edited Jun 9, 2017
Created on Jun 9, 2017

This example showcases a static, abstract axis grid rendered as an SVG. The central visual features a series of grid lines with deliberate, small gaps at their intersections, creating a dotted or segmented pattern that echoes the look of analog signal interference. The code constructs the grid using D3.js scaling and axes, specifically `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with tick sizes set to span the full chart width and height. It further annotates the grid with small clusters of black dashes and two alternating rows of dots, all generated procedurally within the script.

AI-generated description

Template for a more intricate axis grid. Working to make small line breaks in between grid intersections. Inspired by the look of this.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/pstuffa/'>pstuffa</a>'s block: <a href='http://bl.ocks.org/pstuffa/70142434746025fd9ee942a169406912'>Axis Grid</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/1ceb29539e5db2cbb5f6dab6cdde1da1'>Axis Grid</a>

mit Licensed

Similar vizzes

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.

苏苏巨亮
82% match
Loading thumbnail…

ggplot2-Style Axis

This example demonstrates ggplot2-style axes for a chart, combining gray grid lines with black ticks and labels. Two separate `d3.svg.axis` instances render the grid and the axis ticks, while a data-join’s exit selection customizes minor tick appearance. The grid lines use a tick size that spans the full chart height, and the background is a gray rectangle. The axes are drawn in SVG using D3 v3, with styling controlled through CSS classes.

Mmbostock
79% 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
79% match
Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片
77% match
Loading thumbnail…

Axis Styling II

This example demonstrates a time-series axis with a customized right-side y-axis using post-selection, where axis labels and grid lines are restyled after rendering. The code uses d3.axisBottom and d3.axisRight to create the axes, with the y-axis’s tick lines converted to dashed gray gridlines and labels repositioned. A transition triggered by d3.timeout animates the y-axis domain change over 2.5 seconds, using post-selection to modify entering, updating, and exiting tick elements. The implementation relies on d3.scaleTime, d3.scaleLinear, and transition.attrTween to cancel default tweens, rendering as SVG with animation.

Mmbostock
77% match
Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock
76% match
Loading thumbnail…

HTML Starter

This example renders a lightweight grid visualization inside an SVG element, with horizontal and vertical lines spaced every 20 pixels across a 960-by-500 canvas. The static grid serves as a simple geometric backdrop, demonstrating basic SVG construction without any interactive or data-driven elements. The code uses the d3.select and d3.append APIs to build the grid lines, applying a gray stroke via CSS classes. The dataset is generated programmatically from the SVG’s dimensions, and the rendering relies solely on vector shapes defined in pure SVG, with no external data source or animations involved.

SScott Page USMC
76% match
Loading thumbnail…

Axis Component

This interactive example showcases D3’s axis component, which simplifies adding reference lines and labels to custom visualizations. It plots S&P 500 monthly price data from 2000 to 2010 as a line with an area fill, using `d3.svg.axis` for both x- and y-axes. Clicking the chart triggers a random zoom on the x-axis, causing the ticks to smoothly transition via `svg.transition().duration(750)`. The visualization is rendered as SVG, with axes styled for crisp edges and clipped paths for the data series.

Mmbostock
75% match