Coordiante plane

100%

Coordiante plane

✓ Published0🌍 Public

Last edited May 21, 2018

Created on May 21, 2018

A two-axis coordinate plane displays four labeled quadrants using SVG lines and positioned HTML text. The visualization categorizes political orientations, with "liberal" and "konservativ" on the vertical axis and "vänster" and "höger" on the horizontal axis. Built with d3.v4, the code appends two crossed lines to an SVG group and places text labels using absolute positioning and CSS transforms. The container is sized 500 pixels, with margin adjustments for the axes and labels.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Coordiante plane - rotated

A rotated coordinate plane displays four labeled axes, dividing the space into liberal, conservative, left, and right quadrants. The SVG grid includes two solid axes and two lighter mid-lines, with a semi-transparent square marking the neutral center. Built with d3.v4, the visualization creates SVG lines and rectangles, then applies CSS transforms to rotate the entire container forty-five degrees. HTML text labels are positioned relatively and rotated using inline styles to align with the tilted axes. The data is entirely synthetic, demonstrating D3’s basic shape and text layout capabilities within a rotated coordinate system.

PPatrick Wojda

85% match

Loading thumbnail…

coordinate plane #2

This example displays a static coordinate plane with labeled axes, enclosed by a rectangular border and centered crosshairs marked by dashed lines. The visualization uses SVG lines styled with CSS, where the border and crosshair strokes are semi-transparent black. D3.js v4, selected via `d3.select` and `d3.append`, constructs a grid group and adds axis lines, with arrowhead markers from `<defs>` applied to the vertical axis using `marker-start` and `marker-end`. The entire graphic is offset by margins and rotated 45 degrees through a CSS transform, producing a tilted Cartesian perspective.

PPatrick Wojda

76% match

Loading thumbnail…

D3 Quadrant

Four labeled quadrants—Assess, Adopt, Avoid, and Analyze—organize a scatterplot of fabricated data points, each colored by category and positioned by random percentage and count values. The D3 v7 visualization uses linear scales for both axes and avoids overlaps with the legend in the lower-right corner. SVG rectangles, text, and circles render the quadrants, labels, and legend items, while a CSS keyframe animation applies a marching-ants dash offset to any path elements.

CCarloWK1202

65% match

Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

JJoker-tr

64% match

Loading thumbnail…

Line ordinal

This example draws a single horizontal line across an SVG canvas to illustrate ordinal positioning within a chart. The line, rendered with an arrow marker on each end, spans the width of the viewport with a 24-pixel margin. Using d3.v4, the code selects the SVG element and appends the line, then relies on the browser’s `getBoundingClientRect()` method to position two HTML labels, “Category A” and “Category B,” just below the line’s endpoints. The labels are placed via absolute CSS positioning within a container div, with their left offsets calculated from the line’s start and end coordinates minus the label’s own width.

PPatrick Wojda

63% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart uses color-coded polylines to display country-level survey data across multiple dimensions, including happiness, art/education, environmental concern, and organizational memberships. Built with D3.js v3, the visualization renders SVG paths for both background context (gray) and foreground focus (steel blue) lines. The code implements interactive brushing via `d3.svg.brush()` to filter data, and uses `d3.behavior.drag()` to allow users to reorder axes by dragging. Axis labels are mapped through `d3.scale.ordinal()` and `d3.scale.linear()`, with data loaded from the `total4.csv` file.

KKanwalNayan

62% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot uses gray background lines to show all countries and blue foreground lines for focus, with each axis representing a dimension from the total4.csv dataset (Happiness, Art/Educational, Environmental, and other membership categories). Users can drag axes to reorder dimensions via `d3.behavior.drag`, and brush along axes with `d3.svg.brush` to filter which lines remain visible. The code builds SVG paths with `d3.svg.line`, applies linear scales per dimension, and animates reordering using `transition`.

Cchungmin-yu

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

62% match