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"
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.