jordyBernard406

@jordyBernard406·5 public vizzes

smily

A yellow circle with a black outline forms a smiley face, featuring two solid black eyes and a half-circle mouth that appears as a filled arc. The example demonstrates basic SVG drawing with React by using D3’s `arc()` generator to create the mouth path, while circles are rendered directly as SVG elements. The layout centers the face using a translated `<g>` group, with fixed coordinates for the eyes and mouth radius, all within a 960×500 viewport.

Mar 17, 2021

Loading thumbnail…

globe zoom

This interactive data visualization displays global demographic and agricultural data on a zoomable three-dimensional globe. Users can rotate the globe and zoom into specific regions, with country boundaries rendered as geographic paths. The visualization uses D3 v3 with geo projection libraries, featuring both orthographic globe and map projections. Data points are loaded from CSV files and displayed as colored scatterplot markers, with tooltips providing country-specific values. The interface includes controls for switching between different datasets and projection types, all rendered with SVG animation.

Mar 17, 2021

Loading thumbnail…

smiley

A smiley face composed of a yellow circle with black stroke, two eyes, and a half-arc mouth is drawn in an SVG. The face is centered at 500x250 within a 1000x500 viewport. The code uses React for component rendering and d3.arc to generate the mouth path, with a start angle of π/2 and end angle of 3π/2. All shapes are positioned via SVG transform and fixed radius/offset constants.

Mar 16, 2021

Loading thumbnail…

fork

A yellow circle with two small black eyes and a mouth arc forms a partial smiley face. The SVG is drawn using React, with D3’s `arc` generator defining the mouth’s inner and outer radii and its start and end angles. Circle elements create the face and eyes, while a `path` renders the mouth. The code uses `d3.arc` for the mouth shape and React’s `ReactDOM.render` to mount the component.

Mar 16, 2021

Loading thumbnail…

smiley_1

A yellow smiley face rendered as an SVG using React and D3. The face includes two black eyes and a mouth drawn as a D3 arc path with a thick stroke, all positioned via SVG circles and transforms. The central circle uses a thick black outline, and the mouth is created with `d3.arc()` using defined start and end angles. The code renders the face inside a `<g>` element translated to the center of a 960x500 viewport, with all shapes sized relative to fixed pixel offsets.

Mar 16, 2021