fresh block

100%

✓ Published0🌍 Public

Last edited Mar 17, 2016

Created on Mar 17, 2016

This example shows a simple geometric composition of three stacked rectangles in alternating blue and yellow, paired with a black diagonal line that cuts across them. The visualization is created using the D3.js library, version 3.5.5, to append SVG elements to the page. Specifically, the code uses `d3.select` to add `rect` shapes with explicit pixel coordinates and fills, and `d3.svg.line()` to generate a path from three data points. The line is drawn with zero stroke width and a black fill, making it a solid triangle-like shape. The rendering relies entirely on static SVG attributes, with no data loading or interaction.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/bd733dc1c154f8a67141'>fresh block</a>

Similar vizzes

Loading thumbnail…

fresh block

A stacked bar chart shows three horizontal rectangles in teal and gold, arranged vertically, with a black central triangle and a white polygon outline at the upper left. The chart renders fixed SVG shapes directly, using `d3.select` and `svg.append` to construct the scene. The bars, with widths of 270 pixels and heights of 50, sit at y-coordinates 200, 250, and 300, while the triangle connects points from (150,350) to (275,275) and (150,200). The visualization uses D3 v4 and plain SVG attributes, with no data file or interaction.

HHeywhoyou22

84% match

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

KKerchoo

83% match

Loading thumbnail…

fresh block

Three green rectangles of varying heights stand in a row on a blank SVG canvas, each bar’s x-position and height mapping directly to the same numeric value from a hardcoded three-element array. The visualization uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `rect` elements, setting their `width` to a fixed 25 pixels while deriving `height` and `x` from each datum. The SVG container is created via `d3.select("body").append("svg")`, with the chart’s simplistic styling and minimal layout emphasizing the direct translation of data values into geometric properties.

HHadiem

83% match

Loading thumbnail…

fresh block

This example visualizes a small set of six rectangles, each positioned and sized by explicit x/y coordinates and width/height values, with colors assigned individually. It shows the spatial arrangement of these shapes on an SVG canvas, computed by finding the maximum extents of all rectangles to set the canvas size. The code uses D3 v3 to bind the JSON data to `rect` elements, setting position and size attributes, while also appending a canvas element to the body. The data source is inline in the script, and the rendering relies on standard SVG attributes.

IIgathi

82% match

Loading thumbnail…

fresh block

This example shows three circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js version 3.5.5 to bind an array of numbers to circle elements and map each value to screen coordinates. The code selects the SVG container, appends circle elements, and sets their cx and cy attributes directly from the data, while fill colors are assigned conditionally: green for 30, purple for 70, and red for 110. The rendering approach relies on D3’s data join and attribute manipulation, with no axes or scales involved.

BBrandonStroud

82% match

Loading thumbnail…

fresh block

This example shows three fixed circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js to bind an array of numbers to circle elements, setting their horizontal and vertical centers from the data and giving them a constant radius. The `style` method applies a fill color through a conditional function that maps the values 30, 70, and 110 to green, purple, and red, respectively. The SVG container is created with a fixed width and height of 200 pixels, and the circles are appended using D3’s data join pattern.

BBrandonStroud

81% match

Loading thumbnail…

fresh block test

This example visualizes six colored rectangles positioned on an SVG canvas, with each rectangle’s dimensions and color defined by an array of JSON objects. It first calculates the maximum bounding box dimensions from the data using a for loop, then sets the SVG’s size accordingly. The code uses D3 v4’s selection and data binding methods (`d3.select`, `.data`, `.enter`) to append and style the rectangles via `.attr` and `.style` calls. The visualization highlights a simple approach to mapping raw data to geometric primitives, with the source data embedded directly in the script and rendering done entirely through SVG.

IIgathi

81% match

Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1

81% match