How can I get this globe visualisation(svg) to become responsive to different screen sizes?

Question

Languages: Javascript, HTML and CSS.

Frameworks: D3.js

link to code: https://observablehq.com/@michael-keith/draggable-globe-in-d3

Question:

How can I get the globe visualisation to become responsive to different screen sizes? eg at iphone globe width width = 200px at ipad globe width = 300px

First What I don't want is to set breakpoints to resize the <svg>

What I've tried:

I've tried using the attributes viewBox and preserveAspectRatio eg

  .attr("viewBox", `0 0 ${width} ${height}`)
  .attr("preserveAspectRatio", "xMinYMin meet")

however, nothing happens. my guess might be because of how the height and width are set. eg

let width = d3.select("#map").node().getBoundingClientRect().width
let height = 500

any ideas are welcome

Answer 1

Did you try using viewBox directly on the svg tag, without specifying width or height? Your javascript should be able to pick the computed size anyway.