Skip to main content
Log in
A

alicjakot

@alicjakot·4 public vizzes

Loading thumbnail…

Customizing axes!

This bar chart displays the population of eight countries in 2020, with countries on the y-axis and population on the x-axis. The visualization uses D3.js v5 to render an SVG, employing a linear scale for population and a band scale for countries. The code customizes the x-axis tick format with a `format` function and removes the y-axis domain and tick lines. Data is loaded from a CSV file, with population values multiplied by 1000. Styling is applied via an external stylesheet.

Apr 14, 2020
Loading thumbnail…

Scatter plot

This scatter plot displays the population of eight countries in 2020, with countries on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map the data, along with `axisLeft` and `axisBottom` for the labeled axes. Population figures are read from a CSV file and multiplied by 1000 before rendering as circles in an SVG. Axis tick labels are formatted using D3’s `format` function, and gridlines are drawn via tick sizes.

Mar 25, 2020
Loading thumbnail…

Let's make a bar chart

This example shows a horizontal bar chart of population figures for eight countries, with the bars sorted alphabetically by country name. The chart is rendered as an SVG using D3 v5. The code loads population data from a CSV file via `d3.csv`, then scales values with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, and each bar is appended as a `rect` element.

Mar 21, 2020
Loading thumbnail…

Smiley face

A smiling face built with SVG draws its features from geometric shapes, including a yellow circle, two eyes, and an arc for the mouth. The eyebrows are rectangles that animate upward and back down in an infinite loop using chained `transition` calls. The code uses `d3.arc` for the mouth path and D3 selections with `attr` to position elements. All shapes are appended to a centered `<g>` group within a fixed 960×500 SVG canvas.

Mar 21, 2020