Skip to main content
Log in
H

htt102

@htt102·2 public vizzes

Loading thumbnail…

Hello VizHub

This example displays an interactive world map using a Natural Earth dataset loaded with `d3.json` and `d3.tsv` from the world-atlas package. It renders country boundaries with `d3.geoPath` and `d3.geoEquirectangular`, with zooming enabled via `d3.zoom`. Clicking on the map adds circles at projected coordinates using `d3.scaleLinear` axes, and hovering over a circle shows its x/y values as SVG text. The visualization combines map navigation with scatter-plot annotations in a single svg canvas.

Jan 8, 2020
Loading thumbnail…

Hello VizHub

A single yellow circle with a black outline fills the center of an SVG canvas, demonstrating the basic setup of a D3.js visualization. The example uses the `d3.select` API to target the SVG element, then appends a circle element with radius and center coordinates derived from the SVG's width and height attributes. The visualization renders through SVG, with the circle's fill and stroke set via `.attr()`. It serves as a minimal template for creating interactive web graphics with D3 version 5.

Oct 22, 2019