analysis of ages of visitors

This bar chart was inspired by Attendance at the Disneyland theme park .

Data from analysis of amounts of visitors of Disneyland in Shanghai in 2016. Data includes the age range and the percent of the visitors of Disneyland in 2016 in Shanghai.

Built with blockbuilder.org

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

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label {
      font-size: 23pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: white;
    }
    .number, .subtitle {
      font-size: 20pt;
      font-family: 'sans-serif';
      alignment-baseline: middle;
      fill: #000000;
    }
    .bar {
      fill: #d09eff;
    }
  </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('Analysis of ages of visitors of Disneyland in 2016.');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "< 25",
        value: 19
      },
      {
        name: "26-35",
        value: 58.1
      },
      {
        name: "36-45",
        value: 16.6
      },
      {
        name: "> 46",
        value: 6.3
      }
    ];
    
    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')
        .transition()
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
        .attr('fill', 'black');
    
    groupsEnter
      .append('text')
    		.transition()
        .attr('class', 'label')
        .attr('x', 15)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    const xPercent = d => percentFormat(xValue(d) / xScale.domain()[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