AHRC_INTERACTIVE/mitigating_bias.html at main · gradientinstitute/AHRC_INTERACTIVE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
  <!-- Copyright (C) 2020 Australian Human Rights Commission. All Rights Reserved. -->
  <div style="margin: auto; max-width: 1000px; min-width:100px" id="gradient_gap_demo">
    <svg width="100%" height="59%" version="1.1" viewBox="-1 0 263 155" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <marker id="ArrowHead" overflow="visible" orient="auto">
      <path transform="matrix(.4 0 0 .4 4 0)" d="m0 0 5-5-18 5 18 5z" fill="#4c4b4d" fill-rule="evenodd" stroke="#4c4b4d" stroke-width="1pt"/>
      </marker>
    </defs>
    <title id="giTitle">Infographic: Mitigating Bias.</title>
    <desc id="giDesc">
      Actions can be taken to reduce unfairness in the system.
      However, there are associated considerations that need to be taken into account.
      Gathering more appropriate data would directly address the source of the problem in this scenario,
      but privacy and measurement constraints may make this too impractical.
      We might alternatively try to improve the model on the data we already have,
      by either adjusting the selection criteria for the disadvantaged group, or
      incorporating fairness measures into the AI system's objectives.
      However, these approaches could reduce the system's accuracy and/or
      increase the number of false positives in the disadvantaged group.
    </desc>


    <g transform="translate(63 33)">

    <g id="pointers" opacity="0">
        <path d="m35 82v-21" fill="none" marker-start="url(#ArrowHead)" stroke="#4c4b4d" stroke-width="1.3"/>
        <path d="m103 82v-21" fill="none" marker-start="url(#ArrowHead)" stroke="#4c4b4d" stroke-width="1.3"/>
        <path d="m168 82v-21" fill="none" marker-start="url(#ArrowHead)" stroke="#4c4b4d" stroke-width="1.3"/>
        <path d="m125 83 19-26" fill="none" marker-start="url(#ArrowHead)" stroke="#4c4b4d" stroke-width="1.3"/>
        <path d="m144 82-18-27" fill="none" marker-start="url(#ArrowHead)" stroke="#4c4b4d" stroke-width="1.3"/>
      </g>

      <g id="mitigations" transform="translate(300,0)">

        <rect x="6" y="22" width="60" height="38" ry="12" fill="#1ac1ac" stroke="#1ac1ac" stroke-width="1.1"/>
        <rect x="72" y="22" width="60" height="38" ry="12" fill="#1ac1ac" stroke="#1ac1ac" stroke-width="1.1"/>
        <rect x="138" y="22" width="60" height="38" ry="12" fill="#1ac1ac" stroke="#1ac1ac" stroke-width="1.1"/>
        <text style="user-select:none;pointer-events:none;" transform="translate(-6.4 3.7)" fill="#000" font-family="sans-serif" font-size="4.9px" font-weight="bold" text-anchor="middle">
          <tspan x="45" y="35.5">Gather more </tspan>
          <tspan x="45" y="42">appropriate data</tspan>
        </text>
        <text style="user-select:none;pointer-events:none;" transform="translate(58 -.99)" fill="#000" font-family="sans-serif" font-size="4.9px" font-weight="bold" text-anchor="middle">
          <tspan x="45" y="35.5">Adjust the selection</tspan>
          <tspan x="45" y="42">criteria for the</tspan>
          <tspan x="45" y="48">disadvantaged</tspan>
          <tspan x="45" y="54">group</tspan>
        </text>
        <text style="user-select:none;pointer-events:none;" transform="translate(124 -1.6)" x="74.513618" fill="#000" font-weight="bold" text-anchor="middle" font-family="sans-serif" font-size="4.9px">
          <tspan x="45" y="35.5">Train the AI system</tspan>
          <tspan x="45" y="42">to incorporate</tspan>
          <tspan x="45" y="48">fairness into it</tspan>
          <tspan x="45" y="54">decisions</tspan>
        </text>
      </g>


      <g id="considerations" transform="translate(300,0)">
        <rect x="5.7" y="83" width="60" height="38" ry="12" fill="#4c4b4d" stroke-width="1.1"/>
        <rect x="72" y="83" width="60" height="38" ry="12" fill="#4c4b4d" stroke-width="1.1"/>
        <rect x="138" y="83" width="60" height="38" ry="12" fill="#4c4b4d" stroke-width="1.1"/>
        <text style="user-select:none;pointer-events:none;" transform="translate(-8.2 64)" fill="#fff" font-family="sans-serif" font-size="4.9px" text-anchor="middle" font-weight="bold">
          <tspan x="45" y="35.5">Violation of privacy</tspan>
          <tspan x="45" y="42">&amp;</tspan>
          <tspan x="45" y="48">possibly impractical.</tspan>
        </text>
        <text style="user-select:none;pointer-events:none;" transform="translate(58 61)" fill="#fff" font-family="sans-serif" font-size="4.9px" font-weight="bold" text-anchor="middle">
          <tspan x="45" y="42">Reduce the</tspan>
          <tspan x="45" y="48">system's accuracy.</tspan>
          <!-- <tspan x="45" y="35.5">Adjust the selection</tspan> -->
          <!-- <tspan x="45" y="42">criteria for the</tspan> -->
          <!-- <tspan x="45" y="48">disadvantaged</tspan> -->
          <!-- <tspan x="45" y="54">group</tspan> -->
        </text>
        <text style="user-select:none;pointer-events:none;" transform="translate(124 60)" fill="#fff" font-family="sans-serif" font-size="4.9px" font-weight="bold" text-anchor="middle">
          <tspan x="45" y="35.5">Increase the number</tspan>
          <tspan x="45" y="42">of false positives in</tspan>
          <tspan x="45" y="48">the disadvantaged</tspan>
          <tspan x="45" y="54">group.</tspan>
        </text>
      </g>
      <text style="user-select:none;pointer-events:none;" transform="translate(-95 -188)" fill="#000" font-family="sans-serif" font-size="14px" x="32" y="167">Mitigating Bias</text>
      <text style="user-select:none;pointer-events:none;" transform="translate(-95 -118)" fill="#000" font-family="sans-serif" font-size="8.5px"><tspan x="32" y="161">Mitigation</tspan></text>
      <text style="user-select:none;pointer-events:none;" transform="translate(-95 -56)" fill="#000" font-family="sans-serif" font-size="8.5px"><tspan x="32" y="161">Considerations</tspan></text>
      <text style="user-select:none;pointer-events:none;" transform="translate(-94 -161)" fill="#000" font-family="sans-serif" font-size="7.8px">
        <tspan x="32" y="161">Actions can be taken to reduce unfairness in the system. However, </tspan>
        <tspan x="32" y="170"> there are considerations that need to be taken into account.</tspan>
      </text>

    </g>
    </svg>

    <script>
      // a little touch of animation
      function scrollin(ident, t0, callback) {
          var timer=null, step=0, t=0;
          var item = document.getElementById(ident);
          t = t0;
          step = 0.05;

          function anim() {
              t += step;
              if (t > 1.) {
                  t = 1.;
                  clearInterval(timer);
                  timer = null;
              }
              if (t >= 0)
                  callback(item, t);
          }
          timer = setInterval(anim, 10);
      }

      scrollin("mitigations", -1, function (item, t) {
          item.setAttribute("transform", "translate(" + (1. - t) * 200 + " 0)");
      });

      scrollin("considerations", -2, function (item, t) {
          item.setAttribute("transform", "translate(" + (1. - t) * 200 + " 0)");
      });

      scrollin("pointers", -4, function (item, t) {
          item.setAttribute("transform", "translate(0 " + (t - 1.) * 25 + ")");
          item.setAttribute("opacity", t);
      });


    </script>

  </div>
</html>