raphman100

@raphman100·7 public vizzes

Bowl of Fruit - General Update Pattern

Five apples appear as red circles in a row, then shrink and disappear as they are removed one by one. One apple turns yellow and becomes a lemon, demonstrating how data updates map to visual changes. The example implements the general update pattern using `selection.data()`, `enter`, `merge`, and `exit` selections. D3 transitions animate radius changes over one second, with `scaleOrdinal` mapping fruit types to colors and sizes in an SVG.

Aug 8, 2021

Loading thumbnail…

Fork of World Population Area Chart

This area chart visualizes world population growth from 1950 to 2015, with the area filled in translucent maroon and axes labeled in sans-serif. It loads CSV data from VizHub, parses years as dates, and uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.area` with `curveBasis` to render the smooth shaded region in SVG.

Aug 8, 2021

Loading thumbnail…

Fork of Making a Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Each circle represents a country, with its horizontal position encoding population size and vertical position indicating country name. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisLeft with d3.axisBottom for labeled axes. Population values are formatted with d3.format, and the SVG rendering includes grid lines and a title.

Aug 8, 2021

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 to load the data from a CSV and render an SVG with linear and band scales. The chart applies `scaleLinear` for the population axis and `scaleBand` for the country categories, while `axisLeft` and `axisBottom` handle tick marks. Population values are formatted in abbreviated units (e.g., "B" for billions) via the `format` API.

Aug 8, 2021

Loading thumbnail…

Fork of HTML Cars Report 2

This example displays a simple cars report listing three used vehicles with their model years and prices. The page uses a plain HTML unordered list, with the first car entry—a 2012 Nissan Leaf—styled in red via a CSS class called `highlighted`. Rendering relies on standard HTML elements and a linked `styles.css` file, which applies a monospace font and enlarged text size to the entire body. No JavaScript or data libraries are used; all data is hardcoded directly in the markup.

Aug 8, 2021

Loading thumbnail…

Fork of Shapes with SVG and CSS

A fork of a basic shapes demonstration uses SVG elements styled with CSS to display geometric forms. Circles and rectangles appear in rows, with the first row unfilled, the second row filled with solid red and blue, and the third row given a light cyan fill and black stroke via an inline presentation attribute. A separate SVG path, rendered through the `pathLines` class, draws a black polyline with round line joins and caps across the canvas. The example relies on plain SVG markup and CSS selectors, including the `.pathLines` rule, to define all visual properties.

Aug 8, 2021

Loading thumbnail…

Fork to Make a face

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The code uses `d3.select`, `d3.append`, and `d3.arc` to build the face, while sequential `transition().duration()` calls move the eyebrows up and down in a two-second cycle. The static SVG elements—circle, rectangles, and path—are positioned using translation transforms, with no external data source beyond fixed constants.

Aug 7, 2021