human-computer interaction x responsible artificial intelligence
Public
Edited
Mar 19, 2023
toc()
md`
Q: Can you give me an example of why this would be useful?
A: Yes! Imagine you want to use data leverage against LargeCo. You have a limited budget (of money, your time, etc.), so need to decide if you want to focus on helping people join a data strike or engage in CDC. If you can find a rough estimate for the scaling laws of the tech you hope to impact, you can use the power laws to reason about how much a data strike might hurt LargeCo and how much CDC will help SmallCo. If the system has a large scaling coefficient (${tex `\alpha`}), CDC may be extra valuable. Conversely, if the system has a a small scaling coefficient, data strikes may be extra effective. The exact best choice will come down to the specific costs required to get participants. Even relying on rough estimates of the scaling coefficient, the number of people involved, the costs involved, etc., we hypothesize that this approach for thinking about data leverage effectiveness can still be a useful tool.
`
viewof rightLabel = Text({value: 'Loss'});
configs
md`
## Tabular Summary of Power Laws in Prior Work (WIP)
`
viewof RW = Table(priorWork)
configs = priorWork.reduce(function(map, obj) {
map[obj.Paper + obj.Task] = {
alpha: obj.alpha, D_min: obj.D_min, D_max: obj.D_max, L_0: obj.L_0, loss: obj.loss, SPP: obj.SPP
}
return map;
}, {});
function transform(x) {
if (x > 0.85){
return 1 + x
} else{
return 0.5 + x
}
}
function helper(d){
return {size: d.size, value: transform(d.value)}
}
utilityData = data.map(helper)
utilities = utilityData.map(d => d.value)
{
// Create an empty SVG with specified width and height.
const svg2 = d3.select(DOM.svg(width, height));
//create background
svg2.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("class", "svgBackground");
// Draw the x and y axes.
svg2.append('g').call(xAxis)
svg2.append('g').call(utilityAxis);
svg2.append('path')
.datum(utilityData)
.attr('d', utilityLine);
return svg2.node();
}
md`
We'll use 1000 fractional sizes from 0.001 to 1.000 with step size 0.001.
`
fracs = [...Array(999).keys()].map(x => (x+1)/1000)
mode = Object({
true: 'strike',
false: 'cdc'
})[invert]
sizes = fracs.map(x => x * maxObs);
calcLoss = D => C * (D ** -k) + bayesError
losses = Object({
strike: sizes.map(x=> calcLoss(maxObs-x)),
cdc: sizes.map(calcLoss)
})[mode]
minLoss = Math.min(...losses)
maxLoss = Math.max(...losses)
lossRange = maxLoss - minLoss
dlpFunction = Object({
strike: loss => (loss - minLoss) / (maxLoss - minLoss),
cdc: loss => (loss - maxLoss) / (minLoss - maxLoss)
})
scaleLoss = dlpFunction[mode]
scaledLosses = losses.map(scaleLoss)
scaledSizes = sizes.map(x=>x/ Math.max(...sizes))
function formatData (x, i) {
return {size: x, value: scaledLosses[i]}
}
data = scaledSizes.map(formatData)
percent = i * 100
chosenFrac = percent / 100
curScore = Object({
strike: scaleLoss(calcLoss((1-chosenFrac) * maxObs)),
cdc: scaleLoss(calcLoss(chosenFrac * maxObs))
})[mode]
complementScore = 1 - curScore;
curUsers = (chosenFrac * maxUsers).toFixed(0);
md`
### Figure 1 Annotations
`
leftAnnotation = Object({ //for cdc, left annotation is cdc
cdc: `CDC by ${percent.toFixed(0)}% (${curUsers} people) brings performance from 0 to ${(curScore).toFixed(2)}`,
strike: `Data strike by ${(percent).toFixed(0)}% (${curUsers} people) decreases perfomance by ${(curScore).toFixed(2)} to ${(complementScore).toFixed(2)}`,
})[mode]
rightAnnotation = Object({ // for strike, right annotation is cdc
strike: `CDC by ${100-percent.toFixed(0)}%(${maxUsers - curUsers} people) brings performance from 0 to ${(complementScore).toFixed(2)}`,
cdc: `Data strike by ${(100 - percent).toFixed(0)}% (${maxUsers - curUsers} people) decreases perfomance by ${(complementScore).toFixed(2)} to ${(curScore).toFixed(2)}`,
})[mode]
niceStr = Object({
cdc: 'Contribution',
strike: 'Strike',
})[mode]
function flip() {
set(viewof i, 1 - i)
set(viewof invert, !invert)
}
viewof invert = Toggle({label: "Show Strike Perspective", value:false})
md`
### Figure 1 Crosshairs
`
height = 500
md`
### Misc Code: Defining d3 scale and d3 axis elements
`
forLossScale = Object({
strike: [d3.min(losses), d3.max(losses)],
cdc: [d3.max(losses), d3.min(losses)]
})[mode]
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => xScale(d.size))
.y(d => yScale(d.value))
utilityLine = d3.line()
.defined(d => !isNaN(d.value))
.x(d => xScale(d.size))
.y(d => utilityScale(d.value))
md`
## Import Statements
`
import {Button, Checkbox, Toggle, Range, Select, Table, Text, html} from "@observablehq/inputs"
import {Scrubber} from "@mbostock/scrubber"
html`
<style>
path {
fill: none;
stroke: steelblue;
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
button {
background-color: #4B0082;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
input[type=range] {
font-size: 16px;
}
.svgBackground {fill: #fffbeb;}
.annotateBackground {background: brown;}
</style>`
d3 = require("d3@6")
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input"));
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.