danielstaal

@danielstaal·5 public vizzes

HTML Starter

This example shows a simple interactive fruit scene where circles represent an apple, orange, and lemon in an SVG canvas. Hovering over each fruit displays its Dutch name as text near the cursor position. The visualization uses D3 v5 selections and event handlers (`on('mouseover')`, `on('mouseout')`) to append and remove text elements dynamically. A reusable `maakFruit` function creates each circle, while `fruitMuis` and `fruitUit` manage the hover labels. The page is built with a basic HTML structure, React framework, and CSS styling for centered orange text.

Feb 8, 2023

Loading thumbnail…

HTML Starter

This example demonstrates a basic interactive SVG fruit bowl in a web page. It uses D3.js to add a hover interaction: when the user mouses over the orange circle, D3 appends a text label saying “Orange” to the SVG; on mouse-out, the label is removed. The visualization is built with static SVG elements—a purple translucent background circle, an orange, a yellow, and a green circle—stylized via CSS and rendered using D3’s selection and event handling methods (`.on`, `.append`, `.remove`). The code uses HTML, CSS, and D3 v5 loaded from a CDN.

Mar 18, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a simple SVG fruit bowl: a purple translucent circle containing an orange circle labeled “Orange,” plus yellow and green circles. The visualization uses inline SVG elements—`<circle>` and `<text>`—positioned and styled directly in the markup, with CSS controlling global text alignment and font size. It demonstrates a bare-bones setup without any JavaScript libraries, relying solely on static SVG rendering for its geometric composition.

Mar 18, 2020

Loading thumbnail…

HTML Starter

The visualization plots four individuals' ages against their heights as colored circles on a scatterplot with labeled axes. Each circle animates upward from the baseline to its final position using d3 transitions with staggered delays. Hovering over a point enlarges it and displays the person's name via a text element. D3 v5 scales, axes, and the Tableau10 color scheme manage the mapping, while the data is hardcoded in the chart script.

Mar 9, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page rendering static SVG content with a title and a chart area, styled through CSS. The code uses raw HTML and SVG elements, with a separate `chart.js` file that only logs "ello" to the console, showing no actual data visualization. Rendering relies on an inline `<svg>` tag and CSS styling for layout, particularly with opacity, but the page does not employ any JavaScript libraries or datasets. It serves as a bare-bones starting point for exploring visualization setup in a web environment.

Feb 12, 2020