Full Name Greeting with ReactiveModel

100%

Full Name Greeting with ReactiveModel

✓ Published0🌍 Public

Last edited Jun 13, 2016

Created on Apr 15, 2016

This example demonstrates how to build a dynamic web page using ReactiveModel, D3 4.0, and Bootstrap. It shows two input boxes for first and last names, with a greeting message that updates live as the user types. ReactiveModel’s reactive functions compute a full name from the inputs and then a greeting, which updates the DOM via d3.select and the text method. The code uses the model’s property setters and dependency strings to propagate changes through the data flow graph.

AI-generated description

<p align="center"> <a href="https://github.com/datavis-tech/reactive-model#full-name"> <img src="https://cloud.githubusercontent.com/assets/68416/15454260/1f12dba8-2051-11e6-9fcf-4fa31e6ba365.png"> </a> <br> The data flow graph for <a href="https://github.com/datavis-tech/reactive-model#full-name">this example</a>. </p>

This example shows how to make a simple dynamic Web page using ReactiveModel, D3 4.0 and Bootstrap. When you type in the First Name and Last Name input boxes, the greeting text updates.

Part of a series of examples demonstrating ReactiveModel.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/05780c9eb997b86eab76'>ModelJS firstName lastName</a>

Built with blockbuilder.org

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2072922&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

mit Licensed

Similar vizzes

Loading thumbnail…

ModelJS Example

This example demonstrates reactive data binding with the Model.js library, showing how a full name updates automatically as users type into first and last name input fields. The page contains a simple HTML form where two text inputs feed values into a model instance, and a `model.when` listener combines the firstName and lastName properties into a fullName string. The full name is then rendered into a span element and logged to the console using D3.js selection and text methods. The example illustrates how Model.js tracks property dependencies and triggers callbacks asynchronously.

CCurran Kelleher

74% match

Loading thumbnail…

Reactive Mixins

This example demonstrates how to encapsulate reusable graphical behaviors using Model.js and D3.js, with a focus on dynamic resizing. It shows a margin convention that adjusts an SVG’s width and height, a gray background rectangle, a large diagonal X, and a centered circle, all clipped by a rectangle that follows the inner dimensions. The visualization responds to window resizing by reading the container’s size via `clientWidth` and `clientHeight`, then updating the model’s `box` property, which triggers the reactive `my.when` callbacks to redraw. The code uses D3’s selection and data-join patterns for lines and rects, alongside Model.js’s reactive property tracking to coordinate layout and rendering.

CCurran Kelleher

63% match

Loading thumbnail…

ReactiveModel Resize

This example demonstrates a D3 v4 visualization that dynamically resizes to fill its container using ReactiveModel. The code renders two diagonal lines forming an X, with stroke widths and positions updated on window resize events. ReactiveModel orchestrates reactive properties for width, height, and the SVG element, while d3.selection.merge efficiently handles enter and update selections. The visualization responds to container size changes by reading clientWidth and clientHeight, redrawing the lines each animation frame.

CCurran Kelleher

62% match

Loading thumbnail…

Bar Chart with ReactiveModel

This example demonstrates a bar chart built with the ReactiveModel library, which manages a reactive data flow through the D3.js v4 API. The chart renders letter-frequency data from a CSV file, using SVG elements and animated transitions that respond to changes in the underlying model. The code defines reusable functions for SVG sizing, margin conventions, data columns, linear and band scales, and axes, with the reactive model automatically updating the visualization when properties change. The bar chart fills the viewport and includes grid lines and labeled axes, with animation applied during updates.

CCurran Kelleher

61% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that displays a person's name from a hardcoded dataset. It renders the text "John" in the browser using HTML and JavaScript, without any charting or visualization libraries. The code parses a JSON array of two records and selects the first entry's name attribute. The page updates a `<pre>` element's content through the Document Object Model, using a large font size for visual effect. The functionality relies on the imported React framework and standard JavaScript methods.

Aaraisch

60% match

Loading thumbnail…

D3JS HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript to display a centered greeting message. The code defines a `<div>` element with the class `message`, styled with a large font size and centered alignment using CSS. The page relies on vanilla JavaScript and HTML structure rather than external libraries, serving as a bare-bones starter template for D3JS projects. It shows how basic styling and markup can be combined without any data visualization or interactive behavior.

Nnicolasdq00

59% match

Loading thumbnail…

Model Tree

This example displays a minimal HTML page titled "Model Tree" that renders only static text and logs a greeting to the browser’s developer console. It uses no data-visualization libraries, charts, or graphical output; the React framework is referenced only in a link to a starter template. The page’s entire interactive behavior is limited to the JavaScript `console.log` call, which prints "Hello JavaScript!" upon loading. There is no visible tree structure, model, or data-driven rendering, making it a barebones scaffold rather than a functional visualization.

Jjpeleuterio

59% match

Loading thumbnail…

Hello D3

This minimal example presents a blank page that centers a large, invisible title placeholder, with all output directed to the browser console. It demonstrates the foundational pairing of D3.js version 6 with React, loading the library via a `<script>` tag from a CDN. The code logs a JavaScript greeting and includes a commented-out `d3.select` call, highlighting the basic setup for a new D3 project while leaving the actual visualization steps for further development.

NNanaWong

58% match