Masoumeh Bakhtiariziabari

@mbakhtiariz·3 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a general update pattern applied to a bowl of fruit, where apples and lemons are added and removed from the scene over time. The visualization uses D3 v5 with SVG rendering to draw circles and text labels for each fruit, with color and radius scales differentiating the two types. The code explicitly shows the enter, update, and exit states of the data-driven elements as fruits are eaten or replaced, highlighting how D3 handles special cases of the update pattern.

Mar 3, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling, featuring a single green circle with a black stroke positioned within a 960x500 viewport. The visualization shows how SVG elements can be styled directly through inline `style` attributes, using the fill color `#69b3a2` and stroke properties. The code references an external stylesheet that defines classes for line styling, though the circle itself relies on inline presentation attributes. The implementation uses native SVG markup within an HTML document, with no JavaScript frameworks or data sources involved. A form submission script is included but is not triggered by the visualization itself, making this a straightforward static graphics example.

Mar 3, 2020

Loading thumbnail…

Make face with d3

This example draws a simple cartoon face using D3 v5 in an SVG container. The code creates a yellow circular head, two black eyes with fixed spacing, and a mouth path built with the `d3.arc` generator. The face is positioned relative to the SVG’s width and height attributes, and basic styling is applied directly through attributes and CSS. The rendering approach uses basic SVG shapes and a path, with no data binding or interaction.

Feb 28, 2020