Skip to main content
SimilarExport ZIP
100%

Test Rollup

✓ Published0🌍 Public
NNick Hogle
Last edited Jan 25, 2024
Created on Jan 25, 2024
Forked from D3 Transitions

This example demonstrates a minimal setup for integrating CoffeeScript with D3 v7 using Rollup. It shows how a Rollup configuration with the `rollup-plugin-coffee-script` plugin compiles a CoffeeScript entry file (`main.coffee`) that logs “Hello from Coffeescript” to the console. The page itself is an empty HTML body, with D3 loaded as a global library via the VizHub dependency configuration. The visualization is a functional test of tooling rather than a data-driven graphic, relying on Rollup’s build pipeline to process the script.

AI-generated description

Testing Rollup and CoffeeScript

MIT Licensed

Similar vizzes

Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt
65% match
Loading thumbnail…

Car Reports

This example demonstrates VizHub’s ability to load D3 from UNPKG and combine local ES6 modules with a simple page. It displays a static “hello world” message in two places: a `<pre>` element populated by `index.js`, and a large vertically centered `#message` div. The code imports from `"d3"` and a local `myMessage.js` module, though no D3 functions are actually invoked. The included `bundle.js` and `styles.css` show the scaffolding for bundling and styling a visualization project.

Ccrocsman
65% match
Loading thumbnail…

HTML Starter

This minimal HTML page demonstrates a bare-bones web setup using inline styles, a separate JavaScript file, and the D3 library loaded via CDN. It logs the D3 object to the browser console, verifying that the library has loaded successfully. The example serves as a starting point for building more complex visualizations, showing how to structure an HTML document with linked CSS and JavaScript, while relying on D3 v6 for future data-driven graphics.

Aainhoadieruiz@gmail.com
65% match
Loading thumbnail…

d3-v7 template

This example demonstrates a minimal setup for the latest version of the d3 library, d3.v7, loaded from a CDN, and uses the `d3.min` aggregation function to compute the minimum of an array of values derived from an arithmetic expression. The console output shows both the loaded d3 object and the calculated result, serving as a basic template for initializing a d3 visualization project. The code is housed in an index.html file that loads a separate bundle.js script, with the main logic concentrated in that JavaScript file.

LLaurens
65% match
Loading thumbnail…

Teste de D3 v1

This example demonstrates a minimal data-loading pipeline using D3 and React. It fetches a CSV file containing CSS color data from a GitHub gist, then displays a summary message with the file size in kilobytes, the number of rows, and the number of columns. The code uses the D3 `csv` function to parse the remote data, React’s `useState` and `useEffect` hooks to manage asynchronous loading, and the custom `message` module to format the output as text. The visualization is rendered as SVG, with the result shown in a large `<pre>` element.

Xxilingus
65% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, rendering a message to the page. It uses D3 v5 loaded from UNPKG and imports the library via the ES6 module syntax. The code also shows how to import local CSS and JavaScript modules, with the HTML structure defined in index.html and the visualization logic in bundle.js.

Rreo440
65% match
Loading thumbnail…

D3 Custom Bundle II

This example demonstrates a minimal custom D3 bundle built with Rollup. It imports `selection`, `select`, `selectAll`, and `event` from `d3-selection`, along with `d3-transition` to enable the `transition` method on selections. The page appends an `<h1>` element, applies initial inline styles, then animates a transformation over 1.5 seconds using a chained transition. The code highlights how Rollup can include only the necessary D3 modules when explicitly importing required dependencies.

Mmbostock
64% match
Loading thumbnail…

test

This example demonstrates how to load D3 via UNPKG and use ES6 module imports in VizHub. It uses `select` from D3 to set the text content of an HTML element, and imports a local ES6 module to supply the message. The code renders "Hello VizHub!" centered on the page via an external stylesheet. The visualization showcases the integration of D3 v6 with modular JavaScript structure.

Nnokcharathae
64% match