RC

@q256·5 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of population by country, using a CSV dataset that lists each nation and its population in thousands. The code builds the visualization with D3 v5, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis categories. SVG rectangles are appended to represent each bar, with their width mapped to population values and height determined by the band scale’s bandwidth.

Sep 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

A simple SVG face made with D3.js v5, drawn entirely from primitive shapes: yellow circle for the head, small black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The code uses `d3.select` and `d3.arc` to construct the geometry, with a fixed `innerRadius` and `outerRadius` for the smile. All elements are centered via a translated `<g>` group, and faces render directly on a 960×500 SVG canvas with no external data.

Sep 26, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

Sep 25, 2019

Loading thumbnail…

HTML Cars Report

This example demonstrates a plain HTML cars report listing three vehicles with their model years, names, and prices. The page presents the data as a simple bulleted list, with each entry showing the year, make, model, and cost in dollars. The rendering relies on basic HTML markup within the `index.html` file, styled by an external `styles.css` stylesheet that sets a large monospace font. No JavaScript libraries or advanced visualization APIs are used; the report is static and relies solely on standard document structure and CSS for presentation.

Sep 24, 2019

Loading thumbnail…

Cars Report

This example displays a static text report of cars priced under $2,000, generated from a hardcoded JSON array. It shows a list of formatted entries like “2009 Ford F150: $1950” after a simulated two-second loading delay, using the `getCars` Promise and `generateReport` function to filter and map the data. The visualization relies on the DOM API to update the `textContent` of a `<pre>` element with the final report. No charting library is used; rendering is plain HTML and JavaScript.

Sep 24, 2019