29:null 2a:["$","title",null,{"children":"Mini-Project 2 (Time) | Arshiya Sayyada | Observable"}] 2f:T864,//referenced:http://www.silota.com/docs/recipes/sql-join-tutorial-javascript-examples.html countriesWithAmounts = { const groupedByDonor = d3.rollup(aiddata, amount => d3.sum(amount, c => c.commitment_amount), d => d.donor, d => d.yearInt); const temp = Array.from(groupedByDonor, ([country, mapping]) => ({ country: country, counts: Array.from(mapping, ([year, donation_amount]) => ({year, donation_amount})) .sort((a,b) => d3.ascending(a.year,b.year)) })); const data = temp.map(d => ({ 'country': d.country, 'counts': d.counts.map(d => ({ 'year':d.year, 'donation_amt':d.donation_amount, 'received_amt': 0 })), })); for(var i=0; i ({ 'country': d.country, 'counts' : d.counts.sort((a,b) => d3.ascending(a.year,b.year)) })).sort((a,b) => d3.ascending(a.country,b.country)); return final }30:T12ff,{ const margin = { top: 50, bottom: 0, right: 10, left: 10 }; const visHeight = 1500 - margin.top - margin.bottom; const visWidth = width - margin.left - margin.right; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // create scales to place the grid cells const row = d3.scaleBand() .domain(d3.range(numRows)) .range([0, visHeight]) .padding(0.5); const col = d3.scaleBand() .domain(d3.range(numCols)) .range([0, visWidth]) .padding(0.2); // add a group for each cell and position it according to its row and column const cells = g.selectAll('.cell') .data(countryDataWithGrid) .join('g') .attr('class', 'cell') .attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`); const x = d3.scaleTime() .domain(d3.extent(yearsInData)) .range([0, col.bandwidth()]); const y = d3.scaleSqrt() .domain([minReceivedCount, maxDonationCount]).nice() .range([row.bandwidth(), 0]); const donations = d3.area() .x(d => x(d.year)) .y0(y(0)) .y1(d => y(d.donation_amt)); const received = d3.area() .x(d => x(d.year)) .y0(y(0)) .y1(d => y(d.received_amt)); const xAxis = d3.axisBottom(x) .tickFormat(d3.format("d")) .ticks(3); const yAxis = d3.axisLeft(y) //.ticks(2) .tickValues([-8000000000,-2000000000, 0 , 2000000000,8000000000]) .tickFormat(d3.format("(.1s")); const xAxisGrid = d3.axisBottom(x).tickSize(-row.bandwidth()).tickFormat('').ticks(8); const yAxisGrid = d3.axisLeft(y).tickSize(-col.bandwidth()).tickFormat('').ticks(8); cells.append('g') .attr('class', 'y-axis') .call(yAxis) .call(g => g.selectAll('.domain').remove()); cells.append('g') .attr('class', 'x-axis') .attr('transform', `translate(0,${row.bandwidth()})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()); cells.append('text') .text(d => d.country) .attr('font-size', 12) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('y', -5) .attr('x', col.bandwidth()/2); // add a rectangle to each group and make it take up the entire cell cells.append('rect') .attr('width', col.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', 'white') .attr('stroke', 'lightgray'); cells.append('path') .datum(d => d.counts) .attr('d', received) .attr("fill", d3.schemePaired[4]) .attr("stroke", d3.schemePaired[5]) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); cells.append('path') .datum(d => d.counts) .attr('d', donations) .attr("fill", d3.schemePaired[2]) .attr("stroke", d3.schemePaired[3]) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); cells.append('g') .attr('class', 'y axis-grid') .call(yAxisGrid) .attr("stroke-opacity", 0.08); cells.append('g') .attr('class', 'x axis-grid') .attr('transform', 'translate(0,' + row.bandwidth() + ')') .call(xAxisGrid) .attr("stroke-opacity", 0.08);; //test // svg.append('rect') // .attr('width', width) // .attr('height', 1500) // .attr('fill', 'none') // .attr('stroke', 'red'); svg.append('rect') .attr('x', 30) .attr('y', 20) .attr('width', 30) .attr('height', 10) .attr('stroke', d3.schemePaired[3]) .attr("stroke-width", 1.5) .attr('fill', d3.schemePaired[2]); svg.append('text') .attr('x', 65) .attr('y', 20) .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-size', '12px') .text('Dollars donated in billions (sqrt scale)'); svg.append('rect') .attr('x', 30) .attr('y', 40) .attr('width', 30) .attr('height', 10) .attr('stroke', d3.schemePaired[5]) .attr("stroke-width", 1.5) .attr('fill', d3.schemePaired[4]); svg.append('text') .attr('x', 65) .attr('y', 40) .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-size', '12px') .text('Dollars received in billions (sqrt scale)'); svg.select('.x-axis') .append('text') .attr('text-anchor', 'end') .attr('dominant-baseline', 'middle') .attr('font-size', '20px') .attr('fill', 'black') .attr('x', width - 120) .attr('y', -120) .text('Aid given and received by countries during the time period 1973-2013'); return svg.node(); }31:Td05,{ const margin = {top: 30, right: 100, bottom: 20, left: 100}; const visWidth = width - margin.left - margin.right; const visHeight = 750 - margin.top - margin.bottom; const row = d3.scaleBand() .domain(topTenPurposeCodes) .range([0, visHeight]) .padding(0.3); const x = d3.scaleTime() .domain(d3.extent(yearsInData)) .range([0, visWidth]); const y = d3.scaleSqrt() .domain([0, 10000000000]).nice() .range([row.bandwidth(), 0]); const xAxis = d3.axisBottom(x) .tickFormat(d3.format("d")); const yAxis = d3.axisLeft(y) //.ticks(2) .tickValues([0,2000000000,6000000000,10000000000]) .tickFormat(d3.format(".1s")); const xAxisGrid = d3.axisBottom(x).tickSize(-row.bandwidth()).tickFormat('').ticks(40); const yAxisGrid = d3.axisLeft(y).tickSize(-visWidth).tickFormat('').ticks(5); const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) //.call(g => g.selectAll('.domain').remove()); const area = d3.area() .x(d => x(d.year)) .y0(y(0)) .y1(d => y(d.commitment_amount)); const rows = g.selectAll('.row') .data(dataByPurpose) .join('g') .attr('class', 'row') .attr('transform', d => `translate(0,${row(d.purpose_code)})`); rows.append('g') .attr('class', 'y-axis') .call(yAxis) .call(g => g.selectAll('.domain').remove());; // svg.select('.y-axis') // .append('text') // .attr('text-anchor', 'start') // .attr('dominant-baseline', 'middle') // .attr('fill', 'black') // .attr('x', -90) // .attr('y', -100) // .text('Amount'); rows.append('path') .datum(d => d.counts) .attr('d', area) .attr("fill", d3.schemePaired[6]) .attr("stroke", d3.schemePaired[7]) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); rows.append('g') .attr('class', 'y axis-grid') .call(yAxisGrid) .attr("stroke-opacity", 0.05); rows.append('g') .attr('class', 'x axis-grid') .attr('transform', 'translate(0,' + row.bandwidth() + ')') .call(xAxisGrid) .attr("stroke-opacity", 0.05); rows.append('text') .text(d => codeToName[d.purpose_code]) .attr('font-size', 14) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('y', 15) .attr('x', 10); svg.append('text') .attr('x', width/2) .attr('y', 28) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-size', '12px') .text('amount donated is in dollars - a sqrt scale is used'); svg.append('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', '20px') .attr('fill', 'black') .attr('x', width/2) .attr('y', 10) .text('Aid Distribution During The Time Period 1973-2013 (Top 10 Purposes)'); return svg.node(); }32:T58b,{ const margin = {top: 10, right: 0, bottom: 0, left: 0}; const visWidth = 950 - margin.left - margin.right; const visHeight = 700 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // draw map //TO DO: check with different projections to see which shows info well const projection = d3.geoMercator() .fitSize([visWidth, visHeight], geoJSON); const path = d3.geoPath().projection(projection); g.selectAll('.border') .data(geoJSON.features.filter(d => d.properties.NAME_LONG !== 'Antarctica')) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d => selected_countries.includes(d.properties.NAME_LONG) ? color(countryToReceivedAmt[d.properties.NAME_LONG]) : 'lightgrey') .attr('stroke', 'white') svg.append('text') .attr('x', 800) .attr('y', 35) .attr('font-size', '50px') .text(year) svg.append('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', '30px') .attr('fill', 'black') .attr('x', width/2) .attr('y', 500) .text('History of Donations'); return svg.node(); }33:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1607028981624.572,"size":4177662}] 2d:{"id":"5230eae1b73af34e","slug":"mini-project-2-time","title":"Mini-Project 2 (Time)","thumbnail":"bb3dd47b2506b3d0d9ea8a65c91f7909c2efd39ab88558c30a38d8da3d4a79b5","access_level":"public","create_time":"$D2020-12-03T20:56:21.624Z","update_time":"$D2020-12-07T01:11:23.472Z","view_time":null,"first_public_time":"$D2021-01-15T01:46:46.706Z","has_unpublished_edits":null,"fork":{"id":"b6d5dee427fe288b","slug":"mini-projects","title":"Mini-Project 1 (Geo)","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7c4ea0d376011f1d","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":"starter_2024"},"version":1153,"publish_version":1153,"role":null,"authored":false,"authors":[{"type":"individual","id":"65082206403c20a7","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":null}],"members":[{"type":"individual","id":"65082206403c20a7","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Mini-Project 2 (Time)","cells":[{"id":21,"value":"md`# Mini-Project 2 (Time)\n-----------------\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"aiddata = (await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n aiddata_id: row.aiddata_id,\n aiddata_2_id: row.aiddata_2_id,\n donor: row.donor,\n recipient: row.recipient,\n commitment_amount: +row.commitment_amount_usd_constant,\n coalesced_purpose_code: row.coalesced_purpose_code,\n coalesced_purpose_name: row.coalesced_purpose_name,\n})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"geoJSON = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"md`-----------------\n### Preprocessing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"md`#### Viz 1 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"numRows = Math.round(countriesWithAmounts.length/numCols) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"numCols = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"coordinates = d3.cross(d3.range(numRows), d3.range(numCols))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"gridPositions = coordinates.map(([row,col]) => ({row,col}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"pairings = d3.zip(countriesWithAmounts, gridPositions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"countryDataWithGrid = pairings.map(([data, pos]) => ({...data, ...pos}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"maxDonationCount = d3.max(countryDataWithGrid, d => d3.max(d.counts, e => e.donation_amt))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"minReceivedCount = d3.min(countryDataWithGrid, d => d3.min(d.counts, e => e.received_amt))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"md`#### Viz 2 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"yearsInData = {\n //create set of distinct inspectionID values\n const distinctIDs = new Set();\n aiddata.forEach(d => {\n distinctIDs.add(d.yearInt)\n });\n \n //using the distinct inspectionIDs set filter the data to remove multiple instances of the same inspectionIDs\n let tempData = aiddata.filter(d => {\n if(distinctIDs.has(d.yearInt)) {\n distinctIDs.delete(d.yearInt)\n return d;\n } })\n \n const yearList = [];\n for(let i=0; i {\n distinctIDs.add(d.coalesced_purpose_code)\n });\n \n //using the distinct inspectionIDs set filter the data to remove multiple instances of the same inspectionIDs\n let tempData = aiddata.filter(d => {\n if(distinctIDs.has(d.coalesced_purpose_code)) {\n distinctIDs.delete(d.coalesced_purpose_code)\n return d;\n } })\n \n const purposes = tempData.map(d=>({\n 'purpose_code':d.coalesced_purpose_code,\n 'purpose_name':d.coalesced_purpose_name}));\n \n return purposes \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"codeToName = Object.fromEntries(new Map(purposeList.map(d => [d.purpose_code, d.purpose_name])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"topTenPurposes = {\n const temp = d3.rollup(aiddata,\n amount => d3.sum(amount, c=>c.commitment_amount),\n d => d.coalesced_purpose_code);\n const temp2 = Array.from(temp, ([purpose_code, total_amt]) => ({purpose_code, total_amt}))\n \n const temp3 = temp2.sort((a,b) => d3.descending(a.total_amt,b.total_amt)).slice(0,10)\n \n const final = temp3.map(d => ({\n 'purpose_code': d.purpose_code,\n 'purpose_name': codeToName[d.purpose_code],\n 'total_amt': d.total_amt\n }))\n \n return final\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"topTenPurposeCodes = topTenPurposes.map(d => d.purpose_code)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"dataByPurpose = {\n \n const temp = aiddata.filter(d => topTenPurposeCodes.includes(d.coalesced_purpose_code))\n const data = d3.rollup(temp,\n amount => d3.sum(amount, c => c.commitment_amount),\n d => d.coalesced_purpose_code,\n d => d.yearInt);\n \n const final = Array.from(data, ([purpose_code, mapping]) => ({\n purpose_code: purpose_code,\n counts: Array.from(mapping, ([year, commitment_amount]) => ({year, commitment_amount}))\n .sort((a,b) => d3.ascending(a.year,b.year))\n }));\n \n return final\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"maxSinglePurposeCount = d3.max(dataByPurpose, d => d3.max(d.counts, e => e.commitment_amount))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"d3.extent(yearsInData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"md`#### Viz 3 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"yearRange = d3.extent(aiddata_copy, d => d.yearInt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"countriesOnMapDataSet = geoJSON.features.map(d => d.properties.NAME_LONG).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"viz_3_data ={\n const groupedByRecipientYear = d3.rollup(aiddata_copy,\n amount => d3.sum(amount, c => c.commitment_amount),\n d => d.yearInt,\n d => d.recipient\n );\n \n const temp = Array.from(groupedByRecipientYear, ([year, mapping]) => ({\n year: year,\n counts: Array.from(mapping, ([country, received_amount]) => ({country, received_amount}))\n })).sort((a,b) => d3.ascending(a.year,b.year));\n \n return temp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"received_extent = [d3.min(viz_3_data, d => d3.min(d.counts, e => e.received_amount)), d3.max(viz_3_data, d => d3.max(d.counts, e => e.received_amount))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"color = d3.scaleSequential()\n .domain([0,received_extent[1]])\n .interpolator(d3.interpolateCool)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"selected_year_data = {\n const output = [];\n \n for(var i=0; i d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"countryToReceivedAmt = Object.fromEntries(new Map(selected_year_data.map(d => [d.country, d.received_amount])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"unmatched = {\n var unique_recipient_countries = [];\n for (let i = 0; i < aiddata_copy.length; i++) {\n const currentRow = aiddata_copy[i];\n \n if (!unique_recipient_countries.includes(currentRow.recipient)) {\n unique_recipient_countries.push(currentRow.recipient);\n }\n }\n \n var unmatched = [];\n for(let j=0; j`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"md`\nFor this vizualization, I weighed the pros and cons of using an interactive time lapse map vs a small multiples map. Considering how smaller certain regions got when I tried to apply small multiple reasoning while still getting as much information in one glance, I chose instead to use an interactive version where you can pick the year with a slider to check geographical donation trends for that year. While not a perfect solution, since it relies on the users memory quite heavily, I found this to be better than small multiples for conveying trends in a faster quick glance way.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"