25:["$","title",null,{"children":"Interactivity Liu | Interactive Info Vis | Observable"}] 49:T9b8,table_info = [ { technique: "Select", description: "The technique of selecting allows viewers to select the subset of data which are the items
that interestd.", example: "Brushable Scatterplot" }, { technique: "Explore", description: "The technique of exploring allows viewers to navigate through the dataset with interactive
features. It is useful especially when a dataset is big.", example: "Icelandic Population by Age, 1841–2019" }, { technique: "Reconfigure", description: "The technique of reconfiguring allows viewers to view different aspects of a data by different
arrangement of representations.", example: "New Zealand Tourists, 1921–2018" }, { technique: "Encode", description: "The technique of encoding uses different types of encodings to show same data and they
reveal uncovered aspects to the viewers.", example: "Graphical Encoding Examples" }, { technique: "Abstract/Elaborate", description: "The technique of abstract/elaborate provides the visualization different levels of
abstraction and allows viewers to elaborate through the dataset.", example: "Zoomable Circle Packing" }, { technique: "Filter", description: "The technique of filtering let viewers filter the data to display according to different conditions or ranges.", example: "SVG gradient & filter playground | Hexagons" }, { technique: "Connect", description: "The technique of connecting shows and highlights viewers related items in a dataset, as well as
reveals some hidden items related to specific dates.", example: "Bilevel Edge Bundling" } ]4a:T1043,chart = { const radius = 5; const barwidth = 5; const container = d3.select( DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom ) ); const arcGroup = container .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const nodes = arcGroup .selectAll("nodes") .data(data_selected.nodes) .enter() .append("circle") .attr("cx", width - 1000 + 400) .attr("cy", d => xScale(d.name)) .attr("r", radius) .attr("fill", d => d3.lab(color(d.group)).darker(-0.5)) .attr("id", d => d.id); const labels = arcGroup .selectAll("nodeLabels") .data(data_selected.nodes) .enter() .append("text") .attr("x", width - 1000 + 380) .attr("y", d => xScale(d.name)) .attr("fill", "black") .style("text-anchor", "end") .text(d => (d.name.length > 30 ? d.name.substring(0, 30) : d.name)) .style("font-size", "11px"); const barlabels = arcGroup .selectAll("barLabels") .data(data_selected.nodes) .enter() .append("text") .attr( "x", d => width - 1000 + 400 - (selected == "Items Count" ? d.count : d.average_price) * (selected == "Items Count" ? 0.4 : 0.3) - 200 - 10 ) .attr("y", d => xScale(d.name) + 2.5) .attr("fill", "black") .style("text-anchor", "end") .text(d => selected == "Items Count" ? d.count : (d.average_price + "").substring(0, 6) ) .style("font-size", "12px"); const rects = arcGroup .selectAll("rect") .data(data_selected.nodes) .enter() .append("rect") .attr( "width", d => (selected == "Items Count" ? d.count : d.average_price) * (selected == "Items Count" ? 0.4 : 0.3) ) .attr("height", barwidth) .attr( "x", d => width - 1000 + 400 - (selected == "Items Count" ? d.count : d.average_price) * (selected == "Items Count" ? 0.4 : 0.3) - 200 ) .attr("y", d => xScale(d.name) - 2.5) .attr("fill", d => d3.lab(color(d.group))); function buildArc(d) { let start = xScale(idToNode[d.source].name); let end = xScale(idToNode[d.target].name); const r = Math.abs(end - start) / 2; const arcPath = [ 'M', width - 1000 + 400, start, 'A', r, r, 0, 0, start < end ? 1 : 0, width - 1000 + 400, end ].join(' '); return arcPath; } const arcs = arcGroup .selectAll("arcs") .data(data_selected.links) .enter() .append("path") .attr("d", d => buildArc(d)) .style("fill", "none") .attr("stroke", "darkgrey") .attr('stroke-opacity', 0.9) .attr('stroke-width', 0.5); labels.on('mouseover', function(d) { d3.select(this).style("font-weight", 'bold'); arcs .style('stroke', function(arcd) { return arcd.source === d.id || arcd.target === d.id ? '#626363' : 'lightgrey'; }) .style('stroke-width', function(arcd) { return arcd.source === d.id || arcd.target === d.id ? 1.3 : 0.5; }) .style('stroke-opacity', function(arcd) { return arcd.source === d.id || arcd.target === d.id ? 0.7 : 0.3; }); rects.style('fill', function(rec) { return rec.id === d.id ? '#626363' : 'lightgrey'; }); nodes .style('fill', function(l) { return l.id === d.id ? '#626363' : 'lightgrey'; }) .style("r", function(l) { return l.id === d.id ? '8' : 'radius'; }); barlabels.style('font-weight', function(bl) { return bl.id === d.id ? 'bold' : ''; }); }); labels.on('mouseout', function(d) { nodes.style("fill", d => d3.lab(color(d.group))); arcs.style('stroke', 'darkgrey'); arcs.style('stroke-width', 0.5); arcs.style('stroke-opacity', 0.9); rects.style("fill", d => d3.lab(color(d.group))); labels.style('font-weight', ''); barlabels.style('font-weight', ''); nodes.style('r', radius); }); return container.node(); }4b:T57a,md`### Interaction techniques - **Select** The visualization has the technique of select interaction where the viewers can move the cursor to highlight and select a subset of data to view the relations between items that are in the same group. It could answer the questions of (1) what other categories of product in Amazon do the selected item related to, and (2) are those related categories distributed evenly ordering by the number of items or by average prices. - **Filter** By using a selection view box, it is able to use the technique of filter interaction to provide viewers an option to display the visualization according to different ranking conditions, either by the number of items or by average prices. It could answer the questions of (1) what categories have a higher amount of items in Amazon in 2020, and (2) what categories of items are relatively more expensive. - **Connect** The categories listed in the visualization above are secondary categories in Amazon, and they can be grouped according to their common primary categories. Using the technique of connecting interaction allows viewers to see the relationship between these categories in a clear way. It could answer the questions of (1) what are some other categories do a certain category of items related to, and (2) are these categories in common has a lot of items selling or has relatively higher prices. `4c:Tbf2,md`The original dataset is too big and too slow for Observable to process. Here's Java code I wrote to handle data: ~~~csharp static void handleRaw() throws IOException { BufferedReader bufferedReader = new BufferedReader(new FileReader(new File("amazon.csv"))); BufferedWriter bufferedWriter = new BufferedWriter(new FileWriter(new File("out.csv"))); String line; while ((line = bufferedReader.readLine()) != null) { String[] param = line.split(","); if (!param[4].contains("|")) { continue; } String cate = param[4].split("\\|")[0]; String cate2 = param[4].split("\\|")[1]; cate = cate.replace("\\"", "").trim(); String price = param[7].contains("$") ? param[7].replace("$", "") : ""; try { Double.parseDouble(price); } catch (Exception e) { continue; } if (cate.isEmpty() || price.equals("")) continue; String newLine = cate2.trim() + "," + price + "," + cate; bufferedWriter.write(newLine + "\n"); } } static void agg() throws IOException { BufferedReader bufferedReader = new BufferedReader(new FileReader(new File("out.csv"))); BufferedWriter bufferedWriter = new BufferedWriter(new FileWriter(new File("out2.csv"))); HashMap map = new HashMap<>(); HashMap sizeMap = new HashMap<>(); HashMap linkedHashSet = new HashMap(); int index = 0; String line; while ((line = bufferedReader.readLine()) != null) { String[] param = line.split(","); if (param.length < 3) { continue; } if (!linkedHashSet.containsKey(param[2])) { linkedHashSet.put(param[2], index++); } param[0] += "|" + param[2]; if (!map.containsKey(param[0])) { map.put(param[0], 0.0); sizeMap.put(param[0], 0); } map.put(param[0], map.get(param[0]) + Double.parseDouble(param[1])); sizeMap.put(param[0], sizeMap.get(param[0]) + 1); } bufferedReader.close(); bufferedWriter.write("id,name,average_price,count" + "\n"); int counter = 0; for (String key : map.keySet()) { bufferedWriter.write(counter++ + "," + key.split("\\|")[0] + "," + map.get(key)/sizeMap.get(key) + "," + sizeMap.get(key) + "," + linkedHashSet.get(key.split("\\|")[1]) + "\n"); } bufferedWriter.flush(); bufferedWriter.close(); } static void findLinks() throws IOException { BufferedReader bufferedReader = new BufferedReader(new FileReader(new File("out2.csv"))); BufferedWriter bufferedWriter = new BufferedWriter(new FileWriter(new File("out3.csv"))); ArrayList list = new ArrayList<>(); int counter = 0; String line; while ((line = bufferedReader.readLine()) != null) { if (counter == 0) { counter = 1; continue; } list.add(line); } for (int i = 0; i < list.size(); i++) { String[] paramA = list.get(i).split(","); for (int j = i + 1; j < list.size(); j++) { String[] paramB = list.get(j).split(","); if (paramA[4].equals(paramB[4])) { System.out.println("{ \"source\" : " + paramA[0] + " , \"target\" : " + paramB[0] + " },"); } } } } ~~~ `4d:[{"id":"8cd7bf4ed184b66b904ab73fcce665a71ad11dd8ae3b36030d6a32e0bfcc74a14ebd2b3a6696d4fd21b8d914b1e54fe64e9122e18d457e1f536dc69a674d9f14","href":"https://static.observableusercontent.com/files/8cd7bf4ed184b66b904ab73fcce665a71ad11dd8ae3b36030d6a32e0bfcc74a14ebd2b3a6696d4fd21b8d914b1e54fe64e9122e18d457e1f536dc69a674d9f14","name":"Amazon Product Dataset_price_order@1.json","type":"application/json","lastModified":1606065108833.93,"size":15390},{"id":"02dbccadf005d58a7b22c3aac743a6437746b90da0e12926a1b67cfe454ce2c48e4847ed791ae9e11fbfe7c19d0cb41fc88c21e0cfa2f0c4db48a898772fc797","href":"https://static.observableusercontent.com/files/02dbccadf005d58a7b22c3aac743a6437746b90da0e12926a1b67cfe454ce2c48e4847ed791ae9e11fbfe7c19d0cb41fc88c21e0cfa2f0c4db48a898772fc797","name":"Amazon Product Dataset@3.json","type":"application/json","lastModified":1606063000170.514,"size":15267}] 29:{"id":"87ea088386d0f57f","slug":null,"title":"Interactivity Liu","thumbnail":"641e61c7b7e6e7062bb0020a6adb76ec9fe936e7fee5bb170fdefd3b529ddfc3","access_level":"unlisted","create_time":"$D2020-11-22T13:50:21.829Z","update_time":"$D2020-11-23T22:56:58.110Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"af3041f874d61985","slug":"interactivity","title":"Interactivity","owner":{"id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"82cd20deb9e45d2a","login":"uw-info474","name":"Interactive Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/0f696394de7ab5e2cd50dd2e1dd79af08077f3f74024d007b8a5af8b9d01a473","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":819,"publish_version":819,"role":null,"authored":false,"authors":[{"type":"individual","id":"22a3e723ae41c570","login":"ltxom","name":"Tom Liu","avatar_url":"https://avatars-next.observableusercontent.com/a0651347f857f205ae2c2df3b545017fc477647dbfaa79f6beffde13c94f9698","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"660e4aa6b35cf96c","login":"badpickle149","name":"Kevin Weng","avatar_url":"https://avatars-next.observableusercontent.com/482f800eb2f18d9f48eb442cb77da2f6cfee6b72b5fffa19a45b36230f072fa2","tier":null,"role":"editor"},{"type":"individual","id":"22a3e723ae41c570","login":"ltxom","name":"Tom Liu","avatar_url":"https://avatars-next.observableusercontent.com/a0651347f857f205ae2c2df3b545017fc477647dbfaa79f6beffde13c94f9698","tier":null,"role":"editor"},{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"},{"type":"individual","id":"8dc7492a123a7205","login":"fdukic","name":"Fran Dukic","avatar_url":"https://avatars-next.observableusercontent.com/be2dc18ea2870e6f51467f22887939d9d831b33bbb4dbea10b475cf0e099262d","tier":null,"role":"viewer"},{"type":"individual","id":"6870c1798c2c1977","login":"palashgujrathi","name":"Palash Gujrathi","avatar_url":"https://avatars-next.observableusercontent.com/b40f97e729115dcb06573b4c489502d7c558ac9ba4de66363b503e0781ac12ab","tier":null,"role":"viewer"},{"type":"individual","id":"c61fab5445e8eda1","login":"wanyuguan","name":"","avatar_url":"https://avatars.githubusercontent.com/u/13525893?v=4","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactivity Liu","cells":[{"id":0,"value":"md`# Interactivity Liu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"summary = md`In this notebook, you will learn about **interaction techniques** for visualization through following steps: \n1. Carefully read [this academic paper](https://www.cc.gatech.edu/~stasko/papers/infovis07-interaction.pdf) summarizing different techinques for interactions\n2. Fill out a table with descriptions and hyperlinks to examples\n3. Build a chart (from scratch) and add **three interactions technqiues**, each of which allows you to answer a different question of interest \n4. Describe what type of interaction technique you created, and what questions it allows you to answer in the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@uw-info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Interactivity Freeman_)

