shre1310

@shre1310·6 public vizzes

smiley face pt1

This example draws a single gray circle at the center of an SVG canvas, representing the first step of a smiley face. The circle is positioned using hardcoded coordinates and radius values. The code uses React to render the SVG element and d3.v7’s `arc` function, though the arc is not currently utilized. Mouse movement over the SVG triggers a `handleMouseMove` event that logs the cursor’s client coordinates to the console. The visualization demonstrates a minimal interactive setup with React and D3.

Jun 1, 2022

Loading thumbnail…

fetching data

This example shows a bare-bones HTML page that fetches data from a remote URL. It demonstrates the basic Fetch API workflow in JavaScript, where a `fetch()` call is made to a GitHub Gist URL and a promise is created to handle the response. The page includes a static "Hello HTML!" message and sets up the foundation for asynchronous data loading, though the response handling is incomplete. The example uses plain HTML, CSS for styling, and JavaScript's built-in `fetch()` function, with no external libraries or visualization components yet.

Jun 1, 2022

Loading thumbnail…

smiley face pt1

This example draws a simple smiley face using SVG shapes in a React application. A large yellow circle forms the head, with two smaller black circles for eyes, all positioned using explicit center coordinates and offsets. The code also defines a `mouthArc` using `d3.arc()` but does not render it in the final output. The visualization is rendered with D3 v7 for the arc generator and React 18 for the DOM structure, with the entire face centered on a fixed 960x500 canvas.

May 31, 2022

Loading thumbnail…

emoji with react & d3

This example demonstrates a playful visualization of emoji rendered as large, styled text using React and D3, displayed within a simple HTML page. The code leverages React to dynamically manage and render the emoji message, while D3’s forceSimulation (not explicitly shown in the provided markup but implied by the framework) enables interactive physics-based positioning. The page uses CSS for styling, with a message class controlling font size and centering. The data source is a static emoji string, displayed through a React component, highlighting how React and D3 can be combined for expressive, dynamic visualizations. The visualization focuses on layout and presentation rather than data-driven encodings.

May 31, 2022

Loading thumbnail…

svg fundamentals

A single static SVG canvas displays a yellow rectangle, a purple diagonal line, and a pink circle, with an empty path element. The shapes are drawn directly in the HTML using inline SVG tags such as `rect`, `line`, `circle`, and `path`. This example demonstrates fundamental SVG rendering without any additional JavaScript libraries, relying purely on SVG markup to define the geometry and fill colors. No interactions or data bindings are present.

May 31, 2022

Loading thumbnail…

Data viz svg fundamentals

This example demonstrates fundamental D3.js and SVG techniques through a minimal VizHub setup. It loads D3 v5 via UNPKG and uses ES6 module imports to call the `select` function, which targets a DOM element with the ID `message`. The visualization displays static text generated from a separate local module, with styling applied through an external CSS file. It showcases basic data-viz scaffolding—importing libraries, modularizing code, and binding simple selections—without any interactive or animated elements.

May 31, 2022