Eloquent JS: Chapter 10

100%

Eloquent JS: Chapter 10

✓ Published1🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Eloquent JS: Chapter 7 (project)

This example demonstrates a simulated delivery robot navigating a network of roads connecting locations in a village. It shows three different robot strategies—random movement, a fixed mail route, and goal-oriented pathfinding—and measures their efficiency by running many simulated parcel-delivery tasks and comparing the average number of steps taken. The JavaScript code defines a graph from a static list of road connections, implements a `VillageState` class to track robot position and undelivered parcels, and uses a breadth-first search (`findRoute`) for the goal-oriented robot. The simulation runs entirely in the console, with no visual output.

Eemberix@gmail.com

71% match

Loading thumbnail…

Eloquent JS: Chapter 11

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.

Eemberix@gmail.com

70% match

Loading thumbnail…

Eloquent JS: Chapter 6

This example demonstrates three JavaScript exercises from Eloquent JavaScript, Chapter 6, implemented as plain JavaScript classes and console output. It shows a `Vec` class with vector addition, subtraction, and length calculation, a `Group` class with add, delete, has, and static from methods, and a custom `GroupIterator` making groups iterable via `Symbol.iterator`. The code runs directly in the browser console, logging results for each exercise, including a numeric accumulation loop and string iteration, with no external libraries or frameworks beyond vanilla JavaScript.

Eemberix@gmail.com

68% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

67% match

Loading thumbnail…

Eloquent JS: Chapter 2

This example showcases the output of four JavaScript programming exercises from Chapter 2 of *Eloquent JavaScript*, rendered directly in the browser console. It demonstrates looping with `for` and `while` statements to print a triangular pattern of `#` symbols, the FizzBuzz sequence with conditional `if`/`else` logic, and a chessboard grid built through nested loops. The code uses plain JavaScript with `console.log` for output, and the accompanying HTML page uses inline CSS for styling. No external libraries are used, focusing purely on core language syntax and algorithmic thinking.

Eemberix@gmail.com

67% match

Loading thumbnail…

VizHub

A tutorial example demonstrates JavaScript modules and data handling alongside a simple animated SVG face. It loads a hardcoded JSON array of car objects through a mock asynchronous function, filters the results by price, and formats them into a text report. Concurrently, D3 v5 selects an SVG element and builds a yellow circle face with eyes, animated eyebrows using `transition.attr`, and a mouth drawn with the `d3.arc` path generator. The example shows object destructuring in `formatCar.js` and promise-based data retrieval via `getCars`.

JJason Skelton

66% match

Loading thumbnail…

Let's make a face with

This example demonstrates how D3.js (v6) can load and structure car data using JavaScript modules, filtering vehicles by price and formatting each entry as a readable string. The visualization renders inside an SVG container, although the primary focus is on an educational tutorial that uses `import`/`export` statements across `formatCar.js`, `generateReport.js`, and `getCars.js`. A bundled script (`bundle.js`) connects the modules to the HTML page, while the code defines a `generateReport` function that filters cars under a specified maximum price and maps them to formatted text output. The example emphasizes modular coding practices rather than interactive graphical elements.

AAbdulazizfh

66% match

Loading thumbnail…

Eloquent JS: Chapter 5

This example displays the output of four JavaScript exercises from Chapter 5 of Eloquent JavaScript, all run in the browser console. It shows array flattening using `reduce`, a custom `loop` function, an `every` predicate implementation with `filter`, and a `dominantDirection` function that uses `countBy` and `characterScript` to classify text direction. The code relies on the standard JavaScript array methods and the predefined `SCRIPTS` dataset. The page renders only static text and styled body text via CSS, with results logged to the console.

Eemberix@gmail.com

65% match