MichaelBGonzalez

@MichaelBGonzalez·6 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that renders the text “Hello D3 version 7” in the center of the page at a large font size. It imports the `select` function from D3 v7 and uses it to set the `text` content of the `body` element. The page loads D3 from a CDN via `unpkg.com` and includes a separate `bundle.js` for the JavaScript logic.

Dec 28, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple SVG card with a title label and a greeting message, styled with a drop shadow. It shows how to import D3.js from a CDN via `https://unpkg.com/d3@5.16.0/dist/d3.min.js` and use the `select` API from the `d3` module to set text content. The code also imports a local ES6 module (`./myMessage`) to supply the string `'Hello VizHub!'`, and uses an external `styles.css` for text formatting.

Dec 13, 2021

Loading thumbnail…

Legend Practice

This example generates a custom legend that maps network node and edge types to specific colors for a COVID-19 contact tracing visualization. It uses D3.js (v5) to append SVG `circle` and `text` elements within an SVG container, iterating over a JavaScript `Map` of record types. The legend lists entries like "COVID-19 Case" and "household__c," with colors defined programmatically. The code also sets the page background to black and loads libraries via UNPKG.

Dec 13, 2021

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.

Dec 10, 2021

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.

Dec 10, 2021

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.

Dec 10, 2021