Vivian Peng

@vivianpengnyc·6 public vizzes

Choropleth Map

A choropleth map colors countries by economic income group using an ordinal color scale. The visualization uses D3 v5 with d3.geoPath and a Natural Earth projection to render TopoJSON world data loaded from the world-atlas package. Users can zoom and pan via d3.zoom, and hovering highlights individual countries. A custom color legend component displays the category colors and labels, with interactivity handled through SVG selections.

Sep 30, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the population of the top 10 most populous countries using a horizontal bar chart, with data sourced from the 2018 United Nations World Population Prospects. The example demonstrates how to customize D3 axes in an SVG rendering, building on a simpler bar chart tutorial. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and style tick marks, labels, and axis lines via CSS. The chart reads population data from a CSV file and scales the values by 1,000.

Sep 28, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example renders a simple cartoon face using D3.js version 5 and SVG. The code selects an empty SVG element and appends three circles: one large yellow circle for the face and two smaller black circles for the eyes, with positions calculated from the SVG’s width and height attributes. It demonstrates basic D3 selections, attribute manipulation, and SVG shape creation without data binding.

Sep 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, and a line—arranged within an SVG canvas. It shows how SVG elements can be styled directly via attributes like `fill`, `stroke`, and `stroke-width`, and how a grouping element `<g>` applies these styles collectively to its children. The rendering relies on raw SVG markup embedded in an HTML page, with a linked CSS stylesheet controlling page layout and overflow. The code uses core SVG APIs for drawing, without additional JavaScript libraries or data sources.

Sep 28, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple static report listing three used cars with their model years, names, and prices. The data is hardcoded directly in the HTML markup, styled with a global sans-serif font and a red highlight for the first entry. Using plain HTML and a linked CSS file, it demonstrates basic document structure, list rendering, and class-based styling without any JavaScript or external libraries.

Sep 28, 2020

Loading thumbnail…

Cars Report

This example displays a simple “Hello World” message on a dark blue background using the Ubuntu font. It demonstrates basic JavaScript and ES6 module usage by importing a car dataset from `cars.js` and displaying a string from `myMessage.js` in the `index.html` page. The code uses `JSON.parse` to load the car data and sets the `textContent` of the designated HTML element.

Sep 27, 2020