kylebot0

@kylebot0·3 public vizzes

Sized Points on a Map

This map of Amsterdam displays the locations of universities and colleges, shown as small yellow circles, layered over the city’s neighborhoods, which are colored by district. A tooltip appears on hover, and clicking a school highlights it while fading the others. The visualization uses D3 v5 with a Mercator projection (`d3.geoMercator`) and path generation (`d3.geoPath`) to render TopoJSON neighborhood boundaries. City data comes from a local JSON file, and interactions like zoom and tooltips are implemented with D3’s zoom and event handlers.

Dec 5, 2019

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized and colored according to the number of cultural heritage objects associated with each country. The code uses `d3.geoMercator` for projection, `d3.geoPath` to render country boundaries, and `d3.scaleSqrt` for circle radii based on data from a SPARQL query. Hovering enlarges a circle and shows a tooltip with the country name and object count, while a dropdown filters by material category. A legend and zoom functionality are also included.

Dec 4, 2019

Loading thumbnail…

Untitled

This example shows a hierarchical ring visualization of the flare dataset, where each arc segment represents a node and its size corresponds to either node count or the node’s `size` value. Animated transitions between these two partitions are triggered by clicks, with `d3.layout.partition` computing the layout and `d3.svg.arc` generating the radial shapes. The animation uses `transition.attrTween` paired with an interpolation function to smoothly adjust the arcs over 1.5 seconds.

Nov 12, 2019