chang ho lee

@Mrchanghao·4 public vizzes

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2017 United Nations population estimates, with country names on the y-axis and population on the x-axis. The visualization highlights axis customization in D3 v5, including a formatted tick label that abbreviates large numbers with the `d3.format` function, a removed domain line, and custom tick marks that extend across the chart. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG, with teal bars and styled text labels.

Oct 26, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how to make a data visualization responsive by resizing an SVG chart to fill the browser window. The chart container uses CSS positioning with fixed edges, while the SVG element has explicit width and height attributes. The implementation relies on D3.js v5, with the core interaction tied to listening for window resize events, though the main visual content would be rendered through D3’s SVG manipulation methods. The example focuses on the structural setup for handling viewport changes rather than displaying a specific dataset.

Oct 26, 2020

Loading thumbnail…

HTML Starter

This example visualizes the population of nine countries using a bar chart rendered as SVG circles, with country names on the y-axis and population counts on the x-axis. The code loads data from a CSV file and uses D3.js v5.6.0's `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` APIs to construct the chart. It applies custom tick formatting to display population values in billions and uses CSS to style the rectangles and text elements. The visualization is stripped down to a minimal HTML page with a single SVG container.

Oct 13, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in large, centered type on a blank page. It demonstrates the minimal setup for an HTML document that loads the D3 library from a CDN. The page uses a `<style>` block to set the body’s text alignment and font size, while the D3 script is included via a `<script>` tag in the head. The content is static, with no JavaScript logic in the separate `index.js` file.

Oct 13, 2020