Yanda Qu

@YandaQu·6 public vizzes

Customizing Axes

This example shows a horizontal bar chart of population data, highlighting the customization of axes. The chart uses D3 v6 to load CSV data and render SVG. It applies a linear scale for the x-axis and a band scale for the y-axis, removing default axis lines and gridlines. The x-axis is customized with a tick format that abbreviates numbers (e.g., 'G' replaced with 'B') and a custom axis label, while the y-axis ticks are displayed without lines.

Feb 20, 2021

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population figures for nine countries, using data from a CSV file. The chart ranks countries by population along a linear scale, with country names on a band scale for bar positioning. Built with D3 v6, the visualization loads CSV data, converts population values to numbers, and renders SVG rectangles. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and bars, with steelblue fills and margins for layout.

Feb 15, 2021

Loading thumbnail…

Make a face with D3.js

This example assembles a cartoon face from basic SVG shapes, depicting a yellow head with eyes, eyebrows, and a mouth. The eyebrows animate in a looping motion, moving down and back up. Built with D3.js v6, the code uses `select`, `append`, and `attr` to construct the visual elements, while the `transition().duration()` API drives the continuous eyebrow animation. The mouth is drawn using the `arc()` generator to create a curved path.

Jan 29, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—stylized via CSS classes and inline attributes. It shows how shape properties like fill, stroke, and stroke-width can be set directly or inherited through grouped elements, with the `g` element using `translate` and `scale` transforms to reposition and enlarge the drawing. The code uses plain SVG APIs and CSS selectors, such as `.lines path` for path-specific styling, without any external JavaScript libraries. The rendering is entirely static, relying on the SVG markup and stylesheet for visual output.

Jan 27, 2021

Loading thumbnail…

HTML Cars Report

This example shows a simple inventory of three used cars, listing each vehicle’s year, model, and price, with one car emphasized in red to draw attention to a particular listing. The visualization uses plain HTML and CSS: a semantic list structure in the markup, while a linked stylesheet sets a large monospace font and a `.highlighted` class to visually distinguish the 2012 Nissan Leaf. No JavaScript libraries or data-rendering APIs are employed; the presentation relies entirely on static content and CSS styling.

Jan 25, 2021

Loading thumbnail…

Cars Report

This example displays a text-based report of cars at or below a $2,000 price threshold, listing each vehicle’s year, make, model, and formatted price. It initially shows a “Loading…” message, then asynchronously fetches a hardcoded JSON dataset after a two-second delay using a custom `getCars` promise. The `generateReport` function filters the data by price, maps each car through `formatCar`, and joins the results into a string displayed in a `<pre>` element. The code relies on native JavaScript promises and template literals without any external visualization libraries.

Jan 25, 2021