Skip to main content
Log in
S

Skye-milu

@Skye-milu·8 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the population of the top five most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and custom tick formatting via `d3.format`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and bars are styled pink with a 0.3 padding.

Aug 4, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a bar chart using fundamental D3.js DOM manipulation, with each bar representing a country’s population. The chart uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scales, `axisLeft` and `axisBottom` for axes, and SVG rectangles rendered with a pink fill. The code loads a CSV file containing country population figures and maps them to bar widths, demonstrating data binding and enter/append patterns.

Aug 3, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a D3.js bar chart visualizing population data from a CSV file, mapping country names along the y-axis and population values along the x-axis using `d3.scaleLinear` and `d3.scaleBand`. The code appends SVG rectangles with dimensions derived from the scales, applying a margin transform to position the chart. The rendering is SVG-based, with styling from an external CSS file, and the visualization updates asynchronously after loading the dataset via `d3.csv`.

Aug 2, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations’ 2018 World Population Prospects estimate. It showcases D3 axis customization, including formatted tick labels, removed domain lines, and styled grid lines. The chart uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories, with `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output features a steelblue fill for bars and custom text styling defined in CSS.

Aug 2, 2019
Loading thumbnail…

Let's make a face with D3.js!

This visualization demonstrates a smiley face whose eyebrows move, created through fundamental DOM manipulation with D3.js. The face is rendered as SVG elements, with the eyebrow animation driven by data mapping. The code uses D3's `select`, `scaleLinear`, and `max` functions to process population data from a CSV file, which controls the width of rectangles representing the face’s features. The project relies on D3 v5 and is embedded in a simple HTML page with inline styles, showcasing basic data binding and SVG attribute updates.

Aug 2, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser window resizing. The chart fills the entire viewport, drawing a green X composed of two diagonal lines that stretch to match the container’s current dimensions. The code uses D3 v5 with an SVG rendering approach, reacting to the window’s resize event by calling a redraw function. This function extracts the chart div’s client width and height via CSS, then updates the SVG’s attributes and line coordinates accordingly, utilizing D3’s selection and merge operations to efficiently update the graphical elements.

Aug 2, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations’ 2018 World Population Prospects estimate. It showcases D3 axis customization, including formatted tick labels, removed domain lines, and styled grid lines. The chart uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories, with `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output features a steelblue fill for bars and custom text styling defined in CSS.

Aug 1, 2019
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations’ 2018 World Population Prospects estimate. It showcases D3 axis customization, including formatted tick labels, removed domain lines, and styled grid lines. The chart uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories, with `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output features a steelblue fill for bars and custom text styling defined in CSS.

Aug 1, 2019