saliha54

@saliha54·3 public vizzes

D3 Map

This map displays world country boundaries in an interactive natural Earth projection. It uses D3's `geoNaturalEarth1` projection and `geoPath` to render SVG paths, with a topojson `feature` transformation applied to country data from a world-atlas JSON file. The visualization includes a sphere background and country shapes in distinct colors. Zooming is enabled through D3's `zoom` event, which updates the group element's transform based on the current view.

Dec 23, 2019

Loading thumbnail…

D3 Circles on a Map

This visualization displays global population estimates for 2018 using circles positioned at country centroids on a natural Earth projection, rendered as an SVG. It uses `d3.geoPath` for map geography, `d3.geoCentroid` for circle placement, and `d3.scaleSqrt` to encode population via circle area. The code loads UN population data from a CSV and country boundaries from a TopoJSON file, styling countries and circles with CSS. A legend shows size scaling, and missing data is highlighted in red. Interactivity includes hover highlighting and zooming via `d3.zoom`.

Dec 23, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face in an SVG canvas using D3.js selections and attribute manipulation. The code appends a circle to the SVG element, sizing and centering it based on the SVG's width and height attributes. It demonstrates fundamental DOM manipulation through D3's `select` and `append` methods, with the face rendering in a blank browser viewport. The illustration focuses on basic shape creation and positioning rather than complex data binding or interaction.

Dec 20, 2019