Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Dec 10, 2021

Created on Dec 10, 2021

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

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

86% match

Loading thumbnail…

Fork of HTML Starter

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.

MMichaelBGonzalez

81% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, showing a static SVG icon and text element. The code imports the `select` function from D3 via ES6 modules and uses it to position the text at specified coordinates. The SVG is defined in the HTML with an embedded path for the VizHub logo, while styles are applied through an external CSS file. D3 v5 is loaded from UNPKG, and the visualization renders entirely as SVG without dynamic data or interaction.

PPiotr Paszek

81% match

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek

80% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a static SVG visualization with a large yellow circle centered on a canvas, accompanied by a brief text message. The visualization renders a simple geometric shape with a black outline, while the page also displays "hello where are you" as paragraph text. The code demonstrates importing D3 functions via UNPKG, specifically using `select` from `d3` to set text content, and imports a local ES6 module to define the string "Hello VizHub!". The SVG is defined directly in the HTML, with the circle's position and dimensions specified through SVG attributes.

Ttestingwithaws

80% match

Loading thumbnail…

Fork of Hello VizHub

This example shows static SVG shapes—a red circle and a green rectangle—positioned on a black background, demonstrating basic D3 selection and styling via `d3.select`. The page loads D3 v5 from UNPKG and uses a local ES6 module (`myMessage.js`) to export a message, though the message is not rendered in the visible output. The SVG is defined directly in `index.html`, while `index.js` applies the background color through a D3 selection. The code illustrates VizHub’s support for CDN imports, local modules, and inline SVG markup.

AAyush Morankar

80% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to use VizHub to combine D3.js v5 with local ES6 modules. It renders two predefined SVG shapes and an icon from the `<defs>` section using `<use>` elements, while a D3 `select` call updates the text of a div with 'Hello VizHub!'. The code imports `select` from `d3` directly and a message from a separate local module, showcasing modular code organization. SVG rendering is handled natively in the markup, with styles defined in an external CSS file.

PPiotr Paszek

79% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal VizHub project using D3.js and ES6 modules. It renders a static SVG circle while displaying the text “Hello VizHub!” in a separate div element. The code imports the `select` function from D3 via UNPKG, as well as a local `message` constant from an external module, showing modular code organization. The SVG is defined directly in the HTML, with styling controlled by a linked stylesheet.

EEvan Liu

79% match