Sachithraanu

@Sachithraanu·3 public vizzes

MMM

A bar chart displays yearly sales quantities from 2000 to 2010, with bars encoded by `d3.scaleBand` on the x-axis and `d3.scaleLinear` on the y-axis. The SVG rendering uses D3 v6 to draw axes via `d3.axisBottom`, sizing the chart area from the SVG’s width and height with explicit padding. The static dataset is embedded in the script, and the chart shows a general downward trend from a peak in 2003 to lower values by 2010.

Sep 28, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes. It shows how fill colors, stroke widths, and line joins can be applied both directly and via stylesheet rules, with groups using transforms for scaling and translation. The SVG is rendered inline in HTML, with the `.lines` class controlling stroke properties and path-specific rounded joins and caps.

Sep 28, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through a combination of inline attributes and CSS classes. Circles, rectangles, lines, and a polyline path are arranged across a canvas, with some shapes inheriting fill and stroke properties from a parent `<g>` group while others define their own colors. The code uses raw SVG elements (circle, rect, line, path) and a CSS stylesheet that targets the `.lines` class to apply custom stroke widths, line joins, and caps. The video link provides additional context on the rendering approach.

Sep 28, 2020