oliviawxye

@oliviawxye·5 public vizzes

Population

This bar chart shows the population of ten countries in thousands, using horizontal bars ordered by decreasing population from China to Japan. The visualization encodes population values as bar widths via a linear scale, while country names are mapped to band positions on the y-axis. The chart is rendered as SVG using D3 v6, with data loaded from a CSV file and parsed with the `csv` and `scaleLinear` APIs.

Mar 6, 2021

Loading thumbnail…

D3 Face

A cheerful yellow face with black outlined features fills the SVG canvas. The composition centers a circle for the head, two dark eyes, and a curved mouth drawn with D3's `arc` generator. Animated eyebrows, rendered as rectangles, move up and down in a looping sequence using D3's `.transition().duration()` API. The example demonstrates basic shape construction and animation sequencing within a 960 by 500 pixel viewport, with all elements grouped and positioned using SVG transforms.

Feb 28, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—arranged in groups and transformed with scaling and translation. It shows how CSS classes like `.highlighted` and `.lines` apply fill and stroke styles, while a nested `<g>` uses inline `fill` and `stroke` attributes with a thick stroke-width. The rendering uses the SVG markup directly in the HTML, with no JavaScript libraries, and includes a two-segment polyline-like path.

Feb 27, 2021

Loading thumbnail…

HTML Cars Report

This example shows a plain HTML page displaying a short list of used cars with model year, make, model, and price in a bulleted list. The page renders a simple static report, highlighting the first list item in red to draw attention. The implementation uses standard HTML markup with a linked external CSS stylesheet, and relies on the CSS class selector `.highlighted` to apply the red color. No JavaScript or data-loading libraries are involved; the data is hardcoded directly within the HTML markup.

Feb 27, 2021

Loading thumbnail…

Cars Module

This example demonstrates a modular JavaScript application that fetches car data asynchronously and filters it to generate a text report. It shows how to structure code with ES6 modules, using `import` and `export` statements for local files and the D3 library via UNPKG. The app uses a `Promise` with `setTimeout` to simulate a 2-second data fetch, then applies `filter` and `map` operations to display cars priced under $2000 in an HTML `<pre>` element. The source data is embedded as a JSON string in `getCars.js`.

Feb 27, 2021