pangaotata

@pangaotata·8 public vizzes

Fork of Lets make a face with D3.js!

This example draws a simple face using D3.js, with a large yellow circle for the head, two black eyes, and an orange mouth. The rendering renders directly to an SVG canvas, with the face elements positioned relative to the center of the 960 by 500 viewport. The code uses `d3.select` and `d3.arc` from the D3 v6 library, along with `d3.line` to define the mouth’s path, applying fills and strokes to the shapes.

May 27, 2021

Loading thumbnail…

d3 test

This example renders a smiley face as a static SVG graphic using React and D3’s `arc` generator. A yellow background circle is drawn with a black stroke, and two black eye circles are placed symmetrically on either side of the face’s vertical center. A mouth path is created by the D3 arc, which defines a half-ellipse from a start angle of -π/2 to +π/2, positioned near the bottom-right of the canvas. The code uses React functional components, D3’s `arc()` for the mouth’s path, and SVG elements for circles and paths.

May 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in enormous type, centered on the page, with a dark background. It uses plain HTML and CSS to style the body and a single script tag to log “Hello JavaScript!” to the browser’s developer console. No external libraries or data sources are involved. The rendering relies solely on the browser’s default CSS layout and the `console.log` API.

May 27, 2021

Loading thumbnail…

Fork of SVG shapes and animation sandbox

Colorful stacked rectangles form a stylized sky, while several cloud shapes drift across the scene along curved paths, contrasting soft and darker tones. A pink flower with a green stem is drawn beneath the clouds, adding a foreground element to the composition. The example uses raw SVG elements and the `animateMotion` API to create looping, indefinite motion for the clouds. The static sky and flower are built from basic SVG shapes with no external data or JavaScript libraries.

Mar 23, 2021

Loading thumbnail…

Bar Chart Race

This bar chart race animates the changing rankings of the world's most valuable brands from 2000 onward, using data from Interbrand. The visualization presents a dynamic competition where bars representing top brands, such as Coca-Cola and Microsoft, shift positions over time. Built with React and D3 v6, it uses SVG and animation to smoothly interpolate the values and ranks between yearly data points, creating a fluid, time-lapse effect. The code relies on D3's `scaleLinear`, `scaleBand`, `transition`, and `easeLinear` to orchestrate the movement, while a custom linear interpolation between keyframes and sorting logic drive the visual ranking updates.

Mar 23, 2021

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive D3.js visualization that draws a simple teal X across an SVG canvas. The chart container fills the entire browser window using CSS positioning, and the `redraw()` function dynamically extracts the container’s client width and height on every resize event. The code then sets the SVG’s dimensions accordingly and uses D3’s data join to update two line elements, ensuring the X always stretches corner-to-corner. The visualization relies on `d3.select`, `attr`, and the window’s `resize` listener, with all rendering performed via SVG line elements.

Mar 23, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates how to build a simple smiley face using D3.js v5, with animated eyebrows that move up and down. The code uses d3-selection to append SVG elements including circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. A chained transition with a two-second duration moves the eyebrows upward, then returns them to their original position, creating a blinking expression. The face is centered on a 960×500 SVG canvas using a group transform, with all shapes drawn using fundamental SVG attributes.

Mar 23, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS classes. The SVG is scaled and translated via transform groups, with explicit fills, strokes, and stroke-widths applied. It uses raw SVG elements within an HTML page, with CSS controlling the path stroke color, line join, and cap styles. No external libraries are involved; the rendering relies solely on native SVG presentation and a linked stylesheet.

Mar 23, 2021