kenneth

@kenbabu·4 public vizzes

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically adjust to its container’s size by redrawing an SVG graphic on every browser resize event. The chart fills the entire page via CSS and uses `clientWidth` and `clientHeight` to set the SVG’s width and height attributes. It draws two crossed green lines with `stroke-width` and `stroke-opacity` to visually confirm that the resized dimensions are correct. The `redraw` function is called initially and then re-invoked through a `window` resize listener.

Sep 17, 2019

Loading thumbnail…

Let's make a map

This example displays a world map rendered as SVG paths, showing country boundaries in a simple Mercator projection. The visualization loads geographic data from a world-atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` method. It uses d3.json to fetch the data, d3.geoMercator for the projection, and d3.geoPath to generate the path data, appending each country as a `<path>` element to the SVG.

Sep 9, 2019

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to construct a simple cartoon face using SVG shapes. The code builds a yellow circle for the head and two black circles for the eyes, all positioned relative to the SVG's width and height. It uses D3.js version 5's selection and attribute methods—`select`, `append`, and `attr`—to create and style the shapes dynamically. The styling is handled through inline attributes for stroke and fill, with the SVG canvas set to 960 by 500 pixels.

Sep 7, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that displays a static text message, “Hello VizHub!”, centered on a dark blue background. It shows how to create a basic web page using D3 v5, ES6 modules, and CSS styling. The code imports the `select` function from D3 to target a `div` element and set its text content, while the message itself is exported from a separate local module. The page is styled with the Ubuntu font and a large font size via an external stylesheet.

Sep 7, 2019