Marina Shemesh

@MarinaShemesh·12 public vizzes

Shapes with SCG and CSS

This example shows four basic SVG shapes rendered in a 960×500 viewport. Two circles and two rectangles demonstrate SVG’s default black fill versus explicit CSS-independent color attributes, using named colors and hex values. The code relies on plain HTML, inline SVG elements, and a linked stylesheet that resets margins and hides overflow. It uses no JavaScript, React, or data, serving as a bare-minimum illustration of static SVG markup and CSS integration.

Mar 24, 2021

Loading thumbnail…

Parsing CSV data with D3

This example shows how to parse a CSV file and report basic characteristics of the dataset, including row count, column count, and approximate file size in kilobytes. The visualization is text-based, displaying these statistics in a large `<pre>` element. It loads a CSS color list from a GitHub gist using D3 v5’s `d3.csv` method, which returns a promise, and then formats the output with `d3.csvFormat`. The page is a minimal HTML document styled with CSS and rendered within a React framework.

Mar 12, 2021

Loading thumbnail…

Mouse Follower

The visualization displays a single black circle that follows the mouse cursor across an SVG canvas that fills the entire viewport. React’s `useState` and `useCallback` hooks track the cursor’s client coordinates, which are updated via the SVG `onMouseMove` event handler. The circle’s `cx` and `cy` attributes are set to the current mouse position, and the component re-renders on every movement using `ReactDOM.render`. React 16.9 serves as the framework for this interactive, state-driven SVG rendering.

Mar 12, 2021

Loading thumbnail…

3d_animation

This example presents a static HTML page that displays a heading and logs a message to the browser console. The page uses basic CSS to style the heading and JavaScript for the console output, demonstrating the foundational structure of a web page. It relies on standard HTML, CSS, and the browser’s built-in JavaScript console, rather than any external libraries or data sources. The code is a minimal starting point for web development, referencing a React starter as a potential next step.

Mar 9, 2021

Loading thumbnail…

Loading and Parsing CSV VanillaJS

This example shows how to load and parse a CSV file using vanilla JavaScript in a bare HTML page. It fetches a CSV file containing a CSS color list from a GitHub Gist, reads the response as text, and logs both the raw text and the stored data array to the browser console. The code uses the Fetch API and async/await syntax via a custom `fetchText` function. No visualization is rendered; the focus is solely on the data-loading step.

Mar 9, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the foundational step of loading and parsing CSV data in a web-based visualization. It fetches a CSV file containing a CSS color list from a GitHub gist and logs the raw text to the browser console. The code uses the Fetch API with an asynchronous `fetchText` function, wrapping `fetch()` and `response.text()` to retrieve the data. While no visualization is rendered yet, it establishes the data-loading pattern essential for subsequent charting with libraries like D3.js.

Mar 8, 2021

Loading thumbnail…

Refactor of My Smiley Face

A yellow smiley face rendered with SVG components in React, featuring two eyes, red cheeks, and a mouth drawn as an arc. The face is centered using a translated group element, with all shapes positioned relative to that center. The code imports `arc` and `line` from d3, using `arc` to generate the mouth path with specified inner and outer radii and angles. Static circle elements define the eyes and cheeks, while React functional components structure the SVG markup. The visualization demonstrates a refactored approach to assembling a simple figure with reusable, declarative components.

Mar 7, 2021

Loading thumbnail…

Fork of My Smiley Face

This example shows a simplified yellow smiley face constructed from SVG shapes, centered on a 960×500 canvas. The face includes a large yellow circle for the head, two small circles for eyes, two red cheek circles, and a wide arc for the mouth, all rendered as separate SVG elements. Built with React and D3 v6, the code uses D3’s `arc()` generator to create the mouth path, while the head, eyes, and cheeks are plain SVG circles. The `index.js` file defines dimensions and offsets as constants, and renders the composition via ReactDOM, placing everything inside a single `<g>` transform.

Mar 5, 2021

Loading thumbnail…

My Smiley Face

This example uses React with D3 to render a stylized smiley face as an SVG graphic. The visualization constructs the face from primitive shapes—a yellow circle for the head, two dark circles for eyes, red cheek circles, and a mouth drawn as an arc path created with D3's `arc` generator. All elements are positioned relative to the center of a 960×500 canvas using SVG transformations, with stroke widths and radii defined as constants. The code demonstrates how D3's arc path generator integrates with React's declarative SVG rendering to produce a simple, vector-based illustration.

Mar 5, 2021

Loading thumbnail…

Smiley Face - Part 3

This example shows a smiling face built from SVG primitives, with a yellow circular head, two dark eyes, and a thick crescent-shaped mouth. The face is centered within a 960 by 500 viewport using a D3 arc generator to define the mouth’s path, while React manages the component structure and rendering. The code uses d3.arc with inner and outer radii and specified start and end angles to create the smile, and positions all elements relative to a central translation group.

Mar 5, 2021

Loading thumbnail…

Smiley Face - Part 11

A yellow smiley face rendered with React and SVG, drawn as three circles: a large yellow face with a black stroke, and two smaller black eyes. The face is centered on a 960-by-500 canvas, with eye positions offset horizontally and vertically from the center. The example demonstrates static SVG circle elements created via React components, using JSX to set attributes like `cx`, `cy`, `r`, and `fill` directly in the markup, with ReactDOM rendering the tree into the DOM.

Mar 4, 2021

Loading thumbnail…

Smiley Face - Part 1

A yellow circle with a thick black outline forms the face, accompanied by two smaller black circles for eyes, leaving the smile for a later part. The static SVG rendering uses plain HTML elements for the circles, with coordinates and radii set directly on the shapes. The example demonstrates basic SVG construction without any JavaScript libraries, relying on the browser's native SVG support for display.

Mar 2, 2021