wobling1

@wobling1·9 public vizzes

Fork of Vega-Lite API Template

This bar chart displays forest area in square kilometers per country for 2012, ranked in descending order with each bar colored by country. It uses the vega-lite-api library to construct the visualization, registering Vega and Vega-Lite for rendering. The chart pulls data from a CSV file via d3.csv and applies custom axis and label styling from a configuration object. Tooltips show exact values on hover, and the chart automatically fits the full browser window.

Aug 31, 2023

Loading thumbnail…

Mouse Events

A circle tracks the cursor across a full-screen SVG canvas, updating its position in real time as the mouse moves. Built with React and ReactDOM, the component uses the `useState` and `useCallback` hooks to manage and update the mouse coordinates, while the SVG `onMouseMove` event handler triggers each repositioning of the circle.

Aug 29, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A React-based SVG visualization draws a single circle at the center of a 960×500 viewport and tracks the mouse position, logging each movement’s clientX and clientY coordinates to the console via a `handleMouseMove` event handler attached to the `<svg>` element. The code renders the circle using React's `createElement` and mounts it with `ReactDOM.render`. While the markup hints at a static smiley face composition in commented-out SVG, the active program only displays the plain circle and relies on React’s synthetic event system for mouse tracking, without any animation or data binding.

Aug 29, 2023

Loading thumbnail…

Fork of Smiley Face Part III wobling

This visualization shows a smiley face composed of a yellow circle with black outline, two eye circles, and a mouth arc, all centered in an SVG canvas. Built with React and D3 v5, it renders statically using SVG elements. The code imports D3’s `arc()` API to generate the mouth path, while React DOM manages the SVG structure. The face is positioned via a translation transform on a group, with fixed dimensions and coordinates defining each facial feature.

Aug 17, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A cartoon face is drawn inside a circle with a green-to-yellow gradient background. The face features two distinct eyes, a mouth drawn as an arc, and a set of teeth with vertical black separators. The code uses React components to assemble the face, with the D3 `arc` API generating the mouth and teeth paths, and SVG shapes for the eyes and background.

Aug 17, 2023

Loading thumbnail…

Track cursor

A circle tracks the cursor inside an SVG canvas, updating its position in real time as the mouse moves. The visualization uses React’s `useState` hook to store the cursor coordinates and an `onMouseMove` event handler to update them. The circle’s `cx` and `cy` attributes are bound to the state, causing the element to re-render with the new position. The example relies solely on React and SVG, with no external data or animation libraries.

Oct 26, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A React-based SVG visualization renders a solitary yellow circle, positioned at the top-center of a 960 by 500 canvas. The circle, with a radius of 30 pixels, is placed using coordinates derived from the canvas dimensions, though its vertical offset places it outside the visible area. The code uses React’s `ReactDOM.render` to mount the component, and JSX defines the SVG primitives directly. No interactive behavior, data fetching, or additional styling is present; the example focuses purely on basic geometric composition within a React rendering pipeline.

Oct 26, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a customizable smiley face built from modular React components, with a yellow circular background, two black eyes, and a curved mouth drawn using the D3 arc generator. The face is centered within an SVG via a transformed group, and all dimensions—such as eye offset, eye radius, mouth radius, and stroke width—are passed as props from the main App component. React 16.9 and D3 v5 handle the rendering, with the mouth path computed by `d3.arc` using specified inner and outer radii and angular ranges. The code demonstrates composing reusable SVG elements through React’s component architecture.

Oct 22, 2022

Loading thumbnail…

Hello HTML

A hand-drawn SVG smiley face demonstrates the basic structure of an HTML document with embedded Scalable Vector Graphics. The visualization uses three concentric circles to form the face, eyes, and mouth, with explicit inline styling for fill colors and stroke properties. The code relies on native SVG elements like `circle` and attributes such as `cx`, `cy`, `r`, `fill`, and `stroke-width`, without JavaScript or D3. The example serves as a minimal introduction to authoring SVG directly within HTML, highlighting coordinate positioning and shape styling in a static rendering.

Oct 20, 2022