Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Dec 10, 2021

Created on Dec 7, 2021

This example shows a simple SVG legend with two colored circles labeled “variable A” and “variable B,” positioned at fixed coordinates. The visualization is built with D3 v7, where `d3.select` targets the SVG element with the `legend` id and appends circle and text elements. It uses static attributes like `cx`, `cy`, `r`, and `style` to define the legend’s appearance. The page also includes commented-out bar chart code using `d3.selectAll` and `.data`, but only the legend renders.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a static SVG legend that maps categorical data labels to distinct colors using a JavaScript `Map` object. It renders ten entries, each pairing a colored circle with a text label, to document color assignments for COVID-19 related event types. The code uses D3 v7’s `select` and `append` methods to add circles and text elements to an existing SVG container, positioning them with hardcoded `cx`, `cy`, and `x`, `y` attributes. Styling is applied inline via `.style()` calls, with font size and alignment set for readability.

MMichaelBGonzalez

85% match

Loading thumbnail…

Fork of Hello VizHub

This example generates a static SVG legend that maps relationship categories—such as COVID-19 Case, household__c, and school_name—to distinct colors using a JavaScript Map and D3 v5. The code appends colored circles and text labels to an SVG element via `d3.select` and `svg.append`, iterating over the map entries to position each item vertically. It demonstrates importing D3 functions like `select` and local ES6 modules, while rendering the legend entirely with SVG shapes.

MMichaelBGonzalez

81% match

Loading thumbnail…

Fork of HTML Starter

A single gray circle is rendered on an SVG canvas, positioned horizontally based on a fixed data value of 100 within a larger array of numbers. The example demonstrates the minimal setup for binding an array to SVG elements using D3 v5’s `selectAll` and `data` pattern, followed by `enter` and `append` to create the circle. The circle’s `cx` attribute is set via an accessor function that returns the data value, while its `cy` and `r` are constants. The page uses a plain HTML structure with an inline script loading D3 from a CDN, illustrating a bare-bones reactive data join without scales or axes.

TTheophile11

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic D3.js chart construction, including SVG creation, linear and logarithmic scales, and band scales for categorical data. It renders rect elements as a bar chart with axis generation using `d3.axisLeft` and `d3.axisBottom`. The code also shows data binding with arrays and JSON objects, plus animated text transitions using `transition().duration()`. Styling includes CSS classes and inline SVG attributes with a yellow background.

KkazGuido

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates three SVG circles arranged horizontally in red, black, and blue, styled with CSS for a large centered text message. The visualization uses plain SVG elements and CSS styling in an HTML page. The circles are drawn with specific cx, cy, and r attributes, showcasing basic geometric shapes rendered in the browser. The code relies on vanilla HTML, CSS, and JavaScript without any external libraries, serving as a minimal interactive template for building visualizations.

EEjenavi16

81% match

Loading thumbnail…

Fork of HTML Starter

This example displays a single, large, unstyled SVG element on a page with an oversized font size. The JavaScript code begins setting up the SVG's dimensions using D3 v6, selecting the `svg` element and applying width and height attributes. It then initiates a selection for bar elements, though the implementation is incomplete. The visualization shows the starting point for a bar chart, with the page structure defined in static HTML and the SVG rendering approach.

Kkbs5886

81% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG visualization: a single green circle positioned at coordinates (150, 50) with a radius of 50. The code uses plain HTML markup with inline SVG elements, requiring no external libraries or JavaScript. The rendering approach relies entirely on the browser's native SVG support, and the circle's appearance is defined through SVG attributes for fill color and geometry. This serves as a minimal starter template for building more complex SVG-based visualizations.

Ddwikbtn

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive webpage that uses D3.js to manipulate HTML elements and render an SVG graphic. It shows a static red circle with a blue fill and black stroke inside an SVG, alongside paragraphs that become blue after D3 selects them. The code uses `d3.selectAll` and `d3.select` to target elements, and the data-join pattern with `.data()` and `.enter().append()` to dynamically add new paragraphs listing numbers 4, 8, 15, 16, 23, and 42. The page relies on D3 v6 loaded via a CDN, with CSS controlling basic text alignment and font size.

Cclicketeer

81% match