linh-pham-nz

@linh-pham-nz·9 public vizzes

Population of NZ by age, 2016

A bar chart displays New Zealand's population by age group for 2016, with each bar's height representing the total population for that cohort. The visualization highlights the distribution across age brackets, from 0-4 to 85+. Built with D3 v5, the chart uses `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with `axisBottom` and `axisLeft` generating the axes. Data is loaded from a CSV file and rendered as SVG rectangles, with styling applied via external CSS.

Dec 13, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for various car models from the UCI Auto MPG data set. It uses d3.scaleLinear to map data values to pixel coordinates, d3.axisBottom and d3.axisLeft to render axes with tick marks, and SVG circles to represent individual cars. The visualization reads data from a CSV file using d3.csv, converting numeric fields before rendering, and includes axis labels and a title within an SVG canvas.

Dec 5, 2019

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country represented by a circle positioned along a linear scale for population and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, rendering as SVG. Population values from the CSV are multiplied by 1,000, and the x-axis tick labels format large numbers using D3's `format` function. Grid lines extend across the chart via tick sizes, while axis labels and a title annotate the plot.

Dec 5, 2019

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for ten countries, ranking them from China at the top down to Mexico. The visualization uses D3 v5 APIs such as `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to load and render the data as SVG rectangles. Population values in the CSV are converted from strings to numbers and multiplied by 1000 before being scaled to the chart’s width. The chart features steel-blue bars and includes styled text elements for axis labels.

Dec 5, 2019

Loading thumbnail…

Customizing Axes

This graphic shows a horizontal bar chart of the top ten most populous countries, with a linear x-axis formatted to display values in billions (e.g., "1.42B"). The y-axis lists country names without gridlines. Built with D3 v5 and rendered as SVG, the example uses `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom` to customize tick formatting and remove vertical gridlines on the categorical axis. Population data is loaded from a CSV and multiplied by 1000 before rendering.

Nov 28, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth. The eyebrows are rectangles that repeatedly move up and down via chained `transition` calls, creating a subtle animation. The code uses D3.js v5 selection methods, the `arc` generator for the mouth path, and coordinates computed from the SVG dimensions. The face is centered using a `g` element with a translation transform, and all styling is applied through D3 attributes.

Nov 8, 2019

Loading thumbnail…

Face Experimentation

A face formed from basic SVG shapes—a yellow circle, two eyes, and eyebrows—is drawn in the center of a 960-by-500 canvas. The eyebrows and mouth animate over time using chained `transition` calls with varying durations, creating a subtle expression change. The code uses d3.arc to generate the mouth path and manipulates attributes like `y` and `d` to produce the motion. Static shapes are drawn with circles and rectangles, while dynamic elements rely on D3's transition system.

Oct 30, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS classes can be combined to create colorful, styled graphics. It shows circles, rectangles, lines, and paths rendered at various positions, with some shapes using inline fill attributes while others inherit styles from CSS rules. The SVG markup pairs shape elements like `<circle>`, `<rect>`, and `<line>` with grouping via `<g>` elements that apply transforms and shared presentation properties. The CSS stylesheet defines stroke colors, widths, and font settings, while the code relies entirely on native SVG and CSS—no JavaScript libraries—to achieve the visual output.

Oct 29, 2019

Loading thumbnail…

HTML Cars Report

This example displays a static HTML report listing three used cars with prices, styling one entry with red text. The page uses plain HTML and CSS, with the body set to a large monospace font and the class `highlighted` applying the red color. No JavaScript libraries or data files are involved; the content is hardcoded directly in the markup. The visualization demonstrates basic document structure and CSS styling rather than dynamic data binding or rendering.

Oct 29, 2019