Skip to main content
Log in
O

oreltop

@oreltop·4 public vizzes

Loading thumbnail…

Shapes with CSS and SVG

This example displays two circles rendered inside an SVG container on a plain HTML page. The circles are drawn with SVG elements, using a `<g>` group transformed along the x-axis, with one circle having a pink fill and the other having no fill but a thick black stroke. The page applies basic CSS for typography and layout, including a monospace font and hidden overflow. No JavaScript libraries are used; the visualization relies solely on native SVG markup and CSS styling.

Mar 10, 2021
Loading thumbnail…

HTML report

This example displays a static HTML report page with a title heading and a bulleted list of four items, where the first item stands out in red. The page uses plain HTML for structure, a linked external CSS stylesheet for typography and styling, and JavaScript is referenced as part of a minimal setup. The styles.css file sets the body font size and family to monospace, and applies a color rule to the highlighted class. The code demonstrates basic document styling without any dynamic data or external libraries.

Mar 10, 2021
Loading thumbnail…

Fork of Stylized bar chart

This bar chart displays the populations of ten countries from the United Nations 2019 dataset, using a stylized horizontal layout with teal bars and a clean axis. The visualization is built with React and D3 v6, using `scaleBand` and `scaleLinear` to map data to SVG rectangles. Population values are formatted using D3’s `format` with a custom tick label that converts billions to millions. The chart includes interactive tooltips via SVG `<title>` elements, and the data is loaded asynchronously using `d3.csv`.

Mar 10, 2021
Loading thumbnail…

Fork of D3 Starter

This example is a minimal D3 version 6 starter template. It demonstrates the simplest possible setup for a D3 project, rendering a blank page with large, centered text. The code uses the `d3` library loaded from a CDN, specifically calling `select` from `d3` in the `index.js` file, though no data or visual elements are actively drawn. The `index.html` file sets up the HTML structure and imports the D3 library, while the JavaScript file is a placeholder for future visualization code.

Mar 3, 2021