nawbx1

@nawbx1·5 public vizzes

data viz project

This example displays a horizontal bar chart ranking Tunisian cities by population, using D3.js to bind data from a CSV file and render SVG rectangles. The chart includes a red title and x-axis label, with population values formatted using abbreviated notation. The code demonstrates fundamental D3 selections, scales, and axes, specifically using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. It also applies data transformation by multiplying each population value by 1000 before rendering.

May 7, 2022

Loading thumbnail…

ttv

This interactive SVG visualization renders a smiley face whose eyebrows move, demonstrating fundamental DOM manipulation with D3.js v5. The code uses d3.select and d3.arc to construct the facial features, while the animation of the eyebrows is driven by direct DOM element updates. The example loads data from an external bundle.js script and applies styling from a separate stylesheet, with the SVG canvas sized at 960 by 500 pixels.

May 7, 2022

Loading thumbnail…

data viz project

A yellow smiley face on a black-outlined circle uses D3.js v5 to animate its eyebrows in a looping transition. The SVG face is centered via a translated group, with eyes placed using circles and eyebrows as rectangles. D3’s `transition` and `attr` methods move the eyebrow group up and down repeatedly, while the mouth is drawn with the `arc` generator using a half-circle path. The example demonstrates basic DOM manipulation and shape creation in D3, rendering entirely in SVG.

May 5, 2022

Loading thumbnail…

data viz

This example demonstrates fundamental DOM manipulation with D3.js by creating a smiley face whose eyebrows move. The visualization uses D3 v5 selections and the `arc` generator to draw the face’s features, while the interactive animation is driven by data-driven updates. The SVG element is selected and sized from its attributes, with a CSV file providing the underlying data. The code illustrates how D3 binds data to visual elements and transitions them, resulting in a simple yet effective demonstration of dynamic SVG rendering.

May 5, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single large, centered message reading “Hello HTML!” on a plain web page. The text is styled using CSS, with a font size defined in em units and centered alignment. The page is a minimal HTML document with a single division element, and its rendering relies solely on the browser’s built-in HTML and CSS handling, with no JavaScript libraries or external data sources. It serves as a basic starter template for demonstrating core web technologies.

May 5, 2022