D3 PJAX (& execute JS loaded through the d3.html() request as well)

100%

D3 PJAX (& execute JS loaded through the d3.html() request as well)

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Apr 27, 2012

This example demonstrates a PJAX-style navigation pattern using D3.js, where clicking menu links asynchronously loads page content into a central area without full page reloads. The demo includes three pages (Anteater, Baobao, Cuttlefish), each displaying an article and a script-generated timestamp. The `d3.html()` API fetches the requested HTML fragment, while the `pjax` function handles click events, updates the browser history via `history.pushState`, and re-applies links after each load. It also executes any JavaScript found in the loaded fragment, using a custom `evalScript` function and a `d3.selection.prototype.replaceWtext` hack to safely replace `document.write` calls with text content.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 PJAX

This example demonstrates a PJAX-style navigation interface where clicking links updates the page content without a full reload, using the browser’s History API to manage the back and forward buttons. The code defines a `pjax` function that attaches click handlers to all `ul li a` links, calls `history.pushState` with the target URL, and loads the new page fragment via `d3.html`. It replaces the content of `#main` with the corresponding element from the fetched document and re-applies the link handlers. A `popstate` listener loads the previous state when the user navigates backward or forward.

Mmbostock

84% match

Loading thumbnail…

JS in HTML

This example demonstrates a webpage that displays the text “Hello HTML” in large, centered type, while also loading the D3.js library and importing its `select` function into the browser console. The page uses a simple HTML structure with an inline CSS style to format the message, and it references D3 v7.8.5 from the unpkg CDN. The accompanying JavaScript file imports `select` from D3 and logs it, showing how D3’s selection utilities can be accessed within a standard HTML document.

Aa0x0

68% match

Loading thumbnail…

JS in HTML

This example demonstrates a basic HTML page that loads D3.js and executes a simple JavaScript logging sequence. It shows how D3 can be integrated directly into an HTML file alongside custom modules, with the page displaying the text "Hello HTML!" styled at a large font size. The code imports D3 v7 from a CDN and uses ES module imports (`something.js`, `thing.js`) to log a concatenated message to the console. The visualization relies on standard DOM manipulation and console output rather than D3-specific rendering methods.

Aajoua

68% match

Loading thumbnail…

JS in HTML

This example demonstrates a minimal HTML page that loads D3 v7 and logs its core APIs to the browser console while displaying a simple text message. It imports modules like `select` from D3 and a custom constant from `something.js`, then outputs the imported values alongside D3’s `scaleLinear` function. The page uses a plain `<style>` rule for large text formatting and pulls D3 from an unpkg CDN link in the HTML head. No data visualization is rendered; the focus is on verifying module imports and D3 availability in a self-contained starter.

Wwspwll@gmail.com

68% match

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

67% match

Loading thumbnail…

JS in HTML

This example showcases a minimal D3 v7 setup where JavaScript and HTML interact directly. It displays a large, centered "Hello HTML!!" message styled via CSS, while the accompanying `index.js` module logs both an imported string from `something.js` and the D3 library object to the browser console. The page loads D3 from a CDN, and the code demonstrates basic module imports and console output rather than data visualization.

EEdgar Cortez

67% match

Loading thumbnail…

JS in HTML

This example shows a minimal setup for using D3 within an HTML page with JavaScript modules. It demonstrates how to import functions from D3 and from a local module, logging both a custom string and the `select` function to the browser console. The code uses D3 v7 via a CDN link, React is referenced only in the README, and the visible behavior is limited to console output with no visualization rendered.

MMatthew Bruffey

67% match

Loading thumbnail…

d3 JS

This example demonstrates the basic D3.js pattern for binding an array of data values to HTML elements and appending new elements to the DOM. Using the `d3.select`, `selectAll`, `data`, `enter`, and `append` methods, it creates three `<p>` paragraphs inside a `<div>`, each displaying its corresponding data value as text. The code relies on the v5 release of the d3.js library, loaded via a CDN link in the `index.html` file, and uses an `app.js` script to perform the selection and binding operations.

TThelimog

67% match