king-seo

@king-seo·4 public vizzes

Customizing Axes

This visualization displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It shows a bar chart where each rectangle’s height corresponds to the population value, with customized axes featuring large tick labels, colored tick lines, and styled axis titles. The code uses D3 v5’s `select`, `csv`, and scaling functions to load and process data, rendering SVG elements. Custom CSS classes style the ticks, labels, and title, demonstrating how to fine-tune axis appearance beyond default settings.

Aug 28, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates a simple, responsive SVG visualization that adapts to the browser window's size. It draws two thick green lines forming an X across the entire viewport, illustrating how CSS-computed dimensions are used to redraw the graphic on window resizing. The D3 v5 code, using `d3.select`, extracts the container's `clientWidth` and `clientHeight` to update the SVG's `width` and `height` attributes, then repositions the line elements via the `merge` operation. A `window.addEventListener("resize")` handler triggers the `redraw` function whenever the window changes.

Aug 28, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A green X-shaped pair of lines is drawn across the full viewport, with the SVG dimensions updated to match the CSS-computed container size on every resize event. The code uses `chartDiv.clientWidth` and `chartDiv.clientHeight` within a `redraw` function, triggered initially and via `window.addEventListener("resize", redraw)`. The SVG is created with `d3.select`, and lines are bound to data arrays and updated using the merge pattern.

Aug 28, 2019

Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” centered on a dark blue background using the Ubuntu font. It demonstrates how to import D3.js API functions and local ES6 modules, with the message defined in a separate `myMessage.js` file. The code uses `d3.select` to target the `#message` div and sets its text content, while CSS via `styles.css` handles the large 12em font size and page styling.

Aug 24, 2019