Pere Ginebra Solanellas

@PereGinebra·3 public vizzes

D3 testing1

This example draws a single SVG circle and text element using D3 v5, displaying the number "3" in blue. The code defines a reusable `createNumIcon` function that appends a stroked circle and a text label to an SVG canvas via `d3.select` and the `append` and `attr` methods. The circle has a fixed radius of 20 pixels and a blue stroke, while the text uses Arial font at 35 pixels. No data is loaded; the visualization is purely static and demonstrates basic SVG shape creation with D3.

Jan 25, 2022

Loading thumbnail…

D3 testing2

A D3.js bar chart visualizes a single student’s self-assessed skills across five categories: programming, computers, art, communication, and collaboration. Each category is rendered as a fixed-width rectangle, with bar heights scaled by multiplying the numerical skill value by ten. The chart uses SVG rectangles appended directly to a hardcoded, static data object, with no axes or scales defined. Interactive tooltips appear on hover, implemented via D3 mouseover, mousemove, and mouseleave event handlers that dynamically update an HTML div’s opacity and position.

Jan 25, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays the number 5 inside a red circular container on a blank HTML page. The visualization uses plain HTML for the heading, CSS for the circle’s border-radius, dimensions, and background color, and no JavaScript libraries. It demonstrates a minimal static data-display approach, with the number hard-coded in the markup rather than generated from an external data source. The rendering relies entirely on the browser’s default CSS layout and styling.

Jan 25, 2022