Recreate Marks with ellipse

100%

Recreate Marks with ellipse

✓ Published0🌍 Public

Last edited Sep 27, 2017

Created on Sep 27, 2017

This example recreates a small graphic from Chapter 5 of *Visualization Analysis & Design* using D3.js v4, rendering six distinct marks—four ellipses and two circles—in light blue on an SVG canvas. The visualization highlights how different mark shapes encode data points, with varied radii and positions suggesting categorical or quantitative distinctions. The code uses static SVG `<ellipse>` and `<circle>` elements directly in the HTML, with no data binding or interactive behavior. It demonstrates a simple, hard-coded approach to reproducing a published chart, relying on D3’s minimal role for element creation and styling. The rendering is purely SVG-based, with no axes or scales, focusing solely on mark geometry.

AI-generated description

This plot is to re-create one of the small graphics from Chapter 5 of Vasualization Analysis & Design using D3.js.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Re-create Marks & Channels Graphic!

This example recreates a static graphic illustrating marks and channels using D3 v5 with SVG rendering. It shows a rectangular frame containing a series of red circles connected by black line segments, forming a simple network diagram. The code uses D3 selections to append SVG elements, including `rect`, `circle`, and `path` primitives, with hard-coded coordinates and attributes like `cx`, `cy`, `r`, and `d` to position and style each mark. No data binding or interactive behavior is present; the visualization is purely illustrative.

Ssrrajendran

80% match

Loading thumbnail…

Circle and Ellipse

This example shows a collection of blue circles and ellipses arranged on a white canvas inside a rectangular frame. The shapes vary in size and orientation, including large and small circles, plus horizontally and vertically flattened ellipses. The visualization uses D3 v5, importing `select` from the d3 module to manipulate the SVG. All shapes are appended directly to an SVG element with fixed positions and dimensions, using D3’s selection and attribute methods to set coordinates, radii, and fill colors. No data source or interaction is involved; the display is purely static.

CChooo4u

80% match

Loading thumbnail…

Circle and Ellipse

This example showcases a set of geometric shapes—circles and ellipses—arranged in a framed SVG canvas. The visualization presents various configurations, including a large circle, a small circle, and horizontally and vertically oriented ellipses, all filled with a steelblue color. The code uses D3.js v5 to select the SVG element and append each shape, setting attributes like center coordinates (`cx`, `cy`), radii (`r`, `rx`, `ry`), and a styled border. A black rectangular frame is drawn using a path, and the rendering is done entirely through SVG. The data source is not specified, as the shapes are manually defined in the script.

CChooo4u

78% match

Loading thumbnail…

Re-create Marks and Channels Graphic

This example reproduces a marks and channels graphic as a static SVG. It displays three scatterplots that demonstrate how visual encodings, such as position, color, and size, map to data values. The plots use grey axes and reference lines, with blue circles as the primary marks. The SVG is constructed with nested `<g>` groups and `transform` attributes to create the layout. The code uses standard SVG elements like `circle`, `line`, and grouping, with styling defined in the CSS file. The rendering is purely SVG, without any JavaScript libraries or data processing.

NNTCHANG1289

78% match

Loading thumbnail…

Circle and Ellipse

This example demonstrates a geometric composition of circles and ellipses within a rectangular frame. The visualization uses D3 v5’s `svg` selection and appending methods to draw shapes, including a large circle, a horizontal ellipse, and several small points, all filled in steel blue. The SVG canvas is 960 by 500 pixels, with a manually defined path outlining the frame. The code directly sets shape attributes like `cx`, `cy`, `rx`, and `ry` to position and size each element.

CChooo4u

77% match

Loading thumbnail…

D3 Marks & Channels

This example demonstrates five fundamental D3 marks and encoding channels using a small array of numbers. It shows circles positioned along the x-axis and y-axis, circles scaled by area, rectangles representing length, and symbols displaying different shapes. The visualization uses D3 v7 with the `select`, `symbol`, and `symbolsFill` APIs to bind data and generate SVG elements. The data is a simple fixed set of integers, rendered as multiple separate SVG canvases, each focusing on a distinct mark and channel combination.

SSubhendu Karmakar

76% match

Loading thumbnail…

Re-create Marks and Channels Graphic

This visualization recreates a 2D marks and size channels graphic, demonstrating the encoding of quantitative values through the area of basic shapes. The SVG canvas displays two horizontal sequences of geometric marks: squares and circles, each arranged in four steps of increasing size. The example uses raw SVG elements—specifically `rect` and `circle`—to show how area encodes data, with the entire group scaled by an SVG `transform` attribute. No JavaScript libraries are involved; the rendering relies entirely on static SVG markup and external CSS for styling.

Vveagy

76% match

Loading thumbnail…

Marks and Channels Shape using D3

This example uses D3 to draw a square outline with a set of lines and circles within it, arranged to explore the marks-and-channels concept of shape. The code leverages D3’s SVG manipulators—appending a `<rect>`, `<line>`s, and `<circle>`s via `select`, `append`, and `attr`—with fixed coordinates to create a geometric composition. Rendered as SVG on a white background, the square’s stroke and fill, the gray lines, and the dark circles demonstrate varied visual channels.

KKCachel

76% match