wiwinsrimulyani

@wiwinsrimulyani·2 public vizzes

Shape with SVG

A collection of basic SVG shapes—circles and rectangles—arranged in pairs on a canvas, with one group wrapped in a `<g>` element that applies a blue fill and black stroke to its children. The example demonstrates color overrides and inheritance through SVG attributes, including explicit `fill` and `stroke-width` properties on individual shapes. It also showcases a `<g class="lines">` group containing a `<line>` and a `<path>` that draw an angular, unconnected path across the lower portion of the viewport, with stroke styling applied via CSS. The code directly uses SVG elements like `circle`, `rect`, `line`, and `path` within a static `<svg>` embedded in HTML, with no JavaScript or data binding.

Apr 28, 2020

Loading thumbnail…

Data VIsualization

This example shows the make of the first car from a small JSON dataset, displaying "Honda" as plain text in a preformatted element. The data is parsed from a template literal using `JSON.parse` and rendered through a React starter structure. The code imports the `cars` array from `cars.js` and uses `document.getElementById` to inject the text content into the page, relying on the bundled script from `bundle.js`. No interactive or graphical visualization is present; it is a minimal static text output.

Apr 27, 2020