eypkllas@gmail.com (@eypkllas), VizHub

Fork of Cheap Tricks for Interaction

This interactive D3.js map displays world countries, colored light green against a blue sphere, and highlights each country in red on hover with a tooltip showing the country’s name. Using the `d3.geoPath` projection and a `geoNaturalEarth1` projection, it renders geographic features from the `world-atlas` TopoJSON and TSV data sources. The visualization incorporates the `zoom` interaction module from D3’s `d3.zoom` API, enabling users to pan and scale the map via mouse events. It employs SVG rendering for vector-based output.

Apr 23, 2024

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move. It uses d3.select to bind SVG elements and d3.arc to generate curved facial features. The face is rendered as static SVG shapes, with animated eyebrow movement driven by D3’s data-join and update patterns. The code imports select and arc directly from the d3 module, using a v5 bundle, and structures the visualization as a clean, modular JavaScript file separated from the HTML and CSS. The data is purely synthetic, defined inline within the script.

Apr 22, 2024

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows animate. It shows how D3’s selection and mutation methods create and update SVG shapes directly. The code uses `d3.select`, `d3.arc`, and attribute getters to size elements from the SVG element, rendering the face entirely with vector graphics. The face’s eyebrows move, but the specific motion pattern is not detailed in the provided source. The implementation relies on D3 v5 and operates on a blank SVG canvas with no external data source.

Apr 22, 2024

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create colorful, static visual elements. It shows circles, rectangles, lines, and paths positioned within a 960x500 viewport, with some shapes using inline fill attributes and others inheriting styles from CSS classes like `.lines`. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) and CSS rules for stroke and fill properties, while applying transforms for scaling and translation. The rendering is entirely SVG-based, with no external data sources or JavaScript libraries involved.

Apr 22, 2024

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move. It uses d3.select to bind SVG elements and d3.arc to generate curved facial features. The face is rendered as static SVG shapes, with animated eyebrow movement driven by D3’s data-join and update patterns. The code imports select and arc directly from the d3 module, using a v5 bundle, and structures the visualization as a clean, modular JavaScript file separated from the HTML and CSS. The data is purely synthetic, defined inline within the script.

Apr 22, 2024

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move. It uses d3.select to bind SVG elements and d3.arc to generate curved facial features. The face is rendered as static SVG shapes, with animated eyebrow movement driven by D3’s data-join and update patterns. The code imports select and arc directly from the d3 module, using a v5 bundle, and structures the visualization as a clean, modular JavaScript file separated from the HTML and CSS. The data is purely synthetic, defined inline within the script.

Apr 22, 2024