Derek2Dai

@Derek2Dai·4 public vizzes

Let's make a face with D3.js

This example uses D3.js v6 to render a simple, expressive face as an SVG graphic. The visualization draws distinct facial features—such as eyes and a mouth—onto a fixed 960×500 canvas, driven entirely by hardcoded SVG attributes rather than external data. The code loads D3’s `select` and `csv` functions, though the included `data.csv` file (containing country populations) is not referenced in the rendering logic. The visual output is static, with no interaction or animation. Styles are minimal, setting the body margin to zero and hiding overflow, while the SVG is sized directly via its width and height attributes.

Nov 10, 2020

Loading thumbnail…

Cars Report

This example displays a report of car listings, presenting data from a static JSON array that includes fields such as year, make, model, and price. The visualization initially shows only the make of the first car, "Honda", rendered as large text on the page. It uses React for the framework, with jQuery loaded for potential utility, and writes the message directly to the DOM via `document.getElementById` and `textContext`. The data is parsed from embedded JSON using `JSON.parse`.

Nov 2, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in large, centered type on a plain web page. It demonstrates the minimal structure of an HTML document, including a `<head>` with styling and a `<body>` containing the visible content. The page also includes an inline `<script>` that logs “Hello JavaScript!” to the browser’s developer console, showcasing basic client-side scripting. It uses no external libraries or frameworks, relying solely on standard HTML, CSS, and JavaScript.

Oct 14, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal web page that prints “Hello HTML” in large centered text and logs “Hello JavaScript!” to the browser console. It uses plain HTML, CSS for text styling, and an inline JavaScript `<script>` tag. The code highlights the basic structure of an HTML document, with no external libraries or data sources.

Oct 14, 2020