Public
Edited
Aug 1, 2024
2 forks
Importers
1 star
aggregatedTreeChart = {
const treeValueChart = TreeMultiValue(taxonomiesAggregated, {
categories: Object.keys(taxonomies),
values: Object.keys(taxonomies).map((a) => (d) => d[a]),
label: (d) => d.title,
height: 700,
width: 800,
marginRight: 200,
marginLeft: 140,
minHeightForLabel: 5,
padding: 3,
normalizeBars: true,
fontSizeRange: [5, 18],
color: d3.schemeCategory10,
stroke: "#aaaa",
fillOpacity: 0.7
});
return treeValueChart;
}
{
const treeValueChart = TreeValue(treeValueTaxonomyTOTFewShot, {
label: (d) => d.title,
value: (d) => d.value,
minHeightForLabel: -1,
marginLeft: 200,
height: 600,
width: 700,
// sort: (a, b) => d3.descending(a.value, b.value),
color: (d) => colorScale(d.data.title),
fontSizeRange: [1, 20]
});
// d3.select(treeValueChart).selectAll("tspan").style("font-size", 14);
return treeValueChart;
}
{
const treeValueChart = TreeValue(treeValueTaxonomyTOTFewShot, {
label: (d) => d.title,
value: (d) => d.value,
minHeightForLabel: -1,
marginLeft: 200,
height: 600,
width: 700,
color: (d) => colorScale(d.data.title),
fontSizeRange: [1, 20]
});
// d3.select(treeValueChart).selectAll("tspan").style("font-size", 14);
return treeValueChart;
}
{
const treeValueChart = TreeValue(treeValueTaxonomyFewShotCOT, {
label: (d) => d.title,
value: (d) => d.value,
minHeightForLabel: -1,
marginLeft: 200,
height: 600,
width: 700,
color: (d) => colorScale(d.data.title),
fontSizeRange: [1, 20]
});
// d3.select(treeValueChart).selectAll("tspan").style("font-size", 14);
return treeValueChart;
}
{
const treeValueChart = TreeValue(treeValueTaxonomyZeroShot, {
label: (d) => d.title,
value: (d) => d.value,
minHeightForLabel: -1,
marginLeft: 200,
height: 600,
width: 700,
color: (d) => colorScale(d.data.title),
fontSizeRange: [1, 20]
});
// d3.select(treeValueChart).selectAll("tspan").style("font-size", 14);
return treeValueChart;
}
colorScale.domain()
colorScale = d3.scaleOrdinal(d3.quantize(d3.interpolateSpectral, 30))
treeValueTaxonomyTOTFewShot = ({
title: "FEWSHOT TOT",
children: transformMap(taxonomyIncidentsFewShotTOT, false)
})
treeValueTaxonomyFewShotCOT = ({
title: "LLM Fewshot COT Classification",
children: transformMap(taxonomyIncidentsFewShotCOT, false)
})
treeValueTaxonomyZeroShot = ({
title: "ZEROSHOT",
children: transformMap(taxonomyIncidentsZeroShot, false)
})
taxonomyIncidentsFewShotTOT = capitalizeTitles(taxonomyIncidents(taxonomyTOTFewShot, ToTFewShotsProcess))
taxonomyIncidentsFewShotCOT = capitalizeTitles(taxonomyIncidents(taxonomyFewShotCOT,fewShotCOTProcess))
taxonomyIncidentsZeroShot = capitalizeTitles(taxonomyIncidents(taxonomyZeroShot, zeroshotProcess))
function taxonomyIncidents(taxonomy,array) {
for (let [classKey, lev1] of taxonomy) {
console.log(classKey, 'classKey')
console.log(lev1, 'lev1')
const incidents = array.filter(d => d['Classes of irresponsible AI use'] !== undefined && d['Classes of irresponsible AI use'].includes(classKey))
console.log(incidents, "incidents")
if (lev1.size > 0){
for (let [subclassKey, lev2] of lev1) {
const incidentsSubClass = array.filter(d=> d.Subclasses !== undefined && d.Subclasses.includes(subclassKey));
if (lev2.size > 0){
for (let[subsubclassKey,lev3] of lev2){
const incidentsSubSubClass = incidentsSubClass.filter(d=>d['Sub-subclass'].includes(subsubclassKey))
lev2.set(subsubclassKey,incidentsSubSubClass)
}
} else{
lev1.set(subclassKey,incidentsSubClass)
}
}
} else {
taxonomy.set(classKey,incidents)
}
}
return taxonomy;
}
taxonomyTOTFewShot = taxonomyData(ToTFewShotsArray)
taxonomyFewShotCOT = taxonomyData(fewShotCOTArray)
taxonomyZeroShot = taxonomyData(zeroShotArray)
function taxonomyData(items) {
console.log("here");
const hierarchy = new Map();
items.forEach((item) => {
const classes = item
? Array.isArray(item["Classes of irresponsible AI use"])
? item["Classes of irresponsible AI use"]
: [item["Classes of irresponsible AI use"]]
: [];
classes.forEach((classKey) => {
// Initialize a Map for this classKey if it doesn't exist
if (!hierarchy.has(classKey)) {
hierarchy.set(classKey, new Map());
}
const classMap = hierarchy.get(classKey);
// Process subclasses if this classKey is a key in the subclass object
if (item["Subclasses"] && item["Subclasses"][classKey]) {
const subclassArray = item["Subclasses"][classKey];
subclassArray.forEach((subclassItem) => {
// Initialize a Map for this subclassItem under classKey
if (!classMap.has(subclassItem)) {
classMap.set(subclassItem, new Map());
}
const subclassMap = classMap.get(subclassItem);
// Process sub-subclasses based on the type
if (item["Sub-subclass"] && item["Sub-subclass"][subclassItem]) {
const subsubclassArray = item["Sub-subclass"][subclassItem];
subsubclassArray.forEach((subsubclassItem) => {
// Initialize an array for this subsubclassItem under subclassItem if it doesn't exist
if (!subclassMap.has(subsubclassItem)) {
subclassMap.set(subsubclassItem, []);
}
});
}
});
}
});
});
return hierarchy;
}
ToTFewShotsProcess = processArray(ToTFewShotsArray)
fewShotCOTProcess = processArray(fewShotCOTArray)
zeroshotProcess = processArray(zeroShotArray)
function processArray(array)
{
const arrayCopy = JSON.parse(JSON.stringify(array.filter(item => item !== undefined)));
arrayCopy.forEach(item => {
/*if (item && item['Classes of irresponsible AI use']) {
item['Classes of irresponsible AI use'] = item['Classes of irresponsible AI use'].map(element => element.toLowerCase());
}*/
if (item && item.Subclasses) {
const subclassesObj = item.Subclasses;
const subclassesArray = Object.values(subclassesObj).reduce((acc, current) => {
if (current !== null) {
acc = acc.concat(current);
}
return acc;
}, []);
item.Subclasses = subclassesArray;
}
if (item && item['Sub-subclass']) {
const subsubclassesObj = item['Sub-subclass'];
const subsubclassesArray = Object.values(subsubclassesObj).reduce((acc, current) => {
if (current !== null) {
acc = acc.concat(current);
}
return acc;
}, []);
item['Sub-subclass'] = subsubclassesArray;
}
});
return arrayCopy
}
// Now, zeroShotArrayCopy contains the modified data, and zeroShotArray remains unchanged.
// import {transformMap} from "85bb233e99862153"
function transformMap(
map,
addArticlesAsLeafs = true,
attributeName = "incidents",
valueName = "value"
) {
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, attributeName, valueName)
});
} 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, [attributeName]: value });
} else {
result.push({
title: key,
[addArticlesAsLeafs ? "children" : attributeName]: value,
[valueName]: value.length
});
}
}
});
return result;
}
taxonomies = ({
"Zero Shot": taxonomyIncidentsZeroShot,
"Few Shot ToT": taxonomyIncidentsFewShotTOT,
"Few Shot CoT ": taxonomyIncidentsFewShotCOT,
"Manual Classification": taxonomyManualAsMap
})
style = htl.html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<style>
svg text {
font-family: "Roboto Condensed", sans-serif;
font-weight: 500;
font-optical-sizing: auto;
}
</style>`
// To convert the manual classification that comes in JSON
function treeToMap(tree, parentTitle = null) {
const res = new Map();
if (!tree.children ) {
// only return incidents to match the format
return tree.incidents;
}
for (let c of tree.children) {
if (c.title){
// avoid duplicated title from parent node
if (c.title !== parentTitle){
res.set(capitalizeFirstLetter(c.title), treeToMap(c));
}
else {
res.set(c.title, treeToMap(c));
}
}
else{
continue;
}
}
if (tree.title && tree.title !== parentTitle) {
const childTitle = capitalizeFirstLetter(tree.title);
res.set(childTitle, new Map());
}
return res;
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
taxonomyManualAsMap = treeToMap(manualClassification)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function capitalizeTitles(map) {
const capitalizedMap = new Map();
map.forEach((value, key) => {
// Capitalize the main key
const capitalizedKey = capitalizeFirstWordOnly(key);
if (value instanceof Map) {
// Recursively capitalize nested Maps
capitalizedMap.set(capitalizedKey, capitalizeTitles(value));
} else if (Array.isArray(value)) {
// Process an array of objects
capitalizedMap.set(capitalizedKey, value.map(item => {
if (item && typeof item === 'object' && item.title) {
// Only capitalize if the item is an object and has a title
return {...item, title: capitalizeFirstWordOnly(item.title)};
}
return item; // Return the item unchanged if no title is found
}));
} else {
// If it's an object and has a title, capitalize it
if (value && typeof value === 'object' && value.title) {
capitalizedMap.set(capitalizedKey, {...value, title: capitalizeFirstWordOnly(value.title)});
} else {
// Just set the value if it's not an object or doesn't have a title
capitalizedMap.set(capitalizedKey, value);
}
}
});
return capitalizedMap;
}
manualClassification = treeValueTaxonomy
taxonomiesAggregated = aggregateTaxonomies()
import {TreeValue} from "@john-guerra/tree-value"
import {TreeMultiValue} from "@john-guerra/tree-multivalue"
import {treeValueTaxonomy} from "@irresponsible-ai/irresponsible-ai-atlas-curation"
import {ToTFewShotsArray} from "c644b6c2996288e7"
import {fewShotCOTArray} from "c644b6c2996288e7"
import {zeroShotArray} from "c644b6c2996288e7"
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.
