25:["$","title",null,{"children":"DS4200 | socrano | Observable"}] 4b:T139d,//The network vis of the restaurant recommended to you. chart = { const nodes_og_data = data.nodes.map(d => Object.create(d)); const links = linkfilterer().map(d => Object.create(d)); const nodes = nodefilterer().map(d => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id(d => d.ID) .strength(0.001) ) .force("charge", d3.forceManyBody()) .force("x", d3.forceX(d => x(d.Label)).strength(0.3)) .force("y", d3.forceY()); // .force("x", d3.forceCenter(d => x(d.group)).strength(0.3)) // .force("y", d3.forceCenter(d => y(d.group)).strength(0.3)); const svg = d3 .create("svg") .attr("viewBox", [-width / 1.5, -height / 1.8, width * 1.5, height * 1.5]); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.3) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const tooltipx = 250; const tooltipy = -270; const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll(".node") .data(nodes) .join("circle") .attr("r", function(d) { return radius(d.radius) || 1; }) .attr("fill", color) .on("click", onMouseClick) // .on("mouseenter", onMouseEnter) // .on("mouseleave", onMouseLeave) .call(drag(simulation)); const tooltip = svg .append("text") .attr("fill", "black") // .attr("x", tooltipx) // .attr("y", tooltipy) .attr("font-size", 22) .text(""); const tooltip2 = svg .append("text") .attr("fill", "black") // .attr("x", tooltipx) // .attr("y", tooltipy + 22) .attr("font-size", 22) .text(""); const tooltip_address = svg .append("text") .attr("fill", "black") // .attr("x", tooltipx) // .attr("y", tooltipy + 44) .attr("font-size", 22) .text(""); const tooltip_count = svg .append("text") .attr("fill", "black") .attr("font-size", 22) .text(""); if (reset) { releasenode(simulation); } var isTooltipHidden = true; var isClicked = false; var previous_id = ""; function onMouseClick(evt, d) { var xpos = d.x + 20; var ypos = d.y; var link_count = links.filter( a => a.source.ID === d.ID || a.target.ID === d.ID ).length; if (isClicked == false) { tooltip .text("Item: " + d.name) .attr("x", xpos) .attr("y", ypos); tooltip2 .text("Type: " + d.Label) .attr("x", xpos) .attr("y", ypos + 22); tooltip_count .text("Count: " + link_count) .attr("x", xpos) .attr("y", ypos + 44); if (d.Label === "restaurant") { tooltip_address .text("Address: " + d.address) .attr("x", xpos) .attr("y", ypos + 66); } previous_id = d.ID; link .attr("display", "none") .filter(l => { return l.source.ID === d.ID || l.target.ID === d.ID; }) .attr("display", "block"); isClicked = true; } else if (isClicked == true && d.ID != previous_id) { tooltip .text("Item: " + d.name) .attr("x", xpos) .attr("y", ypos); tooltip2 .text("Type: " + d.Label) .attr("x", xpos) .attr("y", ypos + 22); if (d.Label != "city" || d.Label != "state") { tooltip_count .text("Count: " + link_count) .attr("x", xpos) .attr("y", ypos + 44); } if (d.Label === "restaurant") { tooltip_address .text("Address: " + d.address) .attr("x", xpos) .attr("y", ypos + 66); } else { tooltip_address.text(""); } previous_id = d.ID; link .attr("display", "none") .filter(l => { return l.source.ID === d.ID || l.target.ID === d.ID; }) .attr("display", "block"); isClicked = true; } else { tooltip.text(""); tooltip2.text(""); tooltip_count.text(""); tooltip_address.text(""); link.attr("display", "block"); isClicked = false; } } //Simple tooltip (Maybe I can do a better one) node.append("title").text(d => d.Label + ": " + d.name); simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); let transform = d3.zoomIdentity; // // Zoom functionality (Geometrical Zoom, Experimental Functionality) // svg.call( // d3 // .zoom() // .extent([[0, 0], [width, height]]) // .scaleExtent([1, 8]) // .on("zoom", zoomed) // ); // function zoomed({ transform }) { // svg.attr("transform", transform); // } return svg.node(); }4c:T435,md`Don't have any specific restaurants in mind? Try this one! For the second type of search we implemented smart search by utilizing cypher query on neo4j server. Unlike the search above, since this is a "smart query" it will recommend you some restaurants that are beyond what you are exactly searching for. **Please note that it will give recommendation based on the current time of the day (ET) and it varies depending on how many restaurants are currently open. If you attempt to search at night you might see few/no results as most restaurants are closed.** Not all of the recommended restaurants will be opening but their opening time will be close to the current time. The user can specify what they are looking for by selecting zip code, categories as well as days of the week. Again, since this is a smart search query, **not all returned results will exactly fit the criteria as the goal is to recommend restaurants that doesn't exactly fit the criteria but you might like.** Default display: Pizza restaurants close to/within zip code 02115 and opening on Monday.`4d:T838,md`## Data Abstraction: The data is from YELP, but we download it from Kaggle: https://www.kaggle.com/yelp-dataset/yelp-dataset?select=yelp_academic_dataset_business.json The original dataset is a JSON file. It includes most businesses in great cities of Canada and the US, and their information like the position and their attributes. We clean the data and select the data we want. The final dataset only includes the restaurants, and their stars, position, zip code, city, states, and food type. We finish this step by Jupyter Notebook: https://colab.research.google.com/drive/1XeoOHY9GAYoVfmaOxdNDz0wuhqLCYfKg?usp=sharing Then we import the data to Neo4j and use neo4j as a server. The original dataset type: Table The final dataset type: Network Items (Nodes): * City - The city restaurants located. * Food - The food type restaurants provide. * Hours - The day restaurant is open. * Restaurant - Certain restaurant. * State - The state cities belong to. * stars - The average evaluation of restaurants from the customers. Links (Relationships): * Assoc - Our network is not complicated, so we do not specify the relationships. Attributes: * Stars - The attribute of node stars, shows the number of stars a restaurant gets. (Quantitative) * Time - Shows when will a restaurant be open on a certain day (like Monday). (Temporal) * ZIPCode - The zip code of a certain restaurant. (Categorical) * address - The address of a certain restaurant. (Categorical) * categories - The food type shown by Food node. (Categorical) * city - The city name of City node. (Categorical) * latitude - The latitude of a certain restaurant. (Quantitative) * longitude - The longitude of a certain restaurant. (Quantitative) * name - The name of a certain restaurant. (Categorical) * state - The name of State node. (Categorical) We processing the data to present the nodes and links in different tables at the beginning of this page. It can help you understand the data more easily. #### Ordering Direction: Longitude, latitude, and Time are *cyclic*, Stars is *Sequential* #### Data Availability: *Dynamic* `4e:T40e,md`## Marks and Channels: #### Geometry: Marks: points (each restaurant is a point), map (shows the geometry information). Channels: The position of point (shows the actual position of the restaurants). #### Network: Marks: points (each node is a point), lines (each link is a line). Channels: The color of points shows their type (color cannot be change). The original positions of nodes also shows their type (it can be changed by user). The size of nodes shows how many times they appear in the dataset. In another words, the size shows the preference of customers. #### Bar Chart: Marks: area (each bar is a food type/work time/stars number) Channels: The color of bar shows their type. The x-coordinate position shows their type. The height shows the time they appear in the given dataset (count). #### Pie Chart: Marks: area (each pie is a food type/work time/stars number) Channels: The color of pie shows their type. The position shows their type. The angle/area size shows the time they appear in the given dataset (count). `4f:T5ba,//Function to deal with data return several node and relationship at same time function dealWithDataWithParallel(queryArray) { var NodeIdArray = []; var RelationshipIdArray = []; var nodeArray = []; var relArray = [] for (let index = 0; index < queryArray.length; index++) { var sampleArray = queryArray[index]._fields for (let i = 0; i < sampleArray.length; i++) { var id = sampleArray[i].identity.low if (sampleArray[i].constructor.name === "Node") { if (!(NodeIdArray.includes(id))) { NodeIdArray.push(id) if (sampleArray[i].labels[0] === "Restaurant") { var res = sampleArray[i].properties res["ID"] = id res["Label"] = sampleArray[i].labels[0] nodeArray.push(sampleArray[i].properties) } else { var otherNode = sampleArray[i].properties; nodeArray.push({name:otherNode[Object.keys(otherNode)[0]], ID: id, Label:sampleArray[i].labels[0]}) } } } else { if (!(RelationshipIdArray.includes(id))) { RelationshipIdArray.push(id) var link = sampleArray[i].properties link.ID = sampleArray[i].identity.low link.source = sampleArray[i].start.low link.target = sampleArray[i].end.low relArray.push(sampleArray[i].properties) } } } } var finalArray = buildDataArray(nodeArray, relArray); return finalArray }50:T5a8,//Function to deal with data get one node or relationship one time function dealWithData() { var NodeIdArray = []; var RelationshipIdArray = []; var nodeArray = []; var relArray = [] for (let index = 0; index < all.length; index++) { var sample = all[index]._fields[0] var id = sample.identity.low if (sample.constructor.name === "Node") { if (!(NodeIdArray.includes(id))) { NodeIdArray.push(id) if (sample.labels[0] === "Restaurant") { var res = sample.properties res["ID"] = id res["Label"] = sample.labels[0] nodeArray.push(sample.properties) } else { var otherNode = sample.properties; nodeArray.push({name:otherNode[Object.keys(otherNode)[0]], ID: id, Label:sample.labels[0]}) } } } else { if (!(RelationshipIdArray.includes(id))) { RelationshipIdArray.push(id) var link = sample.properties link.ID = sample.identity.low link.source = sample.start.low link.target = sample.end.low link.value = 1 relArray.push(sample.properties) } } } function addRadius(d) { d["radius"] = relArray.filter(a => a.source === d.ID || a.target === d.ID).length; return d; } nodeArray.map(addRadius); var finalArray = buildDataArray(nodeArray, relArray); return finalArray }51:T44c,//Build bar chart and pie chart for given field. function barAndPiechart(data, field) { var array = data.nodes.filter(d => d.Label === field); array.map(d => d.count = countRelations(d, data)).filter(d => d.count !== 0); const bar = vl.markBar() .data(array) .encode( vl.x().fieldN("name"), vl.y().fieldQ("count"), vl.color().fieldN("name"), vl.tooltip([ { field: "name", type: "Categorical"}, { field: "count", type: "quantitative" } ]) ) const color = d3.scaleSequential(d3.interpolateViridis).domain([0, array.length-1]); const colors = { domain: array.map(d=>d.group), range: array.map( (i,j) => color(j) ) }; const pie = vl.markArc({outerRadius: 150}) .data(array) .encode( vl.theta().fieldQ('count'), vl.color().fieldN('name'), vl.tooltip([ { field: "name", type: "nominal" }, { field: "count", type: "quantitative" } ]) ) .config({view: {stroke: null}}) .width(300) .height(300) return vl.hconcat( vl.layer(bar), vl.layer(pie) ).render(); }52:[{"id":"def5773e651eac21f3a784cc5275b627a1fb7c310b4d0b8910348ebef048ad9d952e1f2cae8b21e62fd54b442964c935ff76dbab69c8ae32d73014891714f4aa","href":"https://static.observableusercontent.com/files/def5773e651eac21f3a784cc5275b627a1fb7c310b4d0b8910348ebef048ad9d952e1f2cae8b21e62fd54b442964c935ff76dbab69c8ae32d73014891714f4aa","name":"MA-25-massachusetts-counties.json","type":"application/json","lastModified":1619068682110.646,"size":6940}] 47:{"id":"02ac7c6925d229f7","slug":"ds4200","title":"DS4200","thumbnail":"b1b23390ae19f30db2c2b88d3ca70032eb7660f2b84273e1c1235a6a81a3af1a","access_level":"public","create_time":"$D2021-04-22T05:18:02.110Z","update_time":"$D2021-04-24T00:19:52.985Z","view_time":null,"first_public_time":"$D2021-04-22T06:16:17.789Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3c32529f19d79e67","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1679,"publish_version":1679,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd7ef74f07d09318","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b1fe1cf689c7422f","login":"dannyqth","name":"Danny Qu","avatar_url":"https://avatars-next.observableusercontent.com/092ae848de90a02f99db052efb3e18a12e0a0b6ade7350c55dfe10f39d4623e0","tier":null,"role":"editor"},{"type":"individual","id":"fd7ef74f07d09318","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DS4200","cells":[{"id":1097,"value":"md` # DS4200`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"md`This project is a Recommendation Engine based on yelp dataset and we use cloud-based neo4j server to store and retrieve data. **More information can be found in our project report.**\n\nCreated by Ruizhe Qiu, Tianhao Qu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`## Data Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"md`Everything below is the overview for all restaurants stored in our cloud server. We reconstructed our data retrieved from neo4j server so that it is Javascript friendly.\n\n**Please patiently wait for 10-30 seconds, depending on your computer performance, for everything to load from the cloud server. There is a lot of data. Refresh the page if nothing is displayed.**\n\n**If you want to see the code for each part, hover your mouse to the left side of the cell and you will then see three dots, click on it and then click \"edit\" (Or simply click on the left side of the cell).**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md` ### Node\n\nImagine you are using neo4j, everything in the table below will be the nodes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"//The nodes of all data.\nTable(data.nodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"md` ### Link\n\nThese will be the links according to the neo4j definition.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"//The relationships of all data.\nTable(data.links)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"md` ### Star Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"md`Visualizations below are being created using vega-lite. Hover your mouse over different part of the chart to see details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"//The stars situation of all data.\nbarAndPiechart(data, \"stars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"md` ### Category Overview\n\nUse the horizontal scroll bar at the bottom of the visualization to see the full chart. Hover your mouse over bars/pies to see more details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"//The category situation of all data.\nbarAndPiechart(data, \"Food\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"md` ### Opening days Overview\n\nDistribution of opening days. Hover your mouse over bars/pies to see more details.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"//The work time situation of all data.\nbarAndPiechart(data, \"Hours\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md` ### Location Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"//The location situation of all data.\ngeometry(data.nodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md` #### Google Map\n\nWe integrated Google Map API to our front end. This visualization is very useful to locate precise location for these restaurants.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"//The location situation of all data on Google Map.\nallDataGoogle = {\n let div = html`

