Eloquent JS: Chapter 11

100%

Eloquent JS: Chapter 11

✓ Published0🌍 Public

Last edited Apr 15, 2021

Created on Apr 14, 2021

This example visualizes asynchronous programming concepts from Chapter 11 of Eloquent JavaScript using D3 v5. It renders a heading and an SVG canvas that uses d3.forceSimulation to demonstrate how JavaScript handles concurrent tasks. The visualization shows tick intervals with setTimeout, promise resolution ordering, and blocking code execution timing, all represented through animated SVG elements. The code displays timing diagrams showing when setTimeout callbacks and Promise.then handlers execute relative to synchronous code, using D3's force layout to arrange nodes and animated transitions to illustrate event loop behavior over time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Starter - Asynchronus

This example demonstrates asynchronous programming in JavaScript using Promise objects and the `setTimeout` API, showing how to handle operations that take time to complete. The code defines a `waitSeconds` function that returns a Promise resolving after a specified delay, then chains `.then()` to log a message once the time has elapsed. Using D3 v6 loaded from a CDN, the page includes explanatory text about asynchronous versus synchronous behavior, with no data visualization or rendering involved—the focus is purely on illustrating the callback and Promise patterns.

Mmaxthamt

76% match

Loading thumbnail…

Hello VizHub

This example demonstrates asynchronous programming patterns using JavaScript Promises, with text updates appearing sequentially in two HTML divs. It shows how a chain of `Promise` objects, created through the `setTimeout` function, executes one after another, updating the visual output after each one-second delay. The visualization uses D3.js v5 through the `select` function to modify text content, while a separate module file exports an unused string constant. The styling relies on the Ubuntu font from Google Fonts with a dark background and light text, though the core interaction is purely timing-based rather than data-driven.

Aasimplesinger

75% match

Loading thumbnail…

promise

This example demonstrates the use of native JavaScript Promises within a D3.js v5 visualization. It logs a message to the console and returns a Promise that resolves, showcasing asynchronous control flow alongside a simple HTML page. The code loads D3 from UNPKG, uses an ES6 module for a text message, and renders the message "Hello VizHub!" in large centered text via CSS styling. The visualization highlights how Promises integrate with D3’s event-driven environment.

Ppei9223

73% match

Loading thumbnail…

JS and HTML

This example demonstrates how to build a custom visualization by combining JavaScript and HTML with D3.js. It shows a dynamic scene driven by a force-directed simulation, where nodes move and interact in real time. The code uses `d3.forceSimulation` to compute physical forces and update node positions, while `d3.select` and `d3.create` manage the SVG container and elements. The rendering is performed entirely through JavaScript DOM manipulation, with the `index.html` file providing a minimal body that loads D3 from a CDN and attaches the `bundle.js` script. The visualization’s appearance changes dynamically, emphasizing the interplay between code, layout, and interactive graphics.

GGautier DAVID

72% match

Loading thumbnail…

D3 Selection Exercise

This animated visualization demonstrates D3’s data-join and selection pattern by continuously updating a set of circles and connecting lines in an SVG scene. The code uses `selectAll` and `.join()` within `drawCircles` and `drawLines` to bind and update elements based on procedurally generated data from `makeCircleData` and `makeLineData`. Circle positions, radii, and colors oscillate with a time counter `t`, while lines link adjacent circles and inherit their stroke colors. Running at 60fps via `setInterval`, the example highlights how D3 v7’s `range`, `select`, and join methods handle dynamic, frame-by-frame updates in a React context.

Mmax-31

71% match

Loading thumbnail…

D3 in Action Chapter 11 - Example 6

This example demonstrates a hybrid rendering technique for large-scale network visualizations, using 3,000 nodes connected by roughly 1,000 random links. It first draws the nodes as red SVG circles, which retain mouse interactivity, while simultaneously rendering the edges on an overlay HTML5 Canvas for performance. A force-directed layout, driven by `d3.layout.force()`, updates node positions on each tick, clearing the canvas and redrawing the link strokes before repositioning the SVG circles. The approach balances interactivity with animation speed, leveraging both the Canvas `getContext("2d")` API and D3’s selection logic.

FFrissAnalytics

71% match

Loading thumbnail…

Eloquent JS: Chapter 10

This example visualizes the module system from Chapter 10 of Eloquent JavaScript, showing the road network between village locations as a graph. The visualization uses d3.v5 to render an SVG canvas with nodes and edges based on the `roads` array, which defines connections between named places. The code demonstrates modular programming by splitting functionality into separate files, including a `graph` module that exports a `buildGraph` function. It processes road pairs using string splitting and passes them to construct the final `roadGraph` object, highlighting how modular design organizes the data flow.

Eemberix@gmail.com

70% match

Loading thumbnail…

D3 js part 2

A looping animation of circles moves vertically in a sine-wave pattern across an SVG canvas, with the number of circles oscillating between five and fifteen over time. The code uses D3 v7's `select`, `range`, and the data-join method `.join('circle')` to bind array data to SVG elements, updating their `cx` and `cy` attributes each frame via a `setInterval` callback. The visualization highlights D3's declarative enter-update-exit pattern for dynamic datasets.

GGautier DAVID

70% match