Speed Dating - Match Percentage by Field

Original block was part of the video course: D3.js in Motion.

This horizontal bar chart shows the percent of matches obtained by individuals of various academic backgrounds (fields) who partook in speed dating events. A match is defined by both the individual and their partner mutually liking one another. Individuals partake in several dates within the dataset.

The data shown here was aggregated in Python (Pandas) and was originally from Speed Dating Experiment Dataset hosted on Kaggle.

forked from curran's block: Horizontal Bar Chart

forked from dennisjunior111's block: Speed Dating - Match Percentage by Field

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Speed Dating Match Percentage by Academic Field</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #babfba;
      }
      .tick text {
        fill: #8E8883;
        font-size: 14pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 32pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

//const xValue = d => d.netUsers;
      const xValue = d => d.percentMatched;
      const xLabel = 'Match Percentage of Total Dates';
      //const yValue = d => d.country;
      const yValue = d => d.field;
      const yLabel = 'Academic Field of Study';
      const margin = { left: 150, right: 30, top: 5, bottom: 75 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 55)
          .text(xLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleBand()
        .paddingInner(0.2)
        .paddingOuter(0);

const xTicks = 10;
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(xTicks)
        .tickPadding(5)
        .tickFormat(d3.format('.2p'))
        .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(5)
        .tickSize(-innerWidth);

const row = d => {
        return {
          //country: d['Country or Region'],
          field: d['field'],
          //netUsers: +netUsersWithCommas.replace(/,/g, '')
          percentMatched: d['percent matched']
        };
      };

d3.csv('speed_dating_field_match.csv', row, data => {
        yScale
          .domain(data.map(yValue).reverse())
          .range([innerHeight, 0]);
        xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);

g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', 0)
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => console.log(d))
            .attr('height', d => yScale.bandwidth())
            .attr('fill', 'steelblue');

xAxisG.call(xAxis);

yAxisG.call(yAxis);
        yAxisG.selectAll('.tick line').remove();
      });
    </script>
  </body>
</html>

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