yigong99

@yigong99·3 public vizzes

Making a Bar Chart

This example demonstrates the initial step of building a bar chart with D3, showing a raw dataset of country populations read from a CSV file. The visualization currently renders only an empty SVG canvas, as the code loads the data and converts the population strings to numeric values by multiplying them by 1000, logging the transformed data to the console. It uses D3’s `select`, `csv`, and `attr` methods to access the SVG element and parse the external data file. The chart itself is not yet drawn.

Jan 20, 2021

Loading thumbnail…

Let's make a face with D3.js

This example constructs a stylized face using D3.js and SVG primitives. It draws yellow circles for the head and eyes, black rectangles for eyebrows, and a path for a mouth created with the `d3.arc` helper. The right eyebrow animates vertically, thanks to chained `transition` calls on the `attr` property. The visualization loads D3 from a CDN and uses `select` and `append` to build the SVG hierarchy, with `translate` centering elements on a 960 by 500 canvas.

Jan 19, 2021

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtered by price and formatted as a readable string. The page displays a large, pre-formatted message element that is updated with the generated report content. It showcases the use of ES6 modules, including local imports and exports, alongside the D3 library loaded via UNPKG. The `generateReport` function filters the imported car data and maps each entry through the `formatCar` helper, producing a multi-line output that is inserted into the DOM via `textContent`.

Jan 18, 2021