vl.markLine()
.encode(
vl.x()
)
{
const treeValueChart = TreeValue(treeValueTaxonomy, {
label: (d) => d.title,
value: (d) => d.value,
minHeightForLabel: 1,
marginLeft: 200,
height:700,
width: 700
});
d3.select(treeValueChart).selectAll("tspan").style("font-size", 14);
return treeValueChart;
}
treeValueTaxonomy = ({
title: "Human Classification",
children: transformMap(taxonomy, false)
})
spaceTreeTaxonomy = {
const structure = {
title: "Human Classification",
children: transformMap(taxonomy)
};
return structure;
}
function transformMap(map, addArticlesAsLeafs = true) {
const result = [];
map.forEach((value, key) => {
if (value instanceof Map) {
// Recursive case: the value is another Map, transform it.
result.push({ title: key, children: transformMap(value, addArticlesAsLeafs) });
} else if (Array.isArray(value)) {
// Base case: the value is an Array, check if it's a leaf node.
if (value.length === 0 || !(value[0] instanceof Object)) {
result.push({ title: key, incidents: value });
} else {
result.push({
title: key,
[addArticlesAsLeafs ? "children" : "incidents"]: value,
value: value.length
});
}
}
});
return result;
}
{
const treeSvg = Tree(taxonomy2, {
label: (d) => {
return d[0];
},
width: 800,
fontSize: 10
});
return htl.html`<h2>Irresponsible AI Taxonomy</h2>
<div>${treeSvg}</div>`;
}
navio(df.objects(), {height: 500, attribWidth: 16})
selectedSources
data = df.objects()
taxonomy2 = {
const taxonomy = d3.group(
taxonomyData.filter((d) => d.Class),
(d) => d.Class,
(d) => d.Subclass,
(d) => d.SubSubClass
);
for (let [classKey, lev1] of taxonomy) {
//const incidents = data.filter(d=> d.class === classKey)
for (let [subclassKey, lev2] of lev1) {
if (subclassKey !== "") {
//const incidentsSubClass = data.filter(d=> d.subclass === subclassKey);
for (let [subsubclassKey, lev3] of lev2) {
if (subsubclassKey !== "") {
//const incidentsSubSubClass = data.filter(d=> d.subsubclass === subsubclassKey)
lev2.set(subsubclassKey, null);
} else {
lev1.set(subclassKey, null);
}
}
} else {
taxonomy.set(classKey, null);
}
}
}
return taxonomy;
}
// Used for extracting the name, url and description from the awful-ai entry
// dataProcessed = data.map((d) => {
// const split0 = d["awful-ai md"].split(" - ");
// const split1 = split0[0].split("](");
// d.name = split1[0].slice(1).trim();
// d.url = split1[1].slice(0, split1[1].length - 1).trim();
// d.description = split0[1];
// return d;
// })
defaultColorBy = "country"
defaultGroupBy = "country"
// defaultRadius = 3
defaultLayout = "map"
defaultDrawLayout = true
style
taxonomyData = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vRVpImj8iuMFkJdHBM3G7pTWDrcLRsuy6zcQcsubxPmYR8MWm2GKdB-ammAngqz7f1pRZFadurCnigu/pub?gid=41580004&single=true&output=csv")
taxonomy3 = {
const taxonomy = d3.group(
taxonomyData.filter(d => d.Class),
d => d.Class,
d => d.Subclass,
d => d.SubSubClass
);
return taxonomy}
taxonomy = {
const taxonomy = d3.group(
taxonomyData.filter(d => d.Class),
d => d.Class,
d => d.Subclass,
d => d.SubSubClass
);
for (let [classKey, lev1] of taxonomy) {
const incidents = data.filter(d => d.class.split(',').includes(classKey))
for (let [subclassKey, lev2] of lev1) {
if (subclassKey !== ""){
//console.log(subclassKey)
const incidentsSubClass = data.filter(d=> {
// Ensure d.subclass is not null or undefined before splitting
const subclassArray = (d.subclass || '').split(',');
//console.log(subclassArray); // Print the result of splitting
return subclassArray.includes(subclassKey);
});
for (let[subsubclassKey,lev3] of lev2){
if (subsubclassKey !== ""){
const incidentsSubSubClass = incidentsSubClass.filter(d=> (d.subsubclass || '').split(',').includes(subsubclassKey))
lev2.set(subsubclassKey,incidentsSubSubClass)
}
else{
lev1.set(subclassKey,incidentsSubClass)
}
}
}
else{
taxonomy.set(classKey,incidents)
}
}
}
return taxonomy;
}
/*taxonomy = {
const taxonomy = d3.group(
taxonomyData.filter((d) => d.Class),
(d) => d.Class,
(d) => d.Subclass,
(d) => d.SubSubClass
);
for (let [classKey, lev1] of taxonomy) {
const incidents = data.filter((d) => d.class === classKey);
for (let [subclassKey, lev2] of lev1) {
if (subclassKey !== "") {
const incidentsSubClass = data.filter(
(d) => d.subclass === subclassKey
);
for (let [subsubclassKey, lev3] of lev2) {
if (subsubclassKey !== "") {
const incidentsSubSubClass = data.filter(
(d) => d.subsubclass === subsubclassKey
);
lev2.set(subsubclassKey, incidentsSubSubClass);
} else {
lev1.set(subclassKey, incidentsSubClass);
}
}
} else {
taxonomy.set(classKey, incidents);
}
}
}
return taxonomy;
}*/
taxonomyTree = d3.hierarchy(taxonomy)
taxonomyTree.descendants()
// Old data Dec 2023
//url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRVpImj8iuMFkJdHBM3G7pTWDrcLRsuy6zcQcsubxPmYR8MWm2GKdB-ammAngqz7f1pRZFadurCnigu/pub?gid=0&single=true&output=csv"
// Data Mar 2024
//url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRVpImj8iuMFkJdHBM3G7pTWDrcLRsuy6zcQcsubxPmYR8MWm2GKdB-ammAngqz7f1pRZFadurCnigu/pub?gid=381576458&single=true&output=csv"
// Data poster
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRVpImj8iuMFkJdHBM3G7pTWDrcLRsuy6zcQcsubxPmYR8MWm2GKdB-ammAngqz7f1pRZFadurCnigu/pub?gid=331525361&single=true&output=csv"
rawdata = d3.csv(url, d3.autoType)
d3 = require("d3@7")
import {zeroShotArray} from "74142c703b722445"
import { panel, style } with {
data,
defaultColorBy,
defaultGroupBy,
// defaultRadius,
defaultLayout,
defaultDrawLayout,
myheight
} from "a578473b724795d5"
myheight = 400
// mywidth = 600
import { aq, op } from "@uwdata/arquero"
import { navio } from "@john-guerra/navio"
import {Tree} from "@john-guerra/tidy-tree-component"
import {TreeValue} from "@john-guerra/tree-value"
import {SpaceTree} from "@john-guerra/spacetree"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
