agongwpi

@agongwpi·4 public vizzes

Pokemon Scatter Plot

This scatter plot visualizes the relationship between height and weight for Pokémon species, with each circle representing an individual Pokémon. The chart uses d3.scaleLinear to map the data values to screen coordinates, d3.axisLeft and d3.axisBottom for the axes, and d3.extent to compute the domain. Data is loaded asynchronously from a CSV file using d3.csv. The SVG rendering includes gridlines, axis labels, and a title, with circles styled in navy at partial opacity.

May 14, 2019

Loading thumbnail…

The World Drinks Scotch Whisky

This bar chart visualizes the top 10 Scotch whisky importing countries for the first half of 2017, measured in 70-cl bottles, with France leading at 85.9 million bottles. The data comes from Whisky Tours. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for positioning, and customizes `axisBottom` and `axisLeft` with tick formatting via the `format` function. The SVG rendering includes styled axes, labels, and a title, with data loaded from a CSV file using `csv()`.

May 7, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

May 7, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and a path within a scaled and translated group. The code uses inline SVG elements with attributes for geometry and fill, while a separate stylesheet defines stroke properties and line joins through classes. The SVG is rendered directly in the HTML with a 960 by 500 viewport.

May 7, 2019