Tiff

@valdeztiffany·5 public vizzes

Bowl of Fruit - General

This example shows a row of five red circles representing apples, with one apple disappearing after a second. The visualization uses a data-binding pattern where a `fruits` array drives circle elements, and the code updates the display when an item is removed. Built with D3 v5, the SVG circles are positioned using index-based coordinates and rendered in red. The data source is a static CSV file with country population figures, though the visualization itself does not display this data. The interaction demonstrates D3’s enter and exit selections for managing dynamic data changes.

Jan 21, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the population of eight countries, scaled by a factor of one thousand. The visualization uses a horizontal bar layout, with country names on the y-axis and population counts on the x-axis, all rendered as red rectangles. The data, sourced from the United Nations World Population Prospects, is loaded from a CSV file and processed with D3 v5. The chart employs D3’s `scaleLinear` and `scaleBand` to map population values and country categories to SVG coordinates.

Jan 20, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face using basic SVG shapes—two circles for the eyes, a larger circle for the head, and an arc for the mouth—all positioned with fixed coordinates. The code uses D3.js v5 selection methods like `svg.append` and `.attr` to build the elements, alongside the `d3.arc` generator to define the mouth’s path based on inner and outer radii and start/end angles. The SVG canvas is 960 by 500 pixels, with styling applied via an external stylesheet.

Jan 18, 2023

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with styling and grouping controlled through CSS and SVG attributes. It shows two circles and two rectangles, using explicit fill colors on some shapes and applying a blue fill to a grouped set of shapes via the SVG `<g>` element’s transform and fill attributes. The code uses raw SVG markup within an HTML document, linking to an external stylesheet that sets the body margin and overflow. No JavaScript libraries are involved; the rendering relies entirely on native SVG and CSS.

Jan 18, 2023

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML report listing used cars with model years and prices, highlighting one entry. The page relies on standard HTML list markup and internal CSS styling, with the `body` rule setting a monospace font and the `.highlighted` class turning the Nissan Leaf entry red. No external libraries or data files are used; the data is hardcoded in the list items. The visualization demonstrates basic document structure and styling rather than interactive or dynamic rendering.

Jan 18, 2023