jhpp114

@jhpp114·7 public vizzes

D3 Face

This chart displays the population of the ten most populous countries from a CSV data source. The visualization uses the D3 library, specifically `select` and `csv`, to load data from `data.csv`. It renders the data as a series of 300-pixel-wide SVG rectangles, using `scaleLinear` and `max` for scaling, and `.enter().append('rect')` for creating the marks. The chart is presented on a 960x500 SVG canvas.

Dec 14, 2019

Loading thumbnail…

Making a Bar chart

This is a bar chart that displays the populations of ten countries, including China, India, and the United States, with each bar’s height corresponding to the population value from a CSV file. The chart is rendered as an SVG element with a width of 960 pixels and a height of 500 pixels. The visualization is built using D3 v5, specifically utilizing the `d3.select` and `d3.csv` APIs to read and parse the data, while the rendering itself is handled directly through SVG attributes.

Dec 14, 2019

Loading thumbnail…

Making a Bar chart

A horizontal bar chart displays the populations of ten countries, from China with over 1.4 billion to Mexico with 130 million. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.csv` loading data from a CSV file. Population values are parsed and multiplied by 1000, and bars are rendered as SVG `<rect>` elements with widths scaled to population and heights set by the band scale's `bandwidth()` method.

Dec 14, 2019

Loading thumbnail…

Let's Make a Face with D3.js

A cheerful cartoon face is rendered as an SVG scene, built entirely from basic shapes including circles, rectangles, and an arc. The code constructs a yellow face with two eyes and rectangular eyebrows that animate by moving downward and back upward using chained D3 transitions. A mouth is drawn using the `d3.arc` shape generator. The example demonstrates SVG manipulation and animation with the D3.js v5 library, styling the background gray and centering the face within a 960 by 500 viewport.

Dec 13, 2019

Loading thumbnail…

Let's Make a Face with D3.js

This example uses D3.js to turn a simple red-background SVG canvas into the starting point for a face-building exercise. The rendered output is a static, blank viewport, as the script only selects the SVG element and applies a red background color using `d3.select` and `style`. It demonstrates the basic setup for a D3 v5 project, including the HTML structure, external library import, and SVG instantiation, before any facial features or interactive behavior are introduced. The example serves as a foundational template for constructing visual elements with D3's SVG rendering capabilities.

Dec 12, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—within an SVG canvas, using CSS classes to style stroke, fill, and line join properties. It demonstrates how SVG elements can be grouped and transformed with scale and translate operations, while CSS controls visual attributes like colors and stroke widths. The rendering relies on raw SVG markup and CSS rules, with no JavaScript libraries involved.

Dec 11, 2019

Loading thumbnail…

HTML Cars Report

This example displays a static list of three used cars with model year, name, and price. The page presents the data as a simple bulleted report, with the first car entry, a 2012 Nissan Leaf at $1800, styled in red text. The report is rendered in an HTML page with a linked stylesheet, using plain HTML `<ul>` and `<li>` elements. A CSS rule for the class `.highlighted` applies a red color and a `body` selector sets a large monospace font, achieving the visual hierarchy seen on the page.

Dec 11, 2019