Карты, использующие зоны с d3. js - PullRequest
Новая
       57

Карты, использующие зоны с d3. js

0 голосов
/ 28 апреля 2020

Я пытаюсь построить карту! Моя карта настроена, но у меня есть вопрос о включении данных, показанных здесь https://gist.githubusercontent.com/tonydisera/f54eee20d2406e1873ec71c5fbd018bd/raw/dffd16b8ddd29438e8da2e9d43a71c4aa1c76f02/GISTEMPData2.csv

Поскольку она настроена как зоны с 24N-90N, я не уверен, как пусть мой javascript прочитает эти данные, чтобы узнать, где их разместить на карте. В конце концов я хочу, чтобы температуры, которые были круче, были голубыми, а температуры, которые были теплее, были красными. Но сейчас я не уверен, как включить зоны в это. I almost want it to look something like this so I attached this photo if my words did not make any sense, I got this photo from NASA Я почти хочу, чтобы это выглядело примерно так, поэтому я прикрепил эту фотографию, если мои слова не имели никакого смысла, я получил это фотография из НАСА 

 <html>
<meta charset="utf-8">
<style>
  .countries {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  .legendThreshold {
      font-size: 12px;
      font-family: sans-serif;
  }
  .caption {
      fill: #000;
      text-anchor: start;
      font-weight: bold;
  }

  {
      font-family:"avenir next", Arial, sans-serif;
      font-size: 12px;
      color: #696969;
    }


    #play-button {
      position: absolute;
      top: 140px;
      left: 50px;
      background: #f08080;
      padding-right: 26px;
      border-radius: 3px;
      border: none;
      color: white;
      margin: 0;
      padding: 0 12px;
      width: 60px;
      cursor: pointer;
      height: 30px;
    }

    #play-button:hover {
      background-color: #696969;
    }    

    .ticks {
      font-size: 10px;
    }

    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

    .track-inset {
      stroke: #dcdcdc;
      stroke-width: 8px;
    }

    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }

    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
</style>
<svg width="1000" height="900"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script src="map.js"></script>
<script src="slider.html"></script>
</head>

<body>
<div id="vis">
  <button id="play-button">Play</button>
</div>

  </html>

// Javascript начинается ниже 

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
    .scale(width / 1.5/ Math.PI)
    .translate([width / 2, height / 1.5])
var path = d3.geoPath()
    .projection(projection);

// Data and color scale
var data = d3.map();
var colorScheme = d3.schemeGreys[8];
colorScheme.unshift("#eee")
var colorScale = d3.scaleThreshold()
    .domain([1, 6, 11, 26, 101, 1001])
    .range(colorScheme);

// Legend


// Load external data and boot
d3.queue()
    .defer(d3.json, "http://enjalot.github.io/wwsd/data/world/world-110m.geojson")
    //.defer(d3.csv, "", function(d) { data.set(d.code, +d.total); })
    .await(ready);

function ready(error, topo) {
    if (error) throw error;

    // Draw the map
    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(topo.features)
        .enter().append("path")
            .attr("fill", function (d){
                // Pull data for this country
                d.total = data.get(d.id) || 0;
                // Set the color
                return colorScale(d.total);
            })
            .attr("d", path);
}
...