Skip to main content
SimilarExport ZIP
100%

Ejercicios de prueba

✓ Published2🌍 Public
MMario Morales Barquero
Last edited May 6, 2021
Created on May 6, 2021

This example displays a static SVG containing circles, rectangles, lines, and a path, arranged to illustrate basic D3.js rendering. It loads product data from a JSON file using `d3.json`, logs the array to the console, and includes instructions for converting height values to numbers and creating bar rectangles via a data join. The SVG is pre-populated with fixed shapes, and a separate `bundle.js` contains the data-loading code. The visualization demonstrates simple SVG elements with custom styling from `styles.css`, highlighting D3’s ability to manage external data alongside hand-coded graphics.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Practic03 | SVG

This example demonstrates static SVG shapes and primitives, including circles, rectangles, lines, and paths, drawn directly on a 960x500 canvas. It uses D3 v5 only to load the library, while the visualization itself is composed entirely of hand-coded SVG elements with inline styles and CSS classes for grouping and theming. A JavaScript snippet parses a hardcoded JSON array of car data, filters it by price, and formats a text report, though this output is not visibly integrated into the SVG graphic. The page also imports a `bundle.js` file, suggesting additional external code.

Hhimanshucse2012
77% match
Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng
76% match
Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck
75% match
Loading thumbnail…

test

This example demonstrates how to create and position SVG circles using D3.js, with a focus on the general update pattern and method chaining for dynamic data binding. The visualization initializes an SVG element sized to its container, defines a dataset of circles with properties such as center coordinates, radius, and fill color, and renders them with a semi-transparent opacity. It also includes a utility for distributing text elements in a spiral layout with collision detection and random rotation, showcasing how to combine D3 selections with custom layout logic for flexible and reusable visualizations.

Ssdfux@yahoo.com
75% match
Loading thumbnail…

My first test

This example demonstrates a minimal SVG circle rendered with D3.js, showing how to append and style a single shape. The page loads d3.v4 and d3-dsv.v1, logging the D3 object to the console. A circle with radius 280 is added to an empty SVG element, while hidden CSS classes for line styling exist but are not used. The visualization emphasizes basic SVG manipulation rather than data binding or interaction, serving as a foundational test of D3’s selection and attribute methods.

Mmattaouad
75% match
Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania
75% match
Loading thumbnail…

Prueba

This example renders a blank SVG canvas using D3 v5 within a React framework. The `index.js` file selects the SVG element via `d3.select` and attempts to read its width and height attributes, while the `styles.css` applies red text styling to the body. The visualization currently displays no data or graphical elements, serving as a minimal template that sets up the wrapper and selection logic for future chart development.

Ccacho2294
75% match
Loading thumbnail…

SVG TEST

This example displays a static collection of SVG primitives, including circles, rectangles, lines, and paths, arranged in groups with transforms. The composition showcases basic shapes with hard-coded fills, strokes, and coordinate positions within a 960 by 500 pixel canvas. The rendering relies on raw SVG elements defined directly in the HTML, with CSS classes like `.lines` applying stroke properties and line joins. The code uses plain SVG APIs (`<circle>`, `<rect>`, `<line>`, `<path>`, and `<g>`) alongside CSS styling, without any JavaScript libraries for layout or interaction.

JJames Song
75% match