examples/mcv03_interaction.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Student's First Multiple Coordinated View</title>
    <meta name="description" content="Student's First Multiple Coordinated View" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="../web_modules/d3/dist/d3.js"></script>
    <link href="./mvc.css" rel="stylesheet" />
    <style>
      rect {
        fill: steelblue;
        fill-opacity: 0.8;
      }

      rect:hover {
        fill-opacity: 1;
      }

      path {
        fill-opacity: 0.8;
      }

      .selected,
      path:hover {
        fill-opacity: 1;
      }

      .axis {
        font-size: smaller;
      }

      main {
        display: flex;
        flex-wrap: wrap;
      }

      h3 {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>Student's First Multiple Coordinated View</h1>

    <div>
      <label for="passenger-class"><strong>Passenger Class:</strong></label>
      <select id="passenger-class">
        <option value="" selected>All Classes</option>
        <option value="1">First Class</option>
        <option value="2">2nd Class</option>
        <option value="3">3rd Class</option>
      </select>
      <!--TODO add label for the currently selected sex-->
    </div>

    <main>
      <section>
        <h3>Gender Distribution</h3>
        <svg id="sex"></svg>
      </section>
      <section>
        <h3>Age Histogram</h3>
        <svg id="age"></svg>
      </section>
    </main>

    <script>
      const state = {
        data: [],
        passengerClass: "",
        // TODO store selected sex
      };

      function createHistogram(svgSelector) {
        const margin = {
          top: 40,
          bottom: 10,
          left: 120,
          right: 20,
        };
        const width = 600 - margin.left - margin.right;
        const height = 400 - margin.top - margin.bottom;

        // Creates sources <svg> element
        const svg = d3
          .select(svgSelector)
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

        // Group used to enforce margin
        const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);

        // Scales setup
        const xscale = d3.scaleLinear().range([0, width]);
        const yscale = d3.scaleLinear().range([0, height]);

        // Axis setup
        const xaxis = d3.axisTop().scale(xscale);
        const g_xaxis = g.append("g").attr("class", "x axis");
        const yaxis = d3.axisLeft().scale(yscale);
        const g_yaxis = g.append("g").attr("class", "y axis");

        function update(new_data) {
          //: (IPerson[] & {x0: number, x1: number})[]
          //update the scales
          xscale.domain([0, d3.max(new_data, (d) => d.length)]);
          yscale.domain([new_data[0].x0, new_data[new_data.length - 1].x1]);
          //render the axis
          g_xaxis.transition().call(xaxis);
          g_yaxis.transition().call(yaxis);

          // Render the chart with new data

          // DATA JOIN
          const rect = g
            .selectAll("rect")
            .data(new_data)
            .join(
              (enter) => {
                // ENTER
                // new elements
                const rect_enter = enter
                  .append("rect")
                  .attr("x", 0) //set intelligent default values for animation
                  .attr("y", 0)
                  .attr("width", 0)
                  .attr("height", 0);
                rect_enter.append("title");
                return rect_enter;
              },
              // UPDATE
              // update existing elements
              (update) => update,
              // EXIT
              // elements that aren't associated with data
              (exit) => exit.remove()
            );

          // ENTER + UPDATE
          // both old and new elements
          rect
            .transition()
            .attr("height", (d) => yscale(d.x1) - yscale(d.x0) - 2)
            .attr("width", (d) => xscale(d.length))
            .attr("y", (d) => yscale(d.x0) + 1);

          rect.select("title").text((d) => `${d.x0}: ${d.length}`);
        }

        return update;
      }

      function createPieChart(svgSelector) {
        const margin = 10;
        const radius = 100;

        // Creates sources <svg> element
        const svg = d3
          .select(svgSelector)
          .attr("width", radius * 2 + margin * 2)
          .attr("height", radius * 2 + margin * 2);

        // Group used to enforce margin
        const g = svg.append("g").attr("transform", `translate(${radius + margin},${radius + margin})`);

        const pie = d3
          .pie()
          .value((d) => d.values.length)
          .sortValues(null)
          .sort(null);
        const arc = d3.arc().outerRadius(radius).innerRadius(0);
        const cscale = d3.scaleOrdinal(d3.schemeSet3);

        function update(new_data) {
          //{key: string, values: IPerson[]}[]
          const pied = pie(new_data);
          // Render the chart with new data

          cscale.domain(new_data.map((d) => d.key));

          // DATA JOIN
          const path = g
            .selectAll("path")
            .data(pied, (d) => d.data.key)
            .join(
              // ENTER
              // new elements
              (enter) => {
                const path_enter = enter.append("path");
                // TODO register click handler to change selected sex in state and call updateApp()
                path_enter.append("title");
                return path_enter;
              }
            );

          // ENTER + UPDATE
          // both old and new elements
          path
            .attr("d", arc) // TODO set the CSS class `selected` if the current data item is the selected sex in the state
            .style("fill", (d) => cscale(d.data.key));

          path.select("title").text((d) => `${d.data.key}: ${d.data.values.length}`);
        }

        return update;
      }

      /////////////////////////

      const ageHistogram = createHistogram("#age");
      const sexPieChart = createPieChart("#sex");

      function filterData() {
        return state.data.filter((d) => {
          if (state.passengerClass && d.pclass !== state.passengerClass) {
            return false;
          }
          // TODO apply additional selected sex filter
          return true;
        });
      }

      function wrangleData(filtered) {
        const ageHistogram = d3
          .bin()
          .domain([0, 100])
          .thresholds(10)
          .value((d) => d.age);

        const ageHistogramData = ageHistogram(filtered);

        // always the two categories
        const sexPieData = ["female", "male"].map((key) => ({
          key,
          values: filtered.filter((d) => d.sex === key),
        }));

        return { ageHistogramData, sexPieData };
      }

      function updateApp() {
        const filtered = filterData();

        const { ageHistogramData, sexPieData } = wrangleData(filtered);
        ageHistogram(ageHistogramData);
        sexPieChart(sexPieData);

        // TODO update label with selected sex information
      }

      d3.csv("titanic3.csv").then((parsed) => {
        state.data = parsed.map((row) => {
          row.age = parseInt(row.age, 10);
          row.fare = parseFloat(row.fare);
          return row;
        });

        updateApp();
      });

      //interactivity
      d3.select("#passenger-class").on("change", function () {
        const selected = d3.select(this).property("value");
        state.passengerClass = selected;
        updateApp();
      });
    </script>
  </body>
</html>