Top Megacities Population

This bar chart was inspired by my humanity seminar- Urban Studies. Data from Wikipedia: Megacity.

forked from curran's block: Extremist Murders in the US

This simple block shows the population of top 20 megacities in the world (in millions) - data from Wikipedia. Megacity is generally defined as a metropolitan area with a total population in excess of ten million people.

I color coded the continent: Red for Asia, Blue for North America, Green for South America, and Yellow for Africa.

From this color code, we can see a majority of the megacities are in Asia.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|PT+Sans" rel="stylesheet">
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 17pt;
      font-family: 'Josefin Sans', sans-serif;
      alignment-baseline: middle;
      fill: white;
    }
    .subtitle{
      padding-bottom: 16px;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'PT Sans', sans-serif;
      alignment-baseline: middle;
      fill: #73636f;
    }
    
    .bar {
      
    }
    .bar:hover {
      fill: #73636f;
    }
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 800;
    const margin = {
      left: 50,
      right: 200,
      top: 90,
      bottom: 52
    }
    
    const svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    
    svg.append('text')
        .attr('class', 'subtitle')
        .attr('x', margin.left)
        .attr('y', 86)
        .text('Population of Top 20 Megacities in the World (Millions)');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "Tokyo",
        country: "Japan",
        continent: "Asia",
        value: 38.8
      },
      {
        name: "Greater Jakarta",
        country: "Indonesia",
        continent: "Asia",
        value: 31.5
      },
      {
        name: "Seoul",
        country: "South Korea",
        continent: "Asia",
        value: 25.5
      },
      {
        name: "Karachi",
        country: "Pakistan",
        continent: "Asia",
        value: 24.3
      },      
      {
        name: "Shanghai",
        country: "China",
        continent: "Asia",
        value: 24.2
      },      
      {
        name: "Manila",
        country: "Philippines",
        continent: "Asia",
        value: 24.1
      },      
      {
        name: "New York City",
        country: "United States",
        continent: "North America",
        value: 23.6
      },
      {
        name: "Mumbai",
        country: "India",
        continent: "Asia",
        value: 23.6
      },      
      {
        name: "Mexico City",
        country: "Mexico",
        continent: "North America",
        value: 22.2
      },
      {
        name: "Delhi",
        country: "India",
        continent: "Asia",
        value: 21.8
      },
      {
        name: "Beijing",
        country: "China",
        continent: "Asia",
        value: 21.5
      },
      {
        name: "São Paulo",
        country: "Brazil",
        continent: "South America",
        value: 21.3
      },
      {
        name: "Lagos",
        country: "Nigeria",
        continent: "Africa",
        value: 21.0
      },
      {
        name: "Wuhan",
        country: "China",
        continent: "Asia",
        value: 20.6
      },
      {
        name: "Kyoto-Osaka-Kobe",
        country: "Japan",
        continent: "Asia",
        value: 20.3
      },
      {
        name: "Guangzhou",
        country: "China",
        continent: "Asia",
        value: 19.9
      },
      {
        name: "Chongqing",
        country: "China",
        continent: "Asia",
        value: 19.4
      },
      {
        name: "Cairo",
        country: "Egypt",
        continent: "Africa",
        value: 18.8
      },
      {
        name: "Los Angeles",
        country: "United States",
        continent: "North America",
        value: 18.6
      },
      {
        name: "Chengdu",
        country: "China",
        continent: "Asia",
        value: 18.4
      }
    ];
    
    const colorCode = {
      "Asia":"#8f2525",
      "Africa":"#ffad60",
      "North America":"#295398",
      "South America":"#257562"
    }
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
    const xValue = d => d.value;
    const yValue = d => d.name + ', ' +d.country;
    const getColor = d => colorCode[d.continent]
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, xValue)])
      .range([0, innerWidth]);
    
    const yScale = d3.scaleBand()
      .domain(data.map(yValue).reverse())
      .range([innerHeight, 0])
      .padding(0.272);
    
    const groups = g.selectAll('g').data(data);
    const groupsEnter = groups
      .enter().append('g')
        .attr('transform', d => `translate(0, ${yScale(yValue(d))})`);
    
    
    groupsEnter
      .append('rect')
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
        .attr('fill', d => getColor(d));
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 15)
        .attr('y', yScale.bandwidth() / 2)
    		.attr('dx', '0.5em')
    		.attr('dy', '0.2em')
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 8)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d) }`);

</script>
</body>

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