**Share the notebook**: share with your TA and instructor!

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"summary_table = md`## Summary Table\nEdit the \\`table_info\\` cell below to populate the corresponding table with descriptions and examples of different interaction techniques.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"render_data_table(table_info)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"interactive_chart = md`## Interactive Visualization\nIn this section, create -- **from scratch** -- an interactive visualization of your choice with **three interaction techniques**. At least two of the techniques must come from directly interacting with the chart (e.g., hovering, clicking, mouse-wheel events) while one may come from outside of the chart (e.g., a select menu).\n\nFeel free to use your final project data for exploration and practice!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`### Data\nThe dataset is from Amazon Product Dataset 2020, which contains 30K records of items selling in Amazon in 2020.\nhttps://www.kaggle.com/promptcloud/amazon-product-dataset-2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"md`Order by:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"viewof selected = select([\"Items Count\", \"Items average price\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"description = md`## Interactivity Description\nIn the section below, please detail what interaction techniques you employed (using the formal language from the paper), and describe what questions it allows you to ask of the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"data_selected = selected == \"Items Count\" ? graphData : graphData_2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"graphData_2 = JSON.parse(\n await FileAttachment(\"Amazon Product Dataset_price_order@1.json\").text()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"height = 1000 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"allNodesfre = data_selected.nodes.map(function(d) {\n return selected == \"Items Count\" ? d.count : d.average_price;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"idToNode = {\n let dict = {};\n data_selected.nodes.forEach(function(n) {\n dict[n.id] = n;\n });\n return dict;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"color = d3.scaleOrdinal(\n data_selected.nodes.map(d => d.group).sort(d3.ascending),\n [\n \"#264653\",\n \"#2a9d8f\",\n \"#e9c46a\",\n \"#f4a261\",\n \"#e76f51\",\n \"#cb997e\",\n \"#eddcd2\",\n \"#a5a58d\"\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"allNodesNames = data_selected.nodes.map(function(d) {\n return d.name;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"idToTargetNodes = {\n let dict = {};\n data_selected.nodes.forEach(function(n) {\n dict[n.id] = [];\n data_selected.links.forEach(function(l) {\n if (l.source === n.id) {\n dict[n.id].push(l.target);\n }\n });\n });\n return dict;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"margin = ({ top: 10, bottom: 10, left: 20, right: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"xScale = d3\n .scalePoint()\n .domain(allNodesNames)\n .range([0, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"width = 1100 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"graphData = JSON.parse(\n await FileAttachment(\"Amazon Product Dataset@3.json\").text()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null