Hello Lea (MAVO and D3 interaction)

100%

Hello Lea (MAVO and D3 interaction)

✓ Published0🌍 Public

Last edited May 17, 2017

Created on May 16, 2017

This example demonstrates interoperability between the Mavo content editor and D3.js. It shows how D3 can read and display data that is stored and editable through Mavo’s HTML storage. The code uses a Mavo `mv-app` element with a `#data` storage block containing JSON, and D3’s `d3.interval` function repeatedly reads that JSON via `d3.select` to update a paragraph’s text. The result is a live greeting that changes when the user edits the name in the Mavo interface.

AI-generated description

Testing interaction between MAVO and D3.

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js can be used to update the text content of an HTML element, showing a simple data-binding pattern. It loads D3 from UNPKG and uses the `select` function to target a div with id `message`, setting its text to a string imported from a local ES6 module. The visualization also illustrates modular JavaScript with `import` statements for both D3 utilities and custom code, while a CSS file centers the text. The rendering approach is straightforward DOM manipulation, with no external data source.

Ssalim.mir@outlook.com

63% match

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub integrates D3.js to display a customized greeting message on a webpage. The HTML document loads D3 version 5.9.1 from a CDN and includes a dedicated `<div>` element for the output. Through an ES6 module, the code defines a static text string, and then uses D3’s `select` function to target that container and inject the message into the DOM. It showcases a minimal, modular setup for importing libraries and local JavaScript modules.

SSubit Timalsina

63% match

Loading thumbnail…

Hi VizHub

This example demonstrates a minimal interactive webpage that displays a greeting message using D3.js. It defines a custom ES6 module for the text content and renders it inside a styled HTML element. The visualization relies on D3's `select` method to update the DOM, while the page’s appearance is controlled through CSS with an imported Google Font. The code showcases basic module importing and D3’s utility for DOM manipulation, serving as a simple introduction to VizHub’s workflow.

TTLAndrade

63% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js can load and display data from a local ES6 module while also using D3 to update the DOM. It shows a simple text message and a car data value (the year 2000) rendered on the page. The code uses `import { select } from 'd3'` to manipulate the `#message` div, imports data via a local `cars.js` module, and reads a property from the parsed JSON array. The visualization relies on D3 v5 loaded from UNPKG, with styling applied through an external stylesheet.

CCecilia831

62% match

Loading thumbnail…

activity-6

This example displays the text “Hello VizHub!” centered on a blank page. It demonstrates how D3 can be used for basic DOM manipulation, with `select('#message')` setting the text content of an HTML element. The code also showcases the use of local ES6 modules by importing a message constant from `myMessage.js`. The example illustrates how to combine a D3 import with custom module imports within a VizHub environment.

Mmn0658

62% match

Loading thumbnail…

Hello VizHub

This example demonstrates how the VizHub platform can be used to build a minimal interactive data-visualization page, showing static text rendered with large, centered styling. The visualization displays the message "Hello VizHub!" on a dark blue background with a custom Ubuntu font. The code uses D3 v5’s `select` method to target a `div` element and set its text content using a value imported from a separate ES6 module, `myMessage.js`. Styling is applied via an external CSS file that also imports a Google Font.

LLabin Ojha

62% match

Loading thumbnail…

Hello D3 v7

This example demonstrates the simplest possible D3 v7 setup: it displays the text “Hello D3 version 7” and “Hello D3 version 7.8” in the browser using the `select` API from the D3 library (loaded via `https://unpkg.com/d3@7.8.5/dist/d3.min.js`). The rendering approach is purely DOM-based; the code selects the `body` and `div` elements and assigns the greeting strings as text content. No data source or visualization is involved, serving solely as a minimal introduction to working with D3’s selection and text manipulation methods.

MMiha Tomšič

62% match

Loading thumbnail…

Hello D3

This example displays a large, centered “Hello D3!” message in bright text against a dark background using the Ubuntu font. It demonstrates a minimal D3.js setup where the `select` API targets a `div` element by its `id` and sets its text content from an imported ES6 module. The page loads D3 v5 from a CDN and uses a separate `styles.css` file for typography and color. The simple interaction shows how D3 can manipulate the DOM alongside modern JavaScript module imports.

PPratibha KS

62% match