2c:null 2d:["$","title",null,{"children":"Zoomable Timeline of the AI Incident Database (v1.0) | LKchemposer | Observable"}] 32:T1d50,chart = { var data = sortedData(sortBy); data.forEach( (d) => (d.color = d3.color(viewof colors(d[formatOption(colorBy)]))) ); var colorsDict = Object.fromEntries( data.map((d) => [d.incident_id, d.color]) ); var div = this; if (div) { // === ANIMATIONS (AFTER FIRST LOAD-IN) === // change sorting order of bars, based on sortBy d3.selectAll(".incs") .data(data, (d) => d.incident_id) .transition() .attr("transform", (_, i) => `translate(${margin.left} ${y(i)})`); // change color of incident and reports, based on colorBy d3.selectAll("rect") .transition() .attr("fill", (d) => d.color); d3.selectAll("circle") .transition() .attr("fill", (d) => colorsDict[d.incident_id]); // change opacity of bars, based on search var filter = search.map((d) => d.incident_id); d3.selectAll(".incs") .transition() .delay(250) .attr("opacity", (d) => (filter.includes(d.incident_id) ? 1 : 0.1)); } else { // === TIMELINE ON FIRST LOAD-IN === var div = document.createElement("div"); const svg = d3 .select(DOM.svg(width, height)) .style("font", "0.625em sans-serif") .style("background", "white"); div.appendChild(svg.node()); var xAxisTop = svg .append("g") .attr("transform", `translate (${margin.left} ${margin.top - 5})`); var xAxisBottom = svg .append("g") .attr( "transform", `translate (${margin.left} ${height - margin.bottom + 5})` ); var grid = svg .append("g") .attr("transform", `translate (${margin.left} ${margin.top - 5})`); var tooltip = d3.select(document.createElement("div")).call(styleTooltip); div.appendChild(tooltip.node()); var groups = svg.append("g").selectAll("g").data(data).enter(); var incidents = groups .append("g") .attr("transform", (_, i) => `translate (${margin.left} ${y(i)})`) // move bars to their y-coord .attr("class", "incs"); // "merge" incident csv and report csv data.forEach( (d) => (d.reports = reports.filter((c) => c.incident_id === d.incident_id)) ); // === DATA (INCIDENT BARS & REPORT CIRCLES) === // --- REPORT CIRCLES --- var reps = incidents .selectAll("circle") .data((d) => d.reports) .enter() .append("circle") .attr("r", radius - 1.5) .attr("cy", radius + "px") .attr("class", "reps") .style("opacity", 0.8) .attr("fill", (d) => colorsDict[d.incident_id]); // --- INCIDENT BARS --- incidents.each(function (d) { var incident = d3.select(this).style("cursor", "pointer"); // create incident bars incident .append("rect") .attr("height", y.bandwidth()) .attr("fill", d.color) .style("opacity", 0.4); // create incident text incident .append("text") .text("Incident " + d.incident_id) .attr("y", "6px") .style("text-anchor", "end") .style("dominant-baseline", "middle"); }); // === INTERACTIVITY === const mouseMove = function (event) { var [x, y] = d3.pointer(event); if (x > width * 0.5) { tooltip.style("left", "auto").style("right", width - x + 10 + "px"); } else { tooltip.style("right", "auto").style("left", x + 10 + "px"); } if (y > height * 0.5) { tooltip.style("top", "auto").style("bottom", height - y + 10 + "px"); } else { tooltip.style("bottom", "auto").style("top", y + 10 + "px"); } }; svg.on("mousemove", mouseMove); // --- INCIDENT INTERACTIONS --- const incMouseOut = function (_, d) { tooltip.style("visibility", "hidden"); d3.select(this.parentNode) .select("rect") .attr("fill", (d) => d.color); }; const incMouseOver = function (_, d) { tooltip.style("visibility", "visible").html(getIncidentTooltip(d)); // small tooltip d3.select(this.parentNode) .select("rect") .attr("fill", (d) => d.color.darker()); }; const incs = incidents.selectAll(".incs text, .incs rect"); const incOnClick = function (event, d) { tooltip.html(getFullIncidentTooltip(d)); // disable interactions svg.on("mousemove", null); incs.on("mouseout", null).on("mouseover", null); reps.on("mouseover", null).on("mouseout", null); // re-enable interations upon closing var clickedOn = d3.select(this.parentNode).select("rect"); d3.select("#close").on("click", function (event, d) { tooltip.style("visibility", "hidden"); clickedOn.attr("fill", (d) => d.color); svg.on("mousemove", mouseMove); incs.on("mouseout", incMouseOut).on("mouseover", incMouseOver); reps.on("mouseover", repMouseOver).on("mouseout", repMouseOut); }); }; // --- REPORT INTERACTIONS --- const repMouseOver = function (_, d) { tooltip.style("visibility", "visible").html(getReportTooltip(d)); }; const repMouseOut = function (_, d) { tooltip.style("visibility", "hidden"); }; const repOnClick = function (event, d) { tooltip.html(getFullReportTooltip(d)); // disable interactions svg.on("mousemove", null); incs.on("mouseout", null).on("mouseover", null); reps.on("mouseover", null).on("mouseout", null); // re-enable interations upon closing d3.select("#close").on("click", function (event, d) { tooltip.style("visibility", "hidden"); svg.on("mousemove", mouseMove); incs.on("mouseout", incMouseOut).on("mouseover", incMouseOver); reps.on("mouseover", repMouseOver).on("mouseout", repMouseOut); }); }; // --- INTERACTIONS --- incs .on("mouseout", incMouseOut) .on("mouseover", incMouseOver) .on("click", incOnClick); reps.raise(); // report circles on top of incident bars reps .on("mouseover", repMouseOver) .on("mouseout", repMouseOut) .on("click", repOnClick); // === ZOOMING IN & OUT === function update(event) { var newX = event.transform.rescaleX(x); // update axes xAxisTop.call(d3.axisTop(newX).tickSizeOuter(0)); xAxisBottom.call(d3.axisBottom(newX).tickSizeOuter(0)); // update gridlines grid.call( d3 .axisTop(newX) .tickFormat("") .tickSize(-(height - margin.top - margin.bottom + 10)) .tickSizeOuter(0) ); grid.selectAll("line").style("stroke", "gray").style("stroke-width", 0.1); // update data positions svg .selectAll(".incs rect") .attr("x", (d) => newX(d.beginning_date)) .attr("width", (d) => { var days = newX(d.ending_date) - newX(d.beginning_date); return days > 0 ? days : newX(d3.timeDay.offset(d.beginning_date, 1)) - newX(d.beginning_date); }); svg.selectAll(".incs text").attr("x", (d) => newX(d.beginning_date) - 10); svg.selectAll(".reps").attr("cx", (d) => newX(d.date_published)); } const zoom = d3 .zoom() .scaleExtent([0.75, 512]) // set limits of unzoom and zoom .extent([ [margin.left, 0], [width - margin.right, height] ]) .on("zoom", update); svg.call(zoom).transition().duration(1000).call(zoom.scaleTo, 1); } return div; }33:T8c6,getFullIncidentTooltip = (d) => { const incidentInfo = { Incident: d.incident_id, "Occurred on": formatDate(d), Location: d.location, "Incident nature": evalArr(eval(d.problem_nature)) }; const harmInfo = { "Near miss": d.near_miss, Severity: d.severity, "Lives lost": d.lives_lost, Intent: d.intent, "Harms caused": evalArr(d.harm_type), "Harms unevenly distributed by": evalArr(d.harm_distribution_basis), "Infrastructures affected": evalArr(d.infrastructure_sectors), "Laws implicated": d.laws_implicated, "Financial cost": d.financial_cost }; const systemInfo = { "System description": d.ai_system_description, "System developer": d.system_developer, // related to named entities, technology purveyor "System nature": evalArr(d.physical_system), "Level of autonomy": d.level_of_autonomy, "Intended functions": evalArr(d.relevant_ai_functions), "AI applications": evalArr(d.ai_applications), "AI techniques": d.ai_techniques, "Training data": d.data_inputs }; const deploymentInfo = { "Sector of deployment": d.sector_of_deployment, "Public deployment": d.public_sector_deployment, "Intended user expertise": d.nature_of_end_user }; const stringifyInfo = (info) => { var arr = Object.entries(info).map(([key, value]) => value ? `${key}: ${value}` : null ); return arr.filter(Boolean).join("
"); }; const tabInfo = { Harm: stringifyInfo(harmInfo), "System & Data": stringifyInfo(systemInfo), Deployment: stringifyInfo(deploymentInfo) }; const hr = '

'; const tabs = Object.entries(tabInfo) .map(([key, value]) => value.length ? hr + "

" + "

" + key + "

" + "

" + value + "

" + "

" : null ) .join(""); const link = hr + `Explore on AIID's website`; return ( stringifyInfo(incidentInfo) + hr + d.full_description + tabs + link + close ); }34:[] 30:{"id":"ad088fd97559d5b9","slug":"zoomable-timeline-of-the-ai-incident-database","title":"Zoomable Timeline of the AI Incident Database (v1.0)","thumbnail":"33ef093bba73d3d91628fc82e3ce9a3febdf71833cd734434ca6e2ac51f84f24","access_level":"public","create_time":"$D2021-11-07T05:45:34.983Z","update_time":"$D2022-07-05T12:22:47.604Z","view_time":null,"first_public_time":"$D2021-11-12T19:42:59.315Z","fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":16,"starred":false,"owner":{"type":"team","id":"c11ab0b6e45fd5f9","login":"df23e92fd6fce069","name":"LKchemposer","avatar_url":"https://avatars-next.observableusercontent.com/ee999210811f006db47e51197619ca9b54d54a60fba05b05a0d42c01f1904937","tier":"starter_2024"},"version":2853,"publish_version":2853,"role":null,"authored":false,"authors":[{"type":"individual","id":"df23e92fd6fce069","login":"df23e92fd6fce069","name":"LKchemposer","avatar_url":"https://avatars-next.observableusercontent.com/ee999210811f006db47e51197619ca9b54d54a60fba05b05a0d42c01f1904937","tier":null}],"members":[{"type":"individual","id":"df23e92fd6fce069","login":"df23e92fd6fce069","name":"LKchemposer","avatar_url":"https://avatars-next.observableusercontent.com/ee999210811f006db47e51197619ca9b54d54a60fba05b05a0d42c01f1904937","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"title":"Zoomable Timeline of the AI Incident Database (v1.0)","cells":[{"id":119,"value":"# Zoomable Timeline of the AI Incident Database (v1.0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1500,"value":"viewof search = Inputs.search(cfns, {placeholder: 'Enter a keyword', label: 'Search incidents'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1361,"value":"viewof sortBy = Inputs.select(\n [\"Time\", \"Incident ID\", \"Number of reports\"].concat(categoricalAttrs),\n {\n value: \"Time\",\n label: \"Sort incidents by\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1403,"value":"viewof colorBy = {\n return Inputs.radio(categoricalAttrs, {\n value: categoricalAttrs.includes(sortBy) ? sortBy : \"Severity\",\n label: \"Color incidents by\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"swatches({ color: viewof colors, columns: \"180px\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1624,"value":"This notebook maps out the timeline of all classified incidents on Partnership\non AI's\n[Artificial Intelligence Incident Database (AIID)](https://incidentdatabase.ai/).\nThe classifications and [taxonomies](https://incidentdatabase.ai/taxonomy/cset)\nare produced by Georgetown CSET. The\n[classified incident data](https://incidentdatabase.ai/summaries/incidents) is a\ndirect adaptation from AIID's Data Summaries page.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1292,"value":"Here are some ways that you can interact with the timeline:\n\n1. **Zoom** (via mouse wheel or touchpad) to focus on a specific time frame\n2. **Hover** on an incident (bar) to see a short description of the incident\n3. **Click** on an incident to see the full description, system developer, and\n more\n4. **Click** on an incident url to explore its reports via the AIID's website\n (in a new tab)\n5. **Hover** on a report written about the incident (circle) to see its title\n6. **Click** on a report to see more details and part of the text\n7. **Click** on a report url to read the full report/article (in a new tab)\n8. **Search** incidents of interest (e.g., try \"race\" or \"Amazon\" in the search\n bar)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1280,"value":"## Acknowledgements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1285,"value":"This timeline is heavily inspired by and adapted code from\n[World History Timeline](https://observablehq.com/@tezzutezzu/world-history-timeline)\nby [Danilo Di Cuia](https://observablehq.com/@tezzutezzu) and\n[Zoomable Bar Chart](https://observablehq.com/@d3/zoomable-bar-chart) by Mike\nBostock.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1231,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"## Scales & Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":91,"value":"x = d3\n .scaleUtc()\n .domain([\n d3.min(cfns.map((d) => d.beginning_date)),\n d3.max(cfns.map((d) => d.ending_date))\n ])\n .range([margin.left, width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"y = d3\n .scaleBand()\n .domain(d3.range(cfns.length))\n .range([height - margin.bottom, margin.top])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1726,"value":"radius = y.bandwidth() / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1270,"value":"## Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1223,"value":"styleTooltip = (div) =>\n div\n .style(\"position\", \"absolute\")\n .style(\"top\", 0)\n .style(\"font\", \"0.625em sans-serif\")\n .style(\"visibility\", \"hidden\")\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\", \"10px\")\n .style(\"box-shadow\", \"0 0 10px gray\")\n .style(\"max-width\", width * 0.4 + \"px\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"getReportTooltip = (d) => {\n const info = {\n Report: d.title,\n \"Published on\": convert(d.date_published),\n Source: d.source_domain,\n \"About incident\": d.incident_id\n };\n\n const arr = Object.entries(info).map(([key, value]) =>\n value ? `${key}: ${value}` : null\n );\n\n return arr.filter(Boolean).join(\"
\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2188,"value":"getFullReportTooltip = (d) => {\n const info = {\n Report: d.title,\n \"Written by\": evalArr(eval(d.authors)),\n \"Submitted by\": evalArr(eval(d.submitters))\n };\n\n const arr = Object.entries(info).map(([key, value]) =>\n key.length && value ? `${key}: ${value}` : value\n );\n\n const hr = '

';\n const text = d.text.slice(0, 1024) + \" ... \";\n const link =`Read the full report`;\n\n return arr.filter(Boolean).join(\"
\") + hr + text + link + close;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"getIncidentTooltip = (d) => {\n const info = {\n \"Occurred on\": formatDate(d),\n Location: d.location\n };\n\n const hr = '

';\n\n const arr = Object.entries(info).map(([key, value]) =>\n value ? `${key}: ${value}` : null\n );\n\n return arr.filter(Boolean).join(\"
\") + hr + d.short_description;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2783,"value":"close = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2177,"value":"## Formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2146,"value":"convert = (date) =>\n date.toLocaleDateString(\"US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"formatDate = (d) => {\n const [begin, end] = [convert(d.beginning_date), convert(d.ending_date)];\n\n return begin === end ? begin : `${begin} – ${end}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1596,"value":"evalArr = (l) =>\n eval(l).map((d) => (d.includes(\"Other:\") ? d.replace(\"Other:\", \"\") : d)).join(\", \")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2250,"value":"formatOption = (option) =>\n option.toLowerCase().replace(\"?\", \"\").replaceAll(\" \", \"_\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1243,"value":"## Size & Margins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":198,"value":"height = 13 * cfns.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"margin = ({left: 0.01 * width, right: 0.01 * width, top: 0.03 * height, bottom: 0.03 * height})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1247,"value":"## Data & Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"cfns = {\n const data = (\n await d3.csv(\n \"https://raw.githubusercontent.com/LKchemposer/aiid-visualization/master/data/classifications_processed-20211117.csv\",\n d3.autoType\n )\n ).filter(\n (d) =>\n d.annotation_status.includes(\"Complete\") &&\n d.beginning_date &&\n d.ending_date\n );\n data.forEach((d) =>\n Object.keys(d).forEach((key) => {\n d[key] ?? (d[key] = \"\");\n })\n );\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1757,"value":"reports = (\n await d3.csv(\n \"https://raw.githubusercontent.com/LKchemposer/aiid-visualization/master/data/incidents.csv\",\n d3.autoType\n )\n).filter((d) => cfns.map((c) => c.incident_id).includes(d.incident_id))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2164,"value":"sortedData = (s) =>\n s === \"Incident ID\"\n ? d3.sort(cfns, (d) => -d.incident_id)\n : s === \"Number of reports\"\n ? d3.sort(cfns, (d) => d.reports.length)\n : categoricalAttrs.includes(sortBy)\n ? d3.sort(\n cfns,\n (a, b) =>\n d3.descending(a[formatOption(sortBy)], b[formatOption(sortBy)]) ||\n d3.descending(a.beginning_date, b.beginning_date)\n )\n : d3.sort(cfns, (d) => -d.beginning_date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2359,"value":"categoricalAttrs = [\n \"Severity\",\n \"Intent\",\n \"Near miss?\",\n \"Lives lost?\",\n \"Level of autonomy\",\n \"Nature of end user\",\n \"Sector of deployment\",\n \"Public sector deployment?\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"viewof colors = {\n const options = [...new Set(cfns.map(d => d[formatOption(colorBy)]))]\n .sort();\n return d3.scaleOrdinal(d3.schemeTableau10).domain(options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"