Test

100%

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Sep 8, 2012

This example shows a single rectangle positioned on a logarithmic scale, with axes using custom tick formatting that hides most labels. The SVG chart is 200 by 200 pixels and uses D3.js to create log scales for both X and Y axes, mapping data points from a one-element array. The code demonstrates how to correctly calculate rectangle position and size when scales are non-linear, using `Math.min` and `Math.max` to flip coordinates and ensure positive width and height. The `d3.svg.axis` API renders the axes, while CSS styles the axis text and lines.

AI-generated description

Similar vizzes

Loading thumbnail…

Test

A single orange rectangle is plotted within a 200 by 200 pixel SVG chart, with its position and size determined by a four-element dataset. The example demonstrates how to correctly draw rectangles when using an inverted y-axis scale, by computing minimum and maximum coordinates to ensure positive width and height values. It uses d3.svg.axis for the x and y axes, and d3.scale.linear for scaling, with the rectangle rendered via SVG rect elements.

GGerHobbelt

87% match

Loading thumbnail…

Log Axis

This example demonstrates a log-scale axis using a hard-coded domain from 0.0124123 to 1230.4, rendering tick labels with the `",.1s"` format. The visualization uses d3.v3’s `d3.scale.log` to create the logarithmic scale and `d3.svg.axis` to draw the axis with 20 ticks. The SVG output is positioned within a larger canvas using margins, and styled with CSS for font and stroke. The code does not include a data source, as it focuses solely on the axis component.

Mmbostock

75% match

Loading thumbnail…

Fork of Scales and Axes

This example demonstrates D3 scales and axes by rendering a blank chart with a gray inner rectangle and labeled x and y axes. It uses `d3.scaleLinear` to map input data from 0 to 100 into pixel coordinates, with margins defining the plot area. The axes are created using `d3.axisBottom` and `d3.axisLeft`, which are appended to SVG groups and positioned via margin-based transforms. The code imports from the D3 v7 library and dynamically sizes the SVG to its container.

DDuc Pham

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

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

74% match

Loading thumbnail…

scale svg

This example demonstrates how to create a responsive SVG visualization using D3 v7. It displays five small rectangles positioned horizontally within a 400x400 viewBox, with each rectangle’s x-coordinate determined by its data value. The code uses `d3.select` to append an SVG element and applies the `viewBox` and `preserveAspectRatio` attributes to ensure the graphic scales proportionally to its container. The rectangles are bound to the array `[1,2,3,4,5]` using D3’s data join pattern with `selectAll`, `data`, and `enter`.

Yyar

74% match

Loading thumbnail…

fresh block

This example shows a simple scatterplot-like chart with axes, plotting five data values between 10 and 30 on a 400-by-400 SVG canvas. It demonstrates how to use d3.scaleLinear for both x and y axes, with the y-axis scaled from the chart’s height down to zero and the x-axis scaled from zero to the data maximum. The code appends two groups to the SVG, translating them to position the axes, and uses d3.axisBottom and d3.axisLeft to render the ticks. The data is hardcoded as an array, and the visualization relies solely on d3.v4 for scaling and axis generation.

DDjokovalle

73% match

Loading thumbnail…

Fork of Scales and Axes

This example demonstrates how to construct a basic Cartesian coordinate system using D3 scales and axes. A dark grey inner rectangle is drawn within the SVG canvas to define the plotting area, while a linear scale maps the domain 0–100 to the horizontal and vertical pixel ranges. The bottom and left axes are rendered using `d3.axisBottom` and `d3.axisLeft` respectively. The `d3.scaleLinear` API handles the coordinate transformations, and the visualization responds to container resizing through a `ResizeObserver`.

Oownerofthesoul0000@gmail.com

73% match