Rohingya Refugees in Cox's Bazar and Fires in Myanmar

Location of refugess data from HDX: Location of Rohingya Refugees in Cox's Bazar (CSV File).

Updated fire data (fire_nrt_V1_18619.csv and fire_nrt_M6_18618.csv, both shown in the visualization) was requested from Fire Information for Resource Management System (FIRMS) Fire Archive Download for MODIS Collection 6 and VIIRS 375 m on Sept. 29, 2017, with the following details:

Download Id(s): 18618 18619
Data Source: MODIS C6 & VIIRS
Area of Interest: Myanmar
Date Range: 2017-06-01 to 2017-09-29
Data Format: .csv
Request Time : 2017-09-29 09:20:49

For reference:

The first pass at the locations of fires in Myanmar (myanmar-fires.csv, not shown on the visualization any more) from Hindustan Times: Rohingya villages burnt to the ground in Myanmar, sparking one of world’s worst refugee crises via GitHub: HindustanTimesLabs/rohingya-village-fires. This data was first published in the article by Amnesty International: Myanmar: Scorched-earth campaign fuels ethnic cleansing of Rohingya from Rakhine State.
Another related piece: New York Times: Satellite Images Show More Than 200 Rohingya Villages Burned in Myanmar
Related article: Human Rights Watch: Burma: Satellite Imagery Shows Mass Destruction

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://unpkg.com/d3-tip@0.7.1/index.js"></script>
  <style>
    /* From https://bl.ocks.org/Caged/6476579 */
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    circle:hover {
      stroke: red;
    }
  </style>
</head>
<body>
  <svg width="960" height="1200"></svg>
  <script>
    const svg = d3.select('svg');
    const pathsLayer = svg.append('g');
    const worldPath = pathsLayer.append('path')
        .attr('fill', 'white');
    const bangladeshPath = pathsLayer.append('path')
        .attr('fill', '#efefef')
        .attr('stroke', '#cccccc');
    const locationsLayer = svg.append('g');
    const sitesLayer = svg.append('g');
    const firesLayer = svg.append('g');
    
    const colorScale = d3.scaleOrdinal().range(d3.schemeCategory20);
    
    const campsColorScale = d3.scaleOrdinal()
      .range(['#addefe', '#0072BC']);
    
    const projection = d3.geoOrthographic()
      .rotate([267.6180000000006, -21.166000000000054, 0])
      .scale(70000);
    const geoPath = d3.geoPath().projection(projection);
    const dragSensitivity = 0.002;

// This function drives the radius of the circles.
    const rValue = d => d.Pop_Total;
    
    // Color by date.
    const colorValue = d => d.acq_date;
    
    const campsColorValue = d => d.UNHCR_Managed;

d3.queue(3)
      .defer(d3.json, 'world-110m.json')
      .defer(d3.json, 'BGD.json')
      .defer(d3.csv, '20171008-rohingya-sites-location-in-coxs-bazar-with-unhcr.csv')
      //.defer(d3.csv, 'myanmar-fires.csv')
      .defer(d3.csv, 'fire_nrt_V1_18619.csv')
      .defer(d3.csv, 'fire_nrt_M6_18618.csv')
      .await(ready);

function ready(err, world, bangladesh, sites, fires1, fires2){
      const fires = fires1.concat(fires2);
      
      const worldFeature = topojson.feature(world, world.objects.land);
      const bangladeshFeature = topojson.feature(bangladesh, bangladesh.objects.BGD_Admin2);
      const bangladeshLocations = topojson.feature(bangladesh, bangladesh.objects.BGD_Locations);

// Parse values in CSV data.
      sites.forEach(d => {
        d.Pop_Total = +d.Pop_Total;
        d.Pop_Prior_Aug_2017 = +d.Pop_Prior_Aug_2017;
        d.Inflow = +d.Inflow;
        d.Latitude = +d.Latitude;
        d.Longitude = +d.Longitude;
        d.location = [d.Longitude, d.Latitude];
      });
      
      // Make sure UNHCR sites stand out on top in Z order.
      sites.sort((a, b) => d3.ascending(campsColorValue(a), campsColorValue(b)));
      
      // Parse values for fires data.
      fires.forEach(d => {
        d.latitude = +d.latitude;
        d.longitude = +d.longitude;
        d.location = [d.longitude, d.latitude];
      });

const rScale = d3.scaleSqrt()
        .domain([0, d3.max(sites, rValue)])
        .range([0, 30]);

function render(){
        worldPath.attr('d', geoPath(worldFeature));
        bangladeshPath.attr('d', geoPath(bangladeshFeature));

const siteCircles = sitesLayer.selectAll('circle').data(sites);
        const siteCirclesEnter = siteCircles
          .enter().append('circle')
            .attr('fill', d => campsColorScale(campsColorValue(d)))
            .attr('fill-opacity', 0.4)
            .attr('stroke', d => campsColorScale(campsColorValue(d)));
        siteCirclesEnter
          .merge(siteCircles)
            .attr('cx', d => projection(d.location)[0])
            .attr('cy', d => projection(d.location)[1])
            .attr('r', d => rScale(rValue(d)))
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

const fireCircles = firesLayer.selectAll('circle').data(fires);
        const fireCirclesEnter = fireCircles
          .enter().append('circle')
            .attr('fill', 'red')
            .attr('fill-opacity', 0.4);
        fireCirclesEnter
          .merge(fireCircles)
            .attr('cx', d => projection(d.location)[0])
            .attr('cy', d => projection(d.location)[1])
            .attr('r', 5)
            .attr('fill', d => colorScale(colorValue(d)))
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

// This code works but the locations available are useless as context.
        //const locationsData = bangladeshLocations.features.map(d => ({
        //  location: d.geometry.coordinates,
        //  name: d.properties.LocName
        //}));
        //const locationText = locationsLayer.selectAll('text').data(locationsData);
        //const locationTextEnter = locationText
        //  .enter().append('text')
        //    .attr('fill', 'black');
        //locationTextEnter
        //  .merge(locationText)
        //    .attr('x', d => projection(d.location)[0])
        //    .attr('y', d => projection(d.location)[1])
        //    .text(d => d.name);
      }

render();
      svg.call(d3.drag().on('drag', () => {
        const { dx, dy } = d3.event;
        const [x, y] = projection.rotate();
        projection.rotate([x + dx * dragSensitivity, y - dy * dragSensitivity]);
        console.log(projection.rotate());
        render();
      }));
    }

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js

https://unpkg.com/d3-tip@0.7.1/index.js