Highmaps

TopoJSON + globe(orthographic)

by amrutaJgtp

HTML

<div id="container" style="height: 600px; min-width: 310px"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

// Your provided JSON (parsed as JS object)
const options = {
  "chart": {
    "inverted": false,
    "backgroundColor": "rgba(255,255,255,0)",
    "plotBackgroundColor": "rgba(255,255,255,0)",
    "zoomType": null,
    "resetZoomButton": {
      "theme": {
        "style": { "visibility": "hidden" }
      }
    },
    "spacingBottom": 5,
    "spacingTop": 10,
    "animation": false
  },
  "title": {
    "text": ".",
    "style": { "color": "rgba(255, 255, 255, 0)", "fontSize": "1px" },
    "floating": true,
    "margin": 0
  },
  "tooltip": {
    "enabled": true,
    "borderWidth": 1,
    "borderRadius": 1,
    "backgroundColor": "#ffffff",
    "style": {
      "color": "#000000",
      "fontSize": "1rem",
      "fontFamily": "Open Sans",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "textDecoration": "none"
    },
    "useHTML": true,
    "shared": true,
    "crosshairs": [null, null]
  },
  "plotOptions": {
    "series": {
      "animation": { "duration": 700 },
      "cursor": "pointer",
      "allowPointSelect": true,
      "showInLegend": true,
      "turboThreshold": 0,
      "stickyTracking": false,
      "borderRadius": 0,
      "borderColor": "rgba(192,192,192,1)"
    }
  },
  "legend": {
    "enabled": true,
    "borderWidth": 0,
    "layout": "horizontal",
    "backgroundColor": "rgba(255,255,255,0)",
    "itemHoverStyle": { "color": "#000000", "fontSize": "1rem", "fontFamily": "Open Sans" },
    "itemStyle": { "color": "#000000", "fontSize": "1rem", "fontFamily": "Open Sans" },
    "align": "center",
    "verticalAlign": "bottom",
    "margin": 0,
    "padding": 5,
    "itemHiddenStyle": { "color": "rgb(204, 204, 204)", "textDecoration": "none" }
  },
  "credits": { "enabled": false },
  "exporting": { "enabled": false },
  "series": [
    { "showInLegend": false, "zIndex": -1 },
    {
      "id": "series0",
      "name": "A",
      "zIndex": 4,
      "color":...