Linkous

@Linkous·7 public vizzes

Ordinal Scatter Plot

This ordinal scatter plot displays the populations of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate, with countries arranged on the y-axis and population values on the x-axis. Using D3 v5, the code employs `scalePoint` for the categorical country positions, `scaleLinear` for the numeric population scale, and SVG circles to mark each data point. The chart includes a formatted x-axis that abbreviates large numbers using the `format` function, and grid lines are drawn via axis tick sizes.

Dec 27, 2019

Loading thumbnail…

Scatter plot

This scatter plot displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `d3.scalePoint` for the categorical country axis and `d3.scaleLinear` for the population axis. Circles mark each country’s position, while customized axes include a formatted tick label that converts population values to billions. The chart is built from a CSV file and demonstrates axis customization through `d3.axisBottom` and `d3.axisLeft`.

Dec 27, 2019

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates interactive zooming and panning on a natural Earth projection map of world countries, with hover highlighting that changes each country’s fill to red. The map is rendered as SVG paths using `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and names joined from a TSV file. Interaction is handled through `d3.zoom`, which applies a transform to a group element, while CSS `:hover` rules trigger the color change on each country.

Dec 26, 2019

Loading thumbnail…

Loading CSV

This example demonstrates loading an external CSV dataset—the Iris Dataset—and displaying its contents as formatted JSON in the browser. Using D3 v5’s `csv` function, it fetches the data asynchronously and, upon resolution, appends a `<pre>` element to the body with `JSON.stringify` to render the parsed array with indentation. The code imports `select` and `csv` directly from the D3 module, relying on Promises to handle the data load.

Dec 26, 2019

Loading thumbnail…

Making a Bar Chart (Outtake)

This example displays a bar chart of each continent's 2018 population, sourced from Wikipedia, with values rendered as horizontal bars. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts to bar widths and continent names to vertical positions, while `format` adds comma separators. The SVG output includes text labels for each continent and its population, with bars styled via the `select` and `append` API.

Dec 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

Dec 23, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

Dec 23, 2019