chezydan

@chezydan·4 public vizzes

Let's make a face with D3.js!

This D3.js example demonstrates fundamental DOM manipulation by building an animated smiley face out of SVG shapes. The face, rendered with yellow circles for the head and eyes, and a path for the mouth, is constructed using `d3.select` and `svg.append`. The animation uses chained `transition().duration(2000)` calls to move the rectangular eyebrows up and down. The code uses D3 v5 and associates the SVG with a teal background via `.style`.

Oct 11, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time in San Francisco from the Data Canvas Sense Your City Dataset. Using React and D3 v5, it renders an SVG with axes built from custom components and a smooth line path via d3.line with curveNatural. The chart uses scaleTime and scaleLinear for positioning, while the data is loaded asynchronously through d3.csv from a GitHub gist. Styled with the Poppins font and muted colors, the visualization omits data point circles, showing only the clean, flowing trend line.

Oct 11, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page for displaying SVG circles, with a purple circle featuring a black outline on a white background. The code uses inline SVG elements to render two circles, the first in the default black color and the second in purple, sized with a 10px radius. The page includes a React-styled SVG container with width 960 and height 500, though no JavaScript interactions are implemented beyond the empty D3 selection reference. The visualization serves as a bare-bones starter template for web-based graphics.

Oct 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML _” in large, centered type, with a small script that logs “Hello JavaScript!” to the browser’s developer console. It relies on plain HTML, CSS for body styling, and a single inline `<script>` tag using the `console.log` API. The project serves as a bare-bones starter template for web-based visualizations, with no external libraries or data sources included.

Oct 11, 2020