Clair Sun

@clair0402·5 public vizzes

I'm Learning D3

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017. The visualization employs d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with d3.axisLeft and d3.axisBottom to display axes. Population data is loaded from a CSV file using d3.csv, and rectangles are bound to the data to render the bar heights and widths. The chart demonstrates customized D3 v4 axes alongside basic SVG rendering.

Nov 16, 2019

Loading thumbnail…

Untitled

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It builds on a basic bar chart example and demonstrates customization of D3 axes. The visualization uses d3.v4 to create SVG rectangles, with bar width calculated from the dataset length and bar height proportional to population values. The chart’s background is styled via CSS, and the code includes a simple dataset array of nine values for illustration.

Nov 16, 2019

Loading thumbnail…

Try D3

This example demonstrates a blank SVG canvas populated through D3.js version 5, with a minimal stylesheet that removes page margins and hides overflow. The code initializes an empty 960×500 pixel SVG element and includes a script tag for the D3 library, though no data or visualization is actually drawn. It serves as a starting point for learning D3’s SVG manipulation capabilities, with the video link in the README providing further guidance. The example relies on the raw `d3.select` and SVG element creation APIs, though these are not yet invoked in the visible code.

Nov 7, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through a static composition of circles, rectangles, lines, and paths. The shapes display varied fill colors, stroke widths, and transparency settings, with grouped elements transformed using SVG’s `translate` and `scale` attributes. The `.lines` CSS class applies stroke properties to lines and paths, while path-specific stroke-linejoin and stroke-linecap are set. The SVG renders inline in HTML with a linked stylesheet, showing how SVG presentation attributes combine with external CSS rules for color and geometry control.

Nov 7, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a blank SVG canvas ready for shape and color exploration, with a fixed viewport of 960 by 500 pixels and no visible content by default. The HTML structure loads D3 v5 and links an external stylesheet that removes page margins and hides overflow, creating a clean, distraction-free surface. The code includes an empty SVG element and an empty script tag, indicating a template for adding custom SVG drawings and CSS styling. The rendering approach relies on native SVG in the browser, with D3 available for potential dynamic manipulation, though no shapes or colors are actually drawn in the provided files.

Nov 7, 2019