Chrisishere

@Chrisishere·4 public vizzes

Smiley face part 1

This example shows a yellow smiley face rendered as an SVG within a React application, featuring two black eye circles on a larger circular face. The face is centered on a 960×500 viewport, with the face radius and eye positions calculated from the center coordinates and fixed offset values. The code uses React and ReactDOM to render the SVG elements, with inline styling for stroke width and fill colors. The face circle uses a yellow fill with a black stroke, while the eyes are positioned using centerX and centerY with offset values, though one variable name inconsistency exists in the eye offsets.

Apr 23, 2021

Loading thumbnail…

Fork of Melting Data for Multiple Lines

This example shows population trends over time for multiple world regions from 1950 to 2100, using data from United Nations estimates and medium variant projections. Multiple line paths are drawn with d3.line using curveBasis, colored by a d3.scaleOrdinal with schemeCategory10, and accompanied by a custom color legend. The code melts the dataset into tidy rows, nests it by region with d3.nest, and renders axes with d3.axisBottom and d3.axisLeft on an SVG canvas.

Apr 19, 2021

Loading thumbnail…

Hello D3

This example displays the text "Hello HTML" in the center of the page, using an enormous 13em font size. The visualization is a minimal demonstration of D3's DOM manipulation capabilities, achieved by calling `d3.select` on the body element and using the `.text()` method to set its content. The page also includes a separate JavaScript console log statement, and the code loads the D3 library from a remote URL.

Apr 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in the center of the page, styled with CSS at a font size of 13em. It serves as a minimal demonstration of how HTML, CSS, and JavaScript work together in a basic web page. The JavaScript, embedded in a `<script>` tag, logs the message “Hello JavaScript!” to the browser’s console using the `console.log` method, showing a simple interaction without any visual output beyond the static text.

Apr 12, 2021