Javascript로 전 세계 🌍 🔥 활성 화재 🔥 시각화

원래 내blog에 게시됨

우리는 무엇을 배울 것입니까?

이 기사에서는 Javascript에서 Znote을 통해 Plotlyjs 및 Streams와 함께 개방형 데이터를 사용하여 전 세계 활성 화재 데이터를 탐색하는 방법을 살펴봅니다.

활성 화재 데이터

두 개의 위성(Aqua 및 Terra)에 탑재된 MODIS 시스템(보통 해상도 이미징 분광 방사계)을 사용하여 화재 위치 및 열 이상을 제공하는 NASA 덕분에 화재가 행성 전체에 어떻게 분포되어 있는지 시각화할 수 있습니다.

어디에서 데이터를 얻습니까?

마지막 활성 화재 데이터를 사용할 수 있습니다here.

기록을 탐색하려면 아카이브here를 요청할 수도 있습니다.

데이터 세트 설명

Danfojs으로 간단한 인쇄를 통해 사용 가능한 열을 찾기 위해 데이터 세트 미리 보기를 시작합니다.

const df = await dfd.readCSV("https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv");
print(df); // or df.ctypes to list all columns

전체 데이터세트 설명은 here입니다.

활성 화재의 세계지도

각 포인트는 매일 선언된 새로운 화재입니다. 매일 시작되는 새로운 화재의 수는 충격적입니다 😨

아래 지도는 2022년 7월과 8월을 스크롤합니다.

이 맵을 어떻게 구축합니까?

const summer2022 = "/Users/alagrede/Desktop/modis-active-fires-7d.csv";

const content = _fs.readFileSync(summer2022, 'utf8'); // read data file

function show(date) {
    // get lat/long fields for date given
    const latLong = content.split('\n')
        .filter(r=>String(r.split(",")[5]).startsWith(date))
        .map(r => [r.split(",")[0], r.split(",")[1]]) // lat/long
    latLong.shift(); // remove header

    var data = [{
        type: 'scattergeo',
        lon: latLong.map(r=>r[1]),
        lat: latLong.map(r=>r[0]),
        marker: {size: 2, color:'red'}, // draw fires
    }];

    var layout = {
        geo: {
            scope: 'world',
            resolution: 50,
            showland: true,
            showocean: true,
        },
        title: date,
    };
    Plotly.newPlot(el, data, layout);
}

// list days between 2 dates (functions used are described at the end of the article)
var daylist = await getDaysArray(new Date("2022-08-18"), new Date("2022-08-24"));

// loop over days
for(const day of daylist) {
    show(day);
    await sleep(500);
}

데이터 새로 고침(마지막 7일) ℹ️

이제 데이터를 새로 고치고 파일에 저장하는 함수를 만들 수 있습니다. 마지막 7d 파일은 온라인에서 직접 사용할 수 있습니다.

const r = await fetch('https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv')
const content = await r.text();
_fs.writeFileSync('/Users/alagrede/Desktop/modis-active-fires-7d.csv', content);

국가에 집중

이제 중심점을 선택하고 지도 범위를 변경하여 선택한 특정 국가에 집중할 수 있습니다.

특정 지리적 위치를 찾으려면 Google 지도를 열고 지점을 선택한 다음 위도/경도를 복사/붙여넣기하십시오.

Plotlyjs API 설명을 찾을 수 있습니다here.

var layout = {
    geo: {
        center: {lat: -46.449031, lon: 2.521705}, // France
        projection: {scale: 1.5}, // zoom
        scope: 'europe', // "africa" | "asia" | "europe" | "north america" | "south america" | "usa" | "world"
        resolution: 50,
        showland: true,
        showocean: true,
    },
    title: date,
};
Plotly.newPlot(el, data, layout);

프랑스

위에서 제안한 대로 슬라이더를 추가하여 시간을 수동으로 탐색할 수 있습니다.

Plotly.newPlot(el+"-myGraph", data, layout);

// add a slider control (min - max - onChange callback)
const slider = await createSlider(0, daylist.length - 1, async function() {
   show(daylist[slider.value]);
   await sleep(200);
});

htmlEl.innerHTML=""; // reset result div
htmlEl.appendChild(slider); // add html slider
var graph = createElement("div"); // add the map into a div
graph.id = el+"-myGraph"; // plotly html id
htmlEl.appendChild(graph); // append map
show(daylist[0]);

2000년 이후 프랑스 화재 진화

이제 우리는 화재가 발생한 위치를 알았으므로 2000년 이후 화재 횟수가 어떻게 변했는지 살펴보는 것이 흥미로울 것입니다.
이 표는 media로 인해 massive heat wave in Europe에 보고된 2003년의 예외적인 화재 활동을 보여줍니다.

2019년 신기록
Forest fires: in France, in the middle of summer, the area burned is greater than in all of 2019

2022년에도 신기록…
France's unprecedented summer of wildfires, in maps and graphs

// All France fires count (make a ticket to ask history of fires)
const allfires = "/Users/alagrede/Desktop/fire_archive_M-C61_290304.csv";
const content = _fs.readFileSync(allfires, 'utf8');
const activeFires = content.split('\n');
activeFires.shift();
const count = activeFires
    // map to month
    .map(r=>String(r.split(",")[5]).slice(0,7)) // date field like 2008-08
    // map to year
    //.map(r=>String(r.split(",")[5]).slice(0,4)) // date field like 2008
    // group by
    .reduce((total, value) => {
        total[value] = (total[value] || 0) + 1;
        return total;
    }, {});

const data = [{
  y: Object.values(count),
  x: Object.keys(count),
  type: 'scatter'
}];

const layout = {
  title: "Evolution of active fires",
  height: 400,
  width: 500
}

Plotly.newPlot(el, data, layout);

온도 이상

기온 측면에서는 2000년대 이후 기온의 상승세가 뚜렷하다.

이것은 부분적으로 화재의 증가와 기록이 자주 깨지는 이유를 설명합니다.

const r = await fetch('https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series/globe/land_ocean/ytd/12/1880-2016.json')
const json = await r.json();
//printJSON(json);
const result = Object.entries(json.data).map(year => [year[0], year[1]]);

const data = [{
  y: result.map(r=>r[1]),
  x: result.map(r=>r[0]),
  type: 'scatter'
}];

const layout = {
  title: "World temperature anomalies",
  height: 400,
  width: 500
}

Plotly.newPlot(el, data, layout);

세계

Unsurprisingly, the world is following the same upward trend.

기타 대륙

유럽에 비하면 아프리카와 남미 대륙에서 새로 선포된 화재 건수는 말그대로 무섭다... 😅





스크립트에서 사용되는 함수

async function getDaysArray(start, end) {
    for(var arr=[],dt=new Date(start); dt<=new Date(end); dt.setDate(dt.getDate()+1)){
        arr.push(new Date(dt).toISOString().slice(0,10));
    }
    return arr;
}
async function sleep(time) {
  await new Promise(r => setTimeout(r, time));
}
async function createSlider(min, max, callback) {
  var slider = createElement('input');
  slider.type = 'range';
  slider.min = min;
  slider.max = max;
  slider.value = 0;
  slider.step = 1;
  slider.style.marginLeft = "0px"
  slider.style.width = "100%"
  slider.addEventListener('input', callback, false);
  return slider;
}

더 나아가

이 예제를 더 자세히 살펴보려는 사용자를 위해 전체 Javascript 노트북은 myGithub repo에서 사용할 수 있습니다.

이 데이터의 사용을 용이하게 하기 위해 이 예제는 대화형Znote 앱으로 만들어졌습니다.