David Victor

@thepianist9·2 public vizzes

Making a Bar Chart

This example demonstrates the initial step of building a bar chart with D3.js, binding population data from a CSV file to SVG rectangles. The code uses `d3.csv` to load data and `selectAll` with data joins to append `<rect>` elements, though it only sets fixed width and height attributes without scaling or axes. The visualization currently renders placeholder rectangles, showing the foundation for a chart rather than a polished result.

Nov 18, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3 v5 visualization can dynamically resize to fill its browser window. It shows two thick, semi-transparent green lines forming an X that stretches and contracts as the viewport changes. The code uses the CSS `position: fixed` property with `clientWidth` and `clientHeight` to compute the current container dimensions on every window `resize` event. A `redraw` function updates the SVG’s width and height attributes and rebinds the line data, using the d3 selection `merge` pattern to efficiently update existing elements. Rendering is done via the SVG API.

Nov 18, 2020