puru001

Fork of Shapes with SVG and CSS

This example demonstrates how SVG shapes (a circle and a rectangle) are rendered directly in HTML using CSS for styling, while D3.js is loaded via UNPKG and used with local ES6 modules. The code imports `getCars` from a local module, which returns a promise resolving to an array of car data after a two-second delay, and `generateReport`, which filters cars by price and formats them using `formatCar`. The report is then displayed in a message element, showcasing asynchronous data handling and module imports within a VizHub project.

Apr 27, 2022

HTML Cars Report

This example demonstrates how to build an HTML-based report using ES6 modules with D3 v5 and VizHub. A static array of car objects is loaded asynchronously through a Promise, filtered by price, and formatted into text using `formatCar` and `generateReport` functions. The report renders in a `pre` element, displaying only cars below a price threshold, while the page also includes hardcoded list items with CSS highlighting. The code imports D3 via UNPKG and uses local module imports like `./getCars` and `./generateReport`.

Apr 27, 2022

Fork of Fork of Cars Report

This example demonstrates how to build a simple, text-based report from a static dataset of cars using ES6 modules. It loads a hardcoded JSON array of car objects via a local async function and filters them by price, formatting each match into a readable line with the `formatCar` helper. The report is generated using the `generateReport` function and displayed inside a `<pre>` element. The code shows how to use `import`/`export` for both local modules and the D3 library, though D3 itself is not used in the logic.

Fork of Cars Report

This example displays a text-based report of cars filtered by price. It shows how to compose local ES6 modules and import them into a main script, with `generateReport` filtering a hardcoded `cars` array and mapping each entry through `formatCar` to produce formatted strings. The resulting message is rendered into a `<pre>` element using `document.getElementById`. It relies on D3 v5 loaded via UNPKG, though the report itself uses no D3-specific APIs, instead demonstrating modular JavaScript organization in a VizHub environment.

Cars Report

This example displays a single car entry from a small dataset, formatting it as a text string with the year, make, model, and price. It demonstrates importing data from a local ES6 module (`cars.js`) and using JavaScript destructuring within the `formatCar` function. The page renders the message into the `#message-element` DOM node, showing how VizHub supports modular code and data sharing without relying on D3 for basic output.

Cars Report

This example displays a simple “Hello World” message in large type on a plain web page. It demonstrates fundamental VizHub workflows, including loading D3.js from a CDN and using ES6 module imports. The code imports the `select` function from D3 but primarily uses the native DOM API, `document.getElementById().textContent`, to set the text. A commented-out local module demonstrates how to import custom ES6 files, though only the D3 import is active in the displayed result.

Interaction with react - Mouse move

A React application renders a single SVG circle that tracks mouse movements across the viewport. As the pointer moves, the circle's center repositions to match the cursor's clientX and clientY coordinates, which are captured by an onMouseMove event handler. The state is managed through React's useState and useCallback hooks, while the SVG coordinate system is defined with explicit width and height attributes of 960 and 500 pixels respectively. The visualization uses d3 v7 and React 18, though it does not rely on D3 for the interaction logic itself.

Mouse move

A single black circle follows the user’s mouse movement across an SVG canvas. The circle’s center position updates in real time, tracking the cursor’s clientX and clientY coordinates. The example uses React’s `useState` and `useCallback` hooks to manage and update the mouse position, while D3’s `arc` is imported but not used in the visible code. The SVG renders within a React component, with a yellow static smiley face shown only as a commented-out reference in the HTML.

Smiley face Part 1

A yellow circle follows the mouse cursor across an SVG canvas, responding to pointer movement. The visualization uses React's `useState` hook and `onMouseMove` event to track the cursor position, updating the circle's `cx` and `cy` attributes with the current coordinates. The D3.js library and React bindings render the SVG element, with the D3 `arc` function imported but unused. The graphic demonstrates real-time coordinate mapping through React state management.

Fork of Fork of Fork of Smiley face Part 1 - Done

A grid of six-by-three identical smiley faces, each rendered as a small yellow circle with two eyes and a curved mouth, fills the screen. The visualization shows how React components compose reusable SVG shapes, with each face built from `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents. The code imports `arc` from d3.v7 to generate the mouth path, while `range` from d3 creates the array of faces. Rendering uses React 18 with SVG, and each face's eye radius is randomized, producing subtle variation across the repeated pattern.

Fork of Fork of Smiley face Part 1 - With react

A grid of eighteen small smiley faces is rendered with React, each face composed of reusable components for the background circle, eyes, and mouth. The mouth uses d3’s `arc` generator to draw a semicircular path, while the eye radius is randomized per face via `Math.random()`. The entire layout is generated from a `range(6*3)` array, with each face rendered as an SVG by the `FaceContainer`, which positions a translated group. The code imports React, ReactDOM, and d3’s `arc` and `range` utilities from the v7 library.

Fork of Smiley face Part 1

A yellow smiley face drawn with SVG circles and an arc for the mouth, centered on a 960×500 canvas. The React components compose the face from a background circle, two eyes, and a mouth, with all positions and sizes passed as props. D3’s `arc` generator creates the mouth path using an inner and outer radius with fixed start and end angles. The `FaceContainer` wraps the elements in a translated SVG group, and the example is rendered with React 18 and D3 v7.