Skip to main content
Log in
M

minimartzz

@minimartzz·9 public vizzes

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes by using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` and `d3.axisBottom` to render the axes. Population values are converted from thousands to absolute numbers, and bars are styled with a steelblue fill via SVG.

Oct 31, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically respond to browser resizing. A green X is drawn across an SVG element, with the stroke width and opacity set to create a bold, semi-transparent visual. The chart container fills the page via CSS, and the code uses the `clientWidth` and `clientHeight` properties of the DOM element to determine the current size. A `resize` event listener triggers the `redraw` function, which updates the SVG’s width and height attributes and repositions the two lines using a data join. The visualization relies on D3 v5 and standard SVG rendering.

Oct 31, 2019
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes by using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` and `d3.axisBottom` to render the axes. Population values are converted from thousands to absolute numbers, and bars are styled with a steelblue fill via SVG.

Oct 31, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. It shows a large green X spanning the entire viewport, where the lines are drawn based on the current window dimensions. The code uses D3 v5 with SVG rendering, fetching the container’s client width and height via `clientWidth` and `clientHeight`, then updating the SVG attributes accordingly. A resize event listener triggers the `redraw` function whenever the window size changes.

Oct 31, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically respond to browser resizing. A green X is drawn across an SVG element, with the stroke width and opacity set to create a bold, semi-transparent visual. The chart container fills the page via CSS, and the code uses the `clientWidth` and `clientHeight` properties of the DOM element to determine the current size. A `resize` event listener triggers the `redraw` function, which updates the SVG’s width and height attributes and repositions the two lines using a data join. The visualization relies on D3 v5 and standard SVG rendering.

Oct 31, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser resizing by drawing a large green X that spans the full width and height of the viewport. The chart container fills the page using CSS, and the `redraw` function reads the container’s `clientWidth` and `clientHeight` to set the SVG’s dimensions. Two `<line>` elements are bound to data and updated on each resize event via `window.addEventListener("resize", redraw)`. The code uses D3 v5 with SVG rendering, showing a minimal pattern for dynamic sizing.

Oct 31, 2019
Loading thumbnail…

Making a Bar Chart

A bar chart illustrates data from a CSV file, mapping values to rectangular bars. The example demonstrates fundamental DOM manipulation with D3.js v5, using `d3.select` and `d3.csv` to load data and append SVG elements. It renders the visualization into an SVG container with fixed width and height, applying styling from an external stylesheet. The chart shows how to bind data to elements and create a basic bar layout.

Oct 31, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The code builds an SVG face from primitive shapes—a yellow circle for the head, eyes, a mouth via `d3.arc`, and rectangular eyebrows—centered using a translation. It then animates the brows upward and back over two seconds using chained `.transition().duration(2000)` calls, showing how to select elements, append shapes, and apply sequential transitions. The example uses D3 v5 and renders entirely in the browser as an animated SVG.

Oct 31, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, using SVG elements for rendering. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows are positioned as rectangles. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct the shapes, with attributes set manually for placement. The face is centered via a translation on a group element, and the mouth is drawn as an arc path. The example highlights fundamental DOM manipulation and SVG shape creation in D3.

Oct 31, 2019