`;\n\n const mapHolder = [0];\n\n // Like Leaflet and Mapbox GL JS, Google Maps is very picky about\n // needing to be initialized on a div that's already included\n // in the page. So I yield the div first, to establish it in\n // the page.\n yield div;\n let map = new google.maps.Map(div, {\n center: { lng: -71, lat: 42.5 },\n zoom: 10\n });\n mapHolder[0] = map;\n \n const marker = thirdTypeFinalArray.nodes.map(\n p =>\n new google.maps.Marker({\n position: { lng: p.longitude, lat: p.latitude },\n map: mapHolder[0],\n title: p.name,\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"md`## Insight:\n#### Insight 1: \nMost restaurants in Boston are mainly located in the center of the city.\n\n#### Insight 2:\nMost of the food categories are evenly distributed in terms of numbers except a few popular food categories as well as generic categories (e.g. restaurants, food)\n\n#### Insight 3:\nThe user will be able to discover their own insight via specifying zip code, food type(category) as well as other attributes.\n\nFor instance: In the area with zip code 02115, the food type closest to Pizza is sandwich.\n\nIn Boston, restaurants that are similar to Taco Bell and are still open are The Lower Depths, Boloco, Chipotle, Currito, and Restaurante Montecri. And their user ratings are ranging from 3.5 to 4.5.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"md`## Task Abstraction:\n\n#### End User(Target Audience):\nThe customers who want to find some new restaurants. The restaurants who want to identify the average level of restaurants in Boston.\n\n#### Task 1:\nFind the common characteristic/trend, like the most popular food type and the layout, of restaurants around Boston. (Action: present and explore; Target: trend)\n\n#### Task 2:\nRecommend restaurants for users according to their preference. Find the common characteristic/trend of these restaurants, and find the food type which is most close to the given food type. (Action: present, explore (achived by database); Target: feature)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"md`## Code that supports all visualizations/UI above:\n\n*Click on the left side of the cell to see the source code. Do not try to modify anything as it might break the code.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"md`### First Type Search Filter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"//Find the ID of restaurants with given requirements.\nfilter_keyword = {\n var filters_keyword = [nullFilter(starfilter), nullFilter(cityfilter), nullFilter(categoryfilter)];\n var filters = data.nodes\n .filter(d => filters_keyword.includes(d.name))\n .map(d => d.ID);\n\n let selection = new Set(data.links.map(d => d.source));\n\n for (let filter of filters) {\n selection = new Set(\n data.links\n .filter(d => d.target === filter)\n .filter(d => selection.has(d.source))\n .map(d => d.source)\n );\n }\n\n return selection;\n //return filters;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"//Trans the ID to the whole node\nresult_filtered = {\n return result.filter(d => filter_keyword.has(d.ID));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"//All nodes and relationships to these selected restaurants.\nfilterData = buildDataArray(nodefilterer(), linkfilterer())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`### Import Attribute`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"//The list of category node.\ncategoryArrayOriginal = buildDataArrayOriginal(\"match (n:Food) return distinct n.categories order by n.categories\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"//The list of category name.\ncategoryArray = categoryArrayOriginal.records.map(d => d._fields[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"//The list of zipcode node.\nzipcodeArrayOriginal = buildDataArrayOriginal(\"MATCH ()-[r]-() WHERE EXISTS(r.ZIPCode) RETURN DISTINCT r.ZIPCode order by r.ZIPCode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"//The list of zipcode name.\nzipcodeArray = zipcodeArrayOriginal.records.map(d => d._fields[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"//The list of star node.\nstarArrayOriginal = buildDataArrayOriginal(\"match (n:stars) return distinct n.Stars order by n.Stars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"//The list of star name.\nstarArray = starArrayOriginal.records.map(d => d._fields[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"//The list of city node.\ncityArrayOriginal = buildDataArrayOriginal(\"match (n:City) return distinct n.city order by n.city\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"//The list of city name.\ncityArray = cityArrayOriginal.records.map(d => d._fields[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"//The list of time name.\ntimeArray = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\",\"Sunday\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"md`## Import All Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"//The original node list from Neo4j.\nallNodeOriginal = buildDataArrayOriginal(\"MATCH (n) RETURN n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"//The original relationships list from Neo4j.\nallRelationshipOriginal = buildDataArrayOriginal(\"MATCH ()-[r:Assoc]->() RETURN r\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"//The node list from Neo4j.\nallNode = allNodeOriginal.records","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"//The relationships list from Neo4j.\nallRelationship = allRelationshipOriginal.records","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"//All data from neo4j, contains nodes and relationships.\nall = allNode.concat(allRelationship)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"//The object contains nodes and relationships in {node, link} structure.\ndata = dealWithData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`## Import Filter Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"//Use the query to do the recommendation.\ngivenQuery = \n\"call {match (f:Food {categories:\"+addApostrophe(foodtype)+\"})<-[:Assoc]-(r:Restaurant)-[:Assoc]-> (f2:Food) where f2.categories <> 'Restaurants' and f2.categories <> 'Food' with f2, count(*) as nAssoc order by count(*) desc limit 5 return collect(f2.categories) as topcat} match (c:City)<-[rel1:Assoc {ZIPCode:\"+addApostrophe(zipcode)+\"}]-(r2:Restaurant)-[rel2:Assoc]->(f3:Food) with r2, c, f3, rel1, rel2 where f3.categories in topcat or f3.categories = \"+addApostrophe(foodtype)+\" match (h:Hours)<-[m:Assoc]-(r2)-[rel3:Assoc]->(s:stars) where h.name = \"+addApostrophe(time)+\" and time(head(split(m.Time, '-'))) <= time() + duration({hours:-4}) return r2, c, s, f3, m, rel1, rel2,rel3 order by s.Stars desc limit 10\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"//Get the data according to query.\nqueryArrayOriginal = buildDataArrayOriginal(givenQuery);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"//Deal with the original data.\nqueryArray = queryArrayOriginal.records","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"//Final array that include the data in {node, link} structure.\nfinalArray = dealWithDataWithParallel(queryArray);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"md` ## Import Third Type Search Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"//Query for third type search\nthirdQuery = \"call {match (f:Food)<-[:Assoc]-(r:Restaurant {name:\"+addApostrophe(Restaurant)+\"})-[:Assoc]->(c:City {city:\"+addApostrophe(cityForThird)+\"}) where f.categories <> 'Restaurants' and f.categories <> 'Food' return collect(f.categories) as cats} match (f2:Food)<-[:Assoc]-(r2:Restaurant)-[:Assoc]->(c2:City {city:\"+addApostrophe(cityForThird)+\"}) with r2, f2 where f2.categories in cats and r2.name <> \"+addApostrophe(Restaurant)+\" with id(r2) as rid, count(f2) as outgoing order by outgoing desc limit 10 match (s:stars)<-[rel1:Assoc]-(r3:Restaurant)-[rel2:Assoc]->(c3:City {city:'Boston'}) where rid = id(r3) with rel1, s, r3, rel2, c3 order by s.Stars desc limit 10 match (r3)-[rel3:Assoc]->(h3:Hours) where h3.name = \"+addApostrophe(timeForThird)+\" and time(head(split(rel3.Time, '-'))) <= time() + duration({hours:-4}) return r3, rel1, s, rel2, c3, h3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"//Read from neo4j by third query.\nthirdQueryArrayOriginal = buildDataArrayOriginal(thirdQuery);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"//Deal with the original data.\nthirdQueryArray = thirdQueryArrayOriginal.records","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"//Final array for third type search that include the data in {node, link} structure.\nthirdTypeFinalArray = dealWithDataWithParallel(thirdQueryArray);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`### Data Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"//Read from neo4j according to given query.\nfunction buildDataArrayOriginal(q) {\n const session3 = driver.session();\n const dataArrayOriginal = session3.run(q);\n return dataArrayOriginal;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"//Add apostrophe for string.\nfunction addApostrophe(d) {\n return \"'\" + d + \"'\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"//Combine node and relationship to one array\nfunction buildDataArray(node, link) {\n const dataArray = {nodes: node, links: link}\n return dataArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"//Count relationship related to node\nfunction countRelations(obj, array) {\n return array.links.filter(d => obj.ID === d.source || obj.ID === d.target).length\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"//Build relationship array with given filter.\nfunction linkfilterer() {\n var ids = result_filtered.map(d => d.ID);\n var pre_result = data.links.filter(\n a => ids.includes(a.source) || ids.includes(a.target)\n );\n return data.links.filter(\n a => ids.includes(a.source) || ids.includes(a.target)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"//Build nodes array with given filter.\nfunction nodefilterer() {\n var templist = [];\n var lin2 = linkfilterer();\n\n for (const i of lin2) {\n if (!templist.includes(i.source) || !templist.includes(i.target)) {\n templist.push(i.source);\n templist.push(i.target);\n }\n }\n var unique_temp = [];\n templist.forEach(c => {\n if (!unique_temp.includes(c)) {\n unique_temp.push(c);\n }\n });\n return data.nodes.filter(a => templist.includes(a.ID));\n // return templist;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"//Deal with the choice when users select no preference in first type search.\nfunction nullFilter(filter) {\n if (filter === \"No preference\") {\n return \"\";\n } else {\n return filter;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"md`### Vis Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"//Build geometry vis (for the location of restaurants).\nfunction geometry(data) {\n const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})\n .data(vl.topojson(MA).feature('cb_2015_massachusetts_county_20m'));\n \n var points = null;\n \n points = vl.markCircle({size: 9})\n .data(data)\n .encode(\n vl.longitude().fieldQ('longitude'),\n vl.latitude().fieldQ('latitude'),\n vl.tooltip([\n { field: \"name\", type: \"categorical\" },\n ])\n );\n \n return vl.layer(map, points)\n .project(vl.projection('albersUSA').translate(-7300, 2600).scale(23000))\n .width(300).height(300)\n .config({view: {stroke: null}})\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md` #### Geometry File`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"//The json file for MA map.\nMA = FileAttachment(\"MA-25-massachusetts-counties.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"//import map from google\ngoogle = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyB4JQkUKSUqHQmteJ5xdk4RdrFqHi04hdg').catch(\n () => window.google\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md` ### Neo4j Driver`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"//Neo4j driver builder.\nneo4j = {\n const neo4j = await require('neo4j-driver');\n return neo4j;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"//Neo4j driver to connect to server.\ndriver = neo4j.driver(\n \"neo4j+s://df82a806.databases.neo4j.io:7687\",\n neo4j.auth.basic(\"Reader\", \"Reader\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md` ### D3.js Set`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"//Decide the radius of node in network vis.\nradius = d3\n .scaleLinear()\n .domain(d3.extent(data.nodes, d => d.radius))\n .range([4, 20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"//Decide the x coordinate of node in network vis.\nx = d3\n .scalePoint()\n .domain(d3.group(data.nodes, d => d.Label).keys())\n .range([-width / 2 + 50, width / 2 - 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"//Decide the y coordinate of node in network vis.\ny = d3\n .scalePoint()\n .domain(d3.group(data.nodes, d => d.Label).keys())\n .range([-height / 2 + 50, height / 2 - 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"//The height of vis.\nheight = 680","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"//Decide the color of node in network vis.\ncolor = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n const res = d => scale(d.Label)\n res.scale = scale;\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"//Function to help the node move in network vis.\nreleasenode = simulation =>\n function(d) {\n d.fx = null;\n d.fy = null;\n simulation.alphaTarget(0.3).restart();\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"//Function to help the node move in network vis.\ndrag = simulation => {\n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n\n d.fixed = false;\n simulation.resume();\n // d.fx = null;\n // d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md` ### Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import { Search, Table, Checkbox, Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"import { Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null