CS573_HW1_3

The United Nations World Tourism Organization (UNWTO) estimates that internationally there are 1.2 billion tourist arrivals in 2016. The bar chart presents this data. The length of the bar shows the share of tourists in each states.

This bar chart was forked from curran's block: Extremist Murders in the US. Data from Our World in Data "Tourism in Global Connections" by Max Roser.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 10pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #300089;
    }
    .bar {
      fill: #300089;
    }
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 500;
    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('International tourist arrivals by world region in 2016 (Millions)');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "Europe",
        value: 619.7
      },
      {
        name: "Asia & Pacific",
        value: 302.9
      },
      {
        name: "Americas",
        value: 200.9
      },
        {
        name: "Africa",
        value: 58.2
      },
        {
        name: "Middle East",
        value: 53.6
      }
    ];
    
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
    const xValue = d => d.value;
    const yValue = d => d.name;
    
    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))+25)
        .attr('height', yScale.bandwidth())
        .attr('fill', 'black');
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 10)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    const xPercent = d => percentFormat(xValue(d) / 1235.3);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 33)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)} (${xPercent(d)})`);

</script>
</body>

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