shawnsrk

@shawnsrk·3 public vizzes

Line Chart with Multiple Lines

This line chart compares the historical performance of an All-Weather portfolio against Global Equities, measured as growth of $1,000 from January 2000 to August 2020. Two smoothed lines trace each series over time, with an ordinal color scale distinguishing them. The visualization uses d3.csv for data loading, d3.nest for grouping, d3.line with curveBasis for path generation, and a custom colorLegend module. SVG axes with tick marks and labels display date and dollar-scaled values.

Dec 22, 2020

Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered as SVG: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale with circular marks. Both legends are built with D3 v5, using `scaleOrdinal`, `scaleSqrt`, data joins with `selection.enter()`, and merge operations to update tick groups. The color legend draws lines labeled with fruit names, while the size legend displays circles sized by the scale with tick text offset by radius. Styling is applied via CSS classes for tick text and circle strokes.

Dec 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows a minimal HTML page that renders basic SVG shapes—two circles and a rectangle—styled and positioned through inline SVG attributes. The page loads a single SVG element with a fixed width and height, using raw SVG markup without any external libraries. It also includes a small inline script that logs a message to the browser’s developer console, demonstrating a simple integration of CSS and JavaScript within an HTML document. The rendering relies entirely on native SVG support in the browser, with the `console.log` call as the only JavaScript interaction.

Dec 16, 2020