Jinlin

@hungchunlin·3 public vizzes

SVG Example

This example demonstrates overlapping semi-transparent rectangles in a 500-by-500 SVG canvas, using CSS rgba values to create blended color regions. The visualization is rendered entirely with inline SVG elements, and the page includes a large styled message text via D3's `select` function. Index.js imports D3 and a local ES6 module to set the text content, while styles.css applies a dark background and Ubuntu font. The code shows basic SVG shapes without interaction or data binding, highlighting fundamental SVG rendering and module imports.

Aug 9, 2019

Loading thumbnail…

SVG Example

This example demonstrates basic SVG rendering with two overlapping rectangles—a red square and a semi-transparent blue square—positioned to show color blending. The visualization uses raw SVG elements defined directly in the HTML document, with explicit width and height attributes on the `<svg>` tag and fill colors applied via the `fill` property with RGBA values. The code also imports D3’s `select` function to update a separate message element, though the primary visual output relies solely on static SVG markup rather than data-driven generation.

Aug 9, 2019

Loading thumbnail…

SVG Example

This SVG example displays three overlapping semi-transparent rectangles in red, blue, and yellow against a dark navy background with large white text. The visualization demonstrates basic vector graphics capabilities using raw SVG elements including rect and text tags within an HTML document. The page imports D3.js via ES6 modules and uses select to update a message div, while external styling comes from Google Fonts and custom CSS. The rendering shows simple shape composition and color blending through opacity.

Aug 8, 2019