44:["$","title",null,{"children":"Interactivity Yousuf | Spring 2020 Info Vis | Observable"}] 4c:T899,table_info = [ { technique: "Select", description: "allows the user to mark (highlight) something as interesting/significant", example: "The Big Mac Index, Economist" }, { technique: "Explore", description: "allows users to examine or view a different subset of the data", example: "The Atlas of Moons, National Geographic" }, { technique: "Reconfigure", description: "allows users to view different perspectives of the data by changing the spatial arrangement", example: "Manhattan Population Explorer, Justin Fung" }, { technique: "Encode", description: "allows users to alter the fundamental visual representation of data, for example, it's color ", example: "worldshapin, Vasundhara Parakh and Carlo Zapponi" }, { technique: "Abstract/Elaborate", description: "allows users to adjust the level of abstraction (detail) of data representation", example: "Where the population of Europe is growing – and where it’s declining, Berliner Morgenpost Interactive Team" }, { technique: "Filter", description: "allows users to change the set of data being presented based some specific conditions", example: "The Largest Vocabulary In Hip Hop, Matt Daniels" }, { technique: "Connect", description: "allows users to view (1) highlighted associations and relationships between data items that are already represented and (2) hidden data items that are relevant to a specified item", example: "Why do buses bunch?, Lewis Lehe" } ]4d:T4c2,sales_chart = { const svg = d3.create("svg").attr("viewBox", [-5, 10, width, height]); svg .append("g") .selectAll("rect") .data(filter_final) .join("rect") .attr("stroke", "black") .style("fill", color) .attr("x", (d, i) => filter_x(i)) .attr("y", d => filter_y(d.value)) .attr("height", d => filter_y(0) - filter_y(d.value)) .attr("width", filter_x.bandwidth()); svg.append("g").call(filter_xAxis); svg.append("g").call(filter_yAxis); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,25)") .style("font-weight", "bold") .style("text-anchor", "middle") .text( "Mean Global Sales for Top Genres (> than 250,000 Units Sold) in ".concat( year_input ) ); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,490)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Genre"); svg .append("text") .attr("class", "text") .attr("transform", "translate(5,250) rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Total Mean Global Sales (millions)"); return svg.node(); }4e:T45e,ae_chart = { const svg = d3.create("svg").attr("viewBox", [-5, 10, width, height]); svg .append("g") .selectAll("rect") .data(ae_final) .join("rect") .attr("stroke", "black") .style("fill", color) .attr("x", (d, i) => ae_x(i)) .attr("y", d => ae_y(d.value)) .attr("height", d => ae_y(0) - ae_y(d.value)) .attr("width", ae_x.bandwidth()); svg.append("g").call(ae_xAxis); svg.append("g").call(ae_yAxis); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,25)") .style("font-weight", "bold") .style("text-anchor", "middle") .text("Mean Global Sales for Different Genres in 2010"); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,490)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Genre"); svg .append("text") .attr("class", "text") .attr("transform", "translate(5,250) rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Total Mean Global Sales (millions)"); return svg.node(); }4f:T4dd,select_chart = { const svg = d3.create("svg").attr("viewBox", [-5, 10, width, height]); svg .append("g") .selectAll("rect") .data(filter_final) .join("rect") .attr("stroke", "black") .style("fill", color) .attr("x", (d, i) => filter_x(i)) .attr("y", d => filter_y(d.value)) .attr("height", d => filter_y(0) - filter_y(d.value)) .attr("width", filter_x.bandwidth()) .attr("id", "select"); svg.append("g").call(filter_xAxis); svg.append("g").call(filter_yAxis); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,25)") .style("font-weight", "bold") .style("text-anchor", "middle") .text( "Mean Global Sales for Top Genres (> than 250,000 Units Sold) in ".concat( year_input ) ); svg .append("text") .attr("class", "text") .attr("transform", "translate(500,490)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Genre"); svg .append("text") .attr("class", "text") .attr("transform", "translate(5,250) rotate(-90)") .style("text-anchor", "middle") .style("font-size", "12px") .text("Total Mean Global Sales (millions)"); return svg.node(); }50:[{"id":"83e94a72249c94abcee06b5ff475319ef96208f28fcb0db83d60857a609acc91493a0a7e751fe1e4dc173ff71814243090dd88a47586850242060fd7cb442f59","href":"https://static.observableusercontent.com/files/83e94a72249c94abcee06b5ff475319ef96208f28fcb0db83d60857a609acc91493a0a7e751fe1e4dc173ff71814243090dd88a47586850242060fd7cb442f59","name":"video_games.csv","type":"text/csv","lastModified":1590524941786.986,"size":1618040}] 48:{"id":"3c821e38944cb9ff","slug":"interactivity-yousuf","title":"Interactivity Yousuf","thumbnail":"6cac230f036889539160957569102fae8e8f559660efef531edc48fea89cbfb2","access_level":"public","create_time":"$D2020-05-26T19:15:03.345Z","update_time":"$D2020-05-27T20:11:15.773Z","view_time":null,"first_public_time":"$D2020-05-26T19:33:16.839Z","has_unpublished_edits":null,"fork":{"id":"bc6b2944b49e95c4","slug":"interactivity","title":"Interactivity","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","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":1006,"publish_version":1006,"role":null,"authored":false,"authors":[{"type":"individual","id":"e82ff7b39f6354cf","login":"yousufj","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactivity Yousuf","cells":[{"id":0,"value":"md`# Interactivity Yousuf`","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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4c","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":629,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"game_data = d3.csvParse(\n await FileAttachment(\"video_games.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"render_data_table(game_data.slice(20, 25))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"sample_visualizations = md`## Sample Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`### Filter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"viewof year_input = select({\n title: \"Year\",\n options: [2010, 2011, 2012, 2013, 2014, 2015],\n value: 2010\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"md`### Abstract/Elaborate`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"viewof genre = checkbox({\n title: \"Genres\",\n description:\n \"Above, please select all genres you'd like to view mean global sales (millions) for in 2010 then submit.\",\n options: [\n { value: \"Action\", label: \"Action\" },\n { value: \"Adventure\", label: \"Adventure\" },\n { value: \"Fighting\", label: \"Fighting\" },\n { value: \"Platform\", label: \"Platform\" },\n { value: \"Puzzle\", label: \"Puzzle\" },\n { value: \"Racing\", label: \"Racing\" },\n { value: \"Role-Playing\", label: \"Role-Playing\" },\n { value: \"Shooter\", label: \"Shooter\" },\n { value: \"Simulation\", label: \"Simulation\" },\n { value: \"Sports\", label: \"Sports\" },\n { value: \"Strategy\", label: \"Strategy\" },\n { value: \"Misc\", label: \"Misc\" }\n ],\n value: [\"Action\", \"Adventure\"],\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`### Select (Hover)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"$4f","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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md`This was a very doable assignment in terms of amount of tasks assigned; the reading was easy to follow and I liked the creativity aspect of creating your own graphs which meet technique requirements. The only difficulty I had was finding examples of visualizations for the table.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`## Data Formatting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"md`Filter Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"filter_data = Object.keys(game_data).map(d => {\n return {\n x: game_data[d].Year_of_Release,\n y: game_data[d].Global_Sales,\n genre: game_data[d].Genre\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"filter_date = filter_data.filter(d => d.x == year_input)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"filter_average = Object.assign(\n d3\n .nest()\n .key(d => d.genre)\n .rollup(v => d3.mean(v, d => d.y))\n .entries(filter_date)\n).map(({ key, value }) => ({ name: key, value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"filter_final = filter_average.filter(d => d.value > 0.25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"filter_y = d3\n .scaleLinear()\n .domain([0, d3.max(filter_final, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"filter_x = d3\n .scaleBand()\n .domain(d3.range(filter_final.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"filter_xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(filter_x)\n .tickFormat(i => filter_final[i].name)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"filter_yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(filter_y).ticks(null, filter_final.format))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(filter_final.y)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"md`Abstract/Elaborate Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"ae_data = Object.keys(game_data).map(d => {\n return {\n x: game_data[d].Year_of_Release,\n y: game_data[d].Global_Sales,\n genre: game_data[d].Genre\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"ae_date = filter_data.filter(d => d.x == 2010)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"ae_average = Object.assign(\n d3\n .nest()\n .key(d => d.genre)\n .rollup(v => d3.mean(v, d => d.y))\n .entries(ae_date)\n).map(({ key, value }) => ({ name: key, value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"ae_final = ae_average.filter(\n d =>\n d.name == genre[0] ||\n d.name == genre[1] ||\n d.name == genre[2] ||\n d.name == genre[3] ||\n d.name == genre[4] ||\n d.name == genre[5] ||\n d.name == genre[6] ||\n d.name == genre[7] ||\n d.name == genre[8] ||\n d.name == genre[9] ||\n d.name == genre[10] ||\n d.name == genre[11]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"ae_x = d3\n .scaleBand()\n .domain(d3.range(ae_final.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"ae_y = d3\n .scaleLinear()\n .domain([0, d3.max(ae_final, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"ae_xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(ae_x)\n .tickFormat(i => ae_final[i].name)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"ae_yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(filter_y).ticks(null, ae_final.format))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(ae_final.y)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"md`Select Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"tooltip = {\n select_chart;\n\n const tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // select all rect\n d3.selectAll(\"#select\")\n .on(\"mouseover\", function(d) {\n // change the selection style\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', 'steelblue')\n .attr(\"stroke\", \"black\");\n // make the tooltip visible and update its text\n tooltip\n .style(\"visibility\", \"visible\")\n .style(\"font\", \"9px\")\n .text(`Sales (units): ${d.value * 1000000}`);\n })\n .on(\"mousemove\", function() {\n tooltip\n .style(\"top\", d3.event.pageY - 10 + \"px\")\n .style(\"left\", d3.event.pageX + 10 + \"px\");\n })\n .on(\"mouseout\", function() {\n // change the selection style\n d3.select(this)\n .attr('stroke-width', '1')\n .style('fill', '#f28e2c');\n\n tooltip.style(\"visibility\", \"hidden\");\n });\n}","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":681,"value":"color = \"#f28e2c\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"margin = ({ top: 30, right: 30, bottom: 60, left: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"d3 = require(\"d3\")","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":648,"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":862,"value":"import { checkbox } from \"@jashkenas/inputs\"","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":"$W50","stdlib":"1"}} 24:null