block with text

100%

block with text

✓ Published0🌍 Public

Last edited Jul 15, 2018

Created on Jun 29, 2018

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Rectangles using data

This example shows a blank interactive canvas with a single instructional text prompt, inviting code edits. The visualization uses D3 v4 to append an SVG element to the body, sized at 960 by 500 pixels, and places a monospaced text label at a fixed position. The code relies on D3’s selection and append methods to construct the SVG structure, though it renders no data-driven rectangles or other marks. The rendering approach is static SVG output, with no external data source loaded.

IIgathi

79% match

Loading thumbnail…

test-block

This example displays a single SVG text element that reads “Edit the code below to change me!” positioned at a fixed location within a 960 by 500 pixel viewport. The visualization uses the D3.js v4 library to select the body element, append an SVG container, and place the text using explicit x and y coordinates. The code applies a monospace font and a 36-pixel font size, demonstrating basic SVG text rendering with D3’s selection and attribute methods. No data is loaded; the example serves as a minimal starting point for interactive edits.

BBharath4259

79% match

Loading thumbnail…

fresh block1

A simple SVG canvas displays a short, static text message. The example uses D3.js v4 to append a single `<text>` element to the SVG, positioning it at a fixed coordinate and styling it with a monospace font. The code demonstrates the basic D3 selection and appending pattern, with the text content and attributes set directly in the script. No data binding or interactive behavior is included, serving as a minimal starter template for further visualization work.

IIgathi

79% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

78% match

Loading thumbnail…

fresh block

This example demonstrates a minimal SVG-based data visualization that renders a single text element on a canvas. The code uses D3.js v4 to select the body element, append an SVG container, and add a static text label that reads "Edit the code below to change me!" with a monospace font. The visualization serves as a starting point for users to modify and expand upon, with the text positioned at a fixed location and sized for visibility. The rendering relies on D3's selection and append methods, with no external data sources or interactive features included.

AAjar06

78% match

Loading thumbnail…

fresh block

This example displays a static SVG canvas with a single centered text element reading "Edit the code below to change me!" in a large monospaced font. The code uses D3 v4 to select the body, append an SVG of 960 by 500 pixels, and position the text at coordinates (120, 200). It demonstrates basic D3 selection and attribute manipulation without any data binding, transitions, or interactive behavior. The visualization is a minimal placeholder generated from a Blockbuilder template, illustrating the initial state of a D3 project before custom code is added.

JJoseEduinCulmaCaviedes

78% match

Loading thumbnail…

fresh block

This example demonstrates a minimal SVG canvas with a single line of text, serving as a starting point for a data visualization. The code uses the D3.js v4 library to select the body element, append an SVG container, and add a text element positioned at coordinates (120, 200). The visualization shows how to set basic SVG attributes and styling, including font size and family, through D3 methods. The rendering relies on the SVG API, with the text content hardcoded in the script. The source is a template from blockbuilder.org, providing a simple structure for users to modify and build upon.

BBillalD

78% match

Loading thumbnail…

fresh block

This example is a minimal D3.js v4 template that renders a static SVG canvas with a single line of text. It demonstrates the basic structure of a D3 block, showing how to select an HTML element, append an SVG container, and add a text element with custom styling. The code uses `d3.select` to target the body, then chains `.append("svg")` and `.append("text")` to build the visualization. The text is positioned with explicit `x` and `y` attributes and styled via inline CSS properties. No data is loaded or bound; the visualization simply displays the placeholder message, serving as a starting point for further development.

HHeronwang

78% match