JacobRozak

@JacobRozak·3 public vizzes

Fork of D3 Starter

This visualization demonstrates a stacked area chart displaying the quantities of apples, bananas, and oranges over three months in 2018. The chart uses D3 v7 with SVG rendering, employing `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate and color the layered paths. Data is hardcoded as an array of objects containing month dates and fruit counts. The result shows three distinct colored areas representing each fruit’s contribution to the total count over time, with red, yellow, and orange fills.

Mar 23, 2023

Loading thumbnail…

d3 test

This example demonstrates a minimal starting point for using D3 version 7, creating a simple SVG canvas that fills the browser window. The code imports the `select` function from the D3 library and appends an SVG element to the page body, sizing it with `window.innerWidth` and `window.innerHeight`. It then defines an array of ten rectangle objects with fixed positions and dimensions, logging them to the console. No visual output is rendered from those rectangles; the example solely focuses on setting up the D3 environment and data structures.

Mar 13, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a grid of two SVG rectangles, each 50 by 50 pixels, with a black stroke and no fill, rendered in a 500 by 500 SVG container. It shows how to use a Tile builder pattern with a Tile class to programmatically create SVG `<rect>` elements via the DOM API `document.createElementNS`. The script also directly manipulates the second rectangle’s fill to black, and includes a button labeled “double,” though no click handler is defined. The rendering approach is pure SVG with no external libraries.

Mar 12, 2023