Etupino

@Etupino·4 public vizzes

Bubble Chart

This bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis, ratings on the y-axis, and calorie count as bubble size, with color distinguishing beverage types. Built with D3 v7, the visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color mapping, and d3.schemeSet1 for the categorical palette. Data is loaded from a local CSV file using d3.csv, and the SVG rendering includes custom legends for both bubble size and color categories, with all marks styled with red strokes and 0.7 opacity.

Oct 8, 2023

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG, drawn with D3.js v5 shapes including circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth. The code uses `select` and `append` to build the DOM, while `transition` animates the eyebrows upward and back downward over two-second intervals. The example demonstrates fundamental D3.js DOM manipulation and animation, with the face centered via an SVG `g` transform.

Oct 8, 2023

Loading thumbnail…

My Travels

This example presents a personal travel map titled "My Travels," visualizing a list of visited countries and cities in a simple SVG graphic. The visualization uses basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with transformations to create a stylized, abstract representation of travel routes. The page renders through inline SVG within an HTML structure, styled by a minimal external CSS file. The code directly constructs SVG elements using JavaScript within a React framework, though the visual output relies purely on static SVG markup.

Oct 8, 2023

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying the message "Hello HTML!" centered in a large font. The code uses plain HTML structure with a `<div>` element styled through embedded CSS, including a `font-size` of 13em and text alignment. JavaScript is not actually invoked in this static page, despite the starter’s reference to it, making the rendering purely CSS-based. The example serves as a bare-bones template for building visualizations, contrasting with the React Starter it links to.

Oct 8, 2023