vkoschman

@vkoschman·3 public vizzes

Making a bar chart

This example shows a horizontal bar chart of population data for nine countries, ordered from China at the top to Russia at the bottom. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render tick marks. Data is loaded from a CSV file with `d3.csv`, and rectangles are appended to an SVG container with `selectAll('rect')`. A fixed margin layout positions the chart within a 960×500 viewport.

Jul 29, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A smiling face rendered in SVG uses D3 v5 to construct circles, rectangles, and an arc-based mouth. Static yellow and black shapes form the head and eyes, while CSS transitions animate the eyebrows upward and downward over two-second intervals. The code directly manipulates SVG attributes such as `cx`, `r`, and `d` with an `arc` generator, and uses `transition.attr` to shift eyebrow positions.

Jul 29, 2020

Loading thumbnail…

Cars Report

This example displays a list of vehicles under a price threshold, with each item formatted as “year make model: price” in green text beneath a purple title. It fetches mock data from a simulated server using a Promise with setTimeout, then filters and renders an ordered HTML list via the DOM API’s `createElement` and `appendChild`. The React-based code uses static imports and ES6 modules, with formatting logic separated into `formatCar.js` and report generation into `generateReport.js`.

Jul 29, 2020