2c:null 2d:["$","title",null,{"children":"Ingredient Interactions: An Exploration of Recipes (final) | InfoViz Spring 2021 | Observable"}] 32:Tf23,map2 = { const outerDiv = d3_5.create("div").attr("id", "outerDiv"); const svg = outerDiv.append("svg") .attr("width", 600) .attr("height", 350); //.style("float","left"); const legend = outerDiv.append("svg") .attr("class", "legend") .attr("height", 100) .attr("width", 100) .style("float","right"); legend .append("text") .attr("x", 10) .attr("y", 20) .text("Continent") .style("font-family", "sans-serif") .style('font-size', '10px') .style('font-weight','bold'); legend.selectAll('rect') .data(legend_hack) .enter() .append("rect") .attr("x", 10) .attr("y", function(d, i){ return i * 15 + 25;}) .attr("width", 10) .attr("height", 10) .style("fill", d => d.color); legend.selectAll('txt') .data(legend_hack) .enter() .append("text") .attr("x", 25) .attr("y", function(d, i){ return i * 15 + 35;}) .attr("height", 10) .text(d => d.continent) .style("font-family", "sans-serif") .style('font-size', '10px'); const resetbar = outerDiv.append('form').attr('onsubmit', 'return false;'); resetbar.append('input') .attr('type', 'button') .attr('value', 'Reset View') .on('click', function () { reset(); }); const path = d3_5.geoPath() .projection(projection); const topg = svg.append("g") .attr("class", "topg") .style("pointer-events", "all"); const circleR = 6; const colors = d3_5.scaleOrdinal() .domain(['Africa', 'Asia', 'Europe', 'North America', 'South America']) .range(['#DC9C76','#74A588','#42282F','#D6CCAD', '#D6655A']); topg.selectAll("path") .data(topojson.feature(topodata, topodata.objects.countries) .features) .enter().append("path") .attr("d", path); var defs = svg.append("defs"); var filter = defs.append("filter") .attr("id","blur") .attr("y", "-500%") .attr("x", "-500%") .attr("width","1000%") .attr("height","1000%"); filter.append("feGaussianBlur") .attr("stdDeviation","5") .attr("result","coloredBlur"); var feMerge = filter.append("feMerge"); feMerge.append("feMergeNode") .attr("in","coloredBlur"); feMerge.append("feMergeNode") .attr("in","SourceGraphic"); var circles = topg.selectAll("circle") .data(citydata) .enter() .append("circle") .attr("id", "city") .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("r", d => circleR * Math.sqrt(d.recipes/1500)) .style("fill", d => colors(d.continent)) //.style("stroke", '#202020') //.style("stroke-width", 0.5) .style("opacity", 0.8) .style("filter","url(#blur)"); /*const texts_widgets = topg .selectAll(".id") .data(citydata) .enter() .append("text") .attr("class", "labels") .style("font-family", "sans-serif") .style("font-size", "6pt") .attr("dx", "0em") .attr("dy", "0em") .style('fill', 'white') .style("cursor", "pointer") .attr("id", d => d.country) .attr("x", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("y", function(d) { return projection([d.lon, d.lat])[1]; }) .text(d => d.cuisine);*/ const zoom = d3_5.zoom() .scaleExtent([0.7, 8]) .on('zoom', function() { const { transform } = d3_5.event; topg // .selectAll('path') .attr('transform', transform); //topg.selectAll("circle") //.attr('transform', transform) //.attr('r', circleR / transform.k); }); svg.call(zoom); function reset() { svg.transition() .duration(750) .call(zoom.transform, d3_5.zoomIdentity); } return outerDiv.node(); }33:T792,foundational_ingredients = { const selection = vl.selectPoint().encodings('y').on('mouseover'); const colors = { domain: ['Africa', 'Asia', 'Europe', 'North America', 'South America'], range: ['#DC9C76','#74A588','#42282F','#D6CCAD', '#D6655A'] }; // HOW THE F DO YOU CHANGE FONT SIZES.... function plot(cuisine, fillColor) { return vl.markBar({cornerRadiusEnd: 2, fill: fillColor, height: 6}) .data(top10_df.filter(d => d.Cuisine === cuisine)) .params(selection) .encode( vl.x().fieldQ('Count').title(null), vl.y().fieldN('Ingredient').sort(vl.fieldQ("Count").order("descending")).title(null), vl.opacity().if(selection, vl.value(1)).value(0.15), vl.color().fieldN('continent').title('Continent') .scale(colors) ) .height(90) .width(80) } const palette = ['#42282F', '#74A588', '#D6CCAD', '#DC9C76', '#D6655A'] return vl.concat( plot("brazilian", palette[4]).title('Brazilian'), plot("mexican", palette[2]).title('Mexican'), plot("southern_us", palette[2]).title('Southern US'), plot("cajun_creole", palette[2]).title('Cajun & Creole'), plot("jamaican", palette[2]).title('Jamaican'), plot("irish", palette[0]).title('Irish'), plot("british", palette[0]).title('British'), plot("french", palette[0]).title('French'), plot("italian", palette[0]).title('Italian'), plot("spanish", palette[0]).title('Spanish'), plot("greek", palette[0]).title('Greek'), plot("russian", palette[0]).title('Russian'), plot("chinese", palette[1]).title('Chinese'), plot("korean", palette[1]).title('Korean'), plot("japanese", palette[1]).title('Japanese'), plot("vietnamese", palette[1]).title('Vietnamese'), plot("thai", palette[1]).title('Thai'), plot("filipino", palette[1]).title('Philippines'), plot("indian", palette[1]).title('Indian'), plot("moroccan", palette[3]).title('Moroccan'), ) .config({ concat: { columns: 4 } }) .render() }34:T12a4,chart_scatter = { await visibility(); const zoom = d3_5.zoom() .scaleExtent([0.5, 32]) .on("zoom", zoomed); const outerDiv = d3_5.create("div").attr("id", "outerDiv"); const resetbar = outerDiv.append('form').attr('onsubmit', 'return false;'); resetbar.append('input') .attr('type', 'button') .attr('value', 'Reset') .on('click', function () { reset(); }); const svg = outerDiv.append("svg") //const svg = d3.create("svg") .attr("viewBox", [-margin.left, margin.bottom, 800-margin.left, height]) .attr("float","left") .attr("width", 600); const legend = outerDiv.append("svg") .attr("class", "legend") .style("float","right") .attr("height", 100) .attr("width", 100); legend .append("text") .attr("x", 10) .attr("y", 20) .text("Continent") .style("font-family", "sans-serif") .style('font-size', '10px') .style('font-weight','bold'); legend.selectAll('rect') .data(legend_hack) .enter() .append("rect") .attr("x", 10) .attr("y", function(d, i){ return i * 15 + 25;}) .attr("width", 10) .attr("height", 10) .style("fill", d => d.color); legend.selectAll('txt') .data(legend_hack) .enter() .append("text") .attr("x", 25) .attr("y", function(d, i){ return i * 15 + 35;}) .attr("height", 10) .text(d => d.continent) .style("font-family", "sans-serif") .style('font-size', '10px'); // Add X axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", chartWidth) .attr("y", chartHeight+20) .text("Cuisine Dimension 2") .style("font-family", "sans-serif") .style('font-size', '14px') // Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("y", -40) .attr("x", -60) .text("Cuisine Dimension 1") .style("font-family", "sans-serif") .style('font-size', '14px') // Add title /*svg.append("svg:text") .attr("class", "title") .attr("x", 20) .attr("y", 20) .text("Fruit Sold Per Hour");*/ const gGrid = svg.append("g"); const gDot = svg.append("g") .attr("fill", "none") .attr("stroke-linecap", "round") gDot.selectAll(".point-point") .data(largestVoronoiData) .enter().append("circle") .attr("id", "dot") .attr("r", 5) .attr("transform", d => `translate(${d.point})`) .style("fill", d => d.colors.dark) yield outerDiv.node(); gDot.selectAll(".point-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.cuisine) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style('font-size', '12px') .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 8, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.dim2), yScale(d0.dim1)], labelRect)); } let i0 = 1, iMax = 100; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3_5.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3_5.zoomIdentity); function zoomed() { //gx.attr("transform", d3_5.event.transform); //gy.attr("transform", d3_5.event.transform); const zx = d3_5.event.transform.rescaleX(x).interpolate(d3_5.interpolateRound); const zy = d3_5.event.transform.rescaleY(y).interpolate(d3_5.interpolateRound); gDot.attr("transform", d3_5.event.transform).attr("stroke-width", 10 / d3_5.event.transform.k); gx.call(xAxis, zx); gy.call(yAxis, zy); gGrid.call(grid, zx, zy); } function reset() { svg.transition() .duration(750) .call(zoom.transform, d3_5.zoomIdentity); } }35:T3370,chart2 = { const links = data_links.map(d => Object.create(d)); const nodes = data_nodes.map(d => Object.create(d)); var connected = []; var isHovering = false; var k = 1; const outerDiv = d3_5.create("div").attr("id", "outerDiv"); const searchbar = outerDiv.append('form').attr('onsubmit', 'return false;'); searchbar.append('input') .attr('type', 'text') .attr('id', 'searchTerm') .attr('placeholder', 'Enter ingredient...') .on("keypress", function(e) { if (e.keyCode === 13) { searchIngredients(); } }); searchbar.append('input') .attr('type', 'button') .attr('value', 'Search') .on('click', function () { searchIngredients(); }); searchbar.append('input') .attr('type', 'button') .attr('value', 'Reset') .on('click', function () { reset(); }); const simulation = d3_5 .forceSimulation(nodes) .force( "link", d3_5 .forceLink(links) .id(d => d.id) ) .force( "charge", d3_5 .forceManyBody() .strength(-8) .distanceMin(50) ) .force("center", d3_5.forceCenter(width / 2, (network_height+300) / 2)); const svg = outerDiv .append("svg") .attr("viewBox", [0, 0, width, network_height+300]) .attr("float", "left") .attr("width",750); //.attr("height",600); const legend = outerDiv.append("svg") .attr("class", "legend") .style("float","right") .attr("height", 100) .attr("width", 100); legend .append("text") .attr("x", 10) .attr("y", 20) .text("Continent") .style("font-family", "sans-serif") .style('font-size', '10px') .style('font-weight','bold'); legend.selectAll('rect') .data(legend_hack) .enter() .append("rect") .attr("x", 10) .attr("y", function(d, i){ return i * 15 + 25;}) .attr("width", 10) .attr("height", 10) .style("fill", d => d.color); legend.selectAll('txt') .data(legend_hack) .enter() .append("text") .attr("x", 25) .attr("y", function(d, i){ return i * 15 + 35;}) .attr("height", 10) .text(d => d.continent) .style("font-family", "sans-serif") .style('font-size', '10px'); const g = svg.append("g"); //////////////////////////////////////////////////////////////////////////////// // GRAPH //////////////////////////////////////////////////////////////////////////////// // Rendering functions var reset_node_opacity = function(d) { return 1; }; var reset_link_opacity = function(d) { return 0.6; }; const link = g .append("g") .selectAll("line") .data(links) .join("line") .attr("value", d => d.value) .attr("target", d => d.target.id) .attr("source", d => d.source.id) .attr("stroke", "rgba(0,0,0,0.2)") .attr("stroke-width", d => +d.value) .attr("stroke-opacity", d => reset_link_opacity(d)); const node = g .append("g") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("stroke-width",0) .selectAll("circle") .data(nodes) .join("circle") .style("cursor", "pointer") .attr("id", d => d.id) .attr("r", d => Math.log(d.frequency / 2)) .attr("fill", color) .call(drag_v5(simulation)); const texts_widgets = g .selectAll(".id") .data(nodes) .enter() .append("text") .attr("class", "labels") .style("font-family", "sans-serif") .style("font-size", "4pt") .attr("dx", 8) .attr("dy", "0.35em") .style('fill', 'gray') .style("cursor", "pointer") .attr("id", d => d.id) .text('') .call(drag_v5(simulation)); ///////////////////////////////////////////////////////////////////////////////////// ///// UX FUNCTIONS ///////////////////////////////////////////////////////////////////////////////////// const reset_all_opacity = function() { d3_5.selectAll('circle').attr('opacity', d => reset_node_opacity(d)); d3_5.selectAll('line').attr('stroke-opacity', d => reset_link_opacity(d)); if (k <= 2) { //d3_5.selectAll('.labels').style('opacity', 0); d3_5.selectAll('.labels').text(''); } else { //d3_5.selectAll('.labels').style('opacity', 1); //d3_5.selectAll('.labels').text(d => d.id); d3_5.selectAll('.labels').text(d => (+(d.frequency) > 300) ? d.id : '').style('opacity', 1); } }; const reset_other_styles = function() { d3_5.selectAll('line').attr("stroke", "rgba(0,0,0,0.2)").attr("stroke-width", d => +d.value); d3_5.selectAll('.labels').style('font-weight','regular').style("font-size", "4pt").style('fill', 'gray').style('font-weight','normal'); d3_5.selectAll('circle').attr('fill', color).attr('stroke-width', 0); }; const hide_all_light = function() { d3_5.selectAll('circle').attr('opacity', 0.08); d3_5.selectAll('line').attr('stroke-opacity', 0.03); d3_5.selectAll('.labels').style('opacity', 0.03); }; var restore_default_display = function() { d3_5.selectAll('.legend_session').attr('active', 'no'); d3_5.selectAll('.legend_channel').attr('active', 'no'); reset_all_opacity(); reset_other_styles(); }; ///////////////////////////////////////////////////////////////////////////////////// ///// INTERACTIONS ///////////////////////////////////////////////////////////////////////////////////// var selection = null; const selected = d => selection === d; var neighbors_nodes_id = []; texts_widgets.on('click', (e, d) => { onClickHandler(e, 'orange'); }); node.on('click', (e, d) => { onClickHandler(e, 'orange'); }); function searchIngredients() { var term = document.getElementById('searchTerm').value; // term entered in search text box var foundNodes = nodes.filter(function (d, i) { return d.label.toLowerCase().includes(term.toLowerCase()); }); // highlight the selected node if (foundNodes != false) { selection = term; restore_default_display(); hide_all_light(); neighbors_nodes_id = []; foundNodes.forEach(d => { let foundNode = d3_5.selectAll('circle[id="' + d.id + '"]'); foundNode .attr('opacity', 1) .attr('fill', 'orange') .attr("stroke", 'red') .attr("stroke-width", 5); var links_src = d3_5.selectAll('line[source="' + d.id + '"]'); var links_tar = d3_5.selectAll('line[target="' + d.id + '"]'); links_src.attr('stroke-opacity','1').attr("stroke", "black"); links_tar.attr('stroke-opacity','1').attr("stroke", "black"); links_src.each(e => { neighbors_nodes_id.push(e.target.id); d3_5.selectAll('circle[id="' + e.target.id + '"]') .attr('opacity', reset_node_opacity(e.target)) .attr('fill', 'orange'); }); links_tar.each(e => { neighbors_nodes_id.push(e.source.id); d3_5.selectAll('circle[id="' + e.source.id + '"]') .attr('opacity', reset_node_opacity(e.source)) .attr('fill', 'orange'); }); // Highlight selected node label texts_widgets.filter(w => w.id == d.id) .text(d => d.id) .style('opacity', 1) .style('font-weight','bold') .style('font-size','10pt') .style('fill','black'); // Highlight neighbors labels, but only if 1 node is selected (otherwise this gets crazy) if (foundNodes.length == 1) { neighbors_nodes_id.forEach(e => texts_widgets.filter(w => w.id == e) .text(d => d.id) .style('opacity', 1) .style('font-weight','bold') .style('font-size','10pt') .style('fill','black') ); } }); } } function onClickHandler(e, nodecolor) { if (selection == e.id) { d3_5.selectAll('circle[id="' + selection + '"]').attr("stroke-width", 0); selection = null; onMouseOut(e); } else { restore_default_display(); selection = e.id; d3_5.selectAll('circle[id="' + e.id + '"]') .attr("stroke", 'red') .attr("stroke-width", 5); onMouseOver(e); } } node.on('mouseover', d => { if (!selection) { onMouseOver(d); } /*else if (neighbors_nodes_id.includes(d.id)) { onMouseOverNeighbors(d); }*/ }); texts_widgets.on('mouseover', d => { if (!selection && k > 2 && !isHovering) { onMouseOver(d); } }); var last_targeted_node; function onMouseOver(d) { last_targeted_node = d; neighbors_nodes_id = []; isHovering = true; // the hover interaction is not active if a node is selected hide_all_light(); // Higlight basic links d3_5.selectAll('circle[id="' + d.id + '"]') .attr('opacity', 1) .attr('fill', 'orange'); var links_src = d3_5.selectAll('line[source="' + d.id + '"]'); var links_tar = d3_5.selectAll('line[target="' + d.id + '"]'); //links_src.attr('stroke-opacity', dd => reset_link_opacity(dd)); //links_tar.attr('stroke-opacity', dd => reset_link_opacity(dd)); links_src.attr('stroke-opacity','1').attr("stroke", "black"); links_tar.attr('stroke-opacity','1').attr("stroke", "black"); links_src.each(e => { neighbors_nodes_id.push(e.target.id); d3_5.selectAll('circle[id="' + e.target.id + '"]') .attr('opacity', reset_node_opacity(e.target)) .attr('fill', 'orange'); }); links_tar.each(e => { neighbors_nodes_id.push(e.source.id); d3_5.selectAll('circle[id="' + e.source.id + '"]') .attr('opacity', reset_node_opacity(e.source)) .attr('fill', 'orange'); }); // Highlight selected node label texts_widgets.filter(w => w.id === d.id) .text(d => d.id) .style('opacity', 1) .style('font-weight','bold') .style('font-size','10pt') .style('fill','black'); // Highlight neighbors labels neighbors_nodes_id.forEach(e => texts_widgets.filter(w => w.id === e) .text(d => d.id) .style('opacity', 1) .style('font-weight','bold') .style('font-size','10pt') .style('fill','black') ); } function onMouseOverNeighbors(d) { var temp_neighbors = []; // the hover interaction is not active if a node is selected // Higlight basic links d3_5.selectAll('circle[id="' + d.id + '"]').attr('opacity', 1); var links_src = d3_5.selectAll('line[source="' + d.id + '"]'); var links_tar = d3_5.selectAll('line[target="' + d.id + '"]'); links_src.attr('stroke-opacity', dd => reset_link_opacity(dd)); links_tar.attr('stroke-opacity', dd => reset_link_opacity(dd)); links_src.each(e => { temp_neighbors.push(e.target.id); d3_5.selectAll('circle[id="' + e.target.id + '"]').attr( 'opacity', reset_node_opacity(e.target) ); }); links_tar.each(e => { temp_neighbors.push(e.source.id); d3_5.selectAll('circle[id="' + e.source.id + '"]').attr( 'opacity', reset_node_opacity(e.source) ); }); // Highlight selected node label texts_widgets.filter(w => w.id === d.id).text(d => d.id).style('opacity', 1); // Highlight neighbors labels temp_neighbors.forEach(e => texts_widgets.filter(w => w.id === e).text(d => d.id).style('opacity', 1) ); } node.on('mouseout', d => { if (!selection) { onMouseOut(d); } }); texts_widgets.on('mouseout', d => { if (!selection && k > 2 && !isHovering) { onMouseOut(d); } }); function onMouseOut(d) { isHovering = false; if (!selection) { restore_default_display(); } /*else if (neighbors_nodes_id.includes(d.id)) { hide_all_light(); onMouseOver(last_targeted_node); }*/ } 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); texts_widgets.attr("x", d => d.x).attr("y", d => d.y); }); var zoom = d3_5.zoom() .scaleExtent([-8 / 2, 4]) .on("zoom", zoomed); svg.call(zoom); //var g = svg.append("g"); function reset() { selection = null; restore_default_display(); document.getElementById('searchTerm').value = ''; document.getElementById('searchTerm').placeholder = 'Enter ingredient...'; svg.transition() .duration(750) .call(zoom.transform, d3_5.zoomIdentity); } function zoomed() { g.attr("transform", d3_5.event.transform); k = d3_5.event.transform.k; //console.log("k = " + k); if (!isHovering && !selection) { if (k > 2) { d3_5.selectAll('.labels').text(d => (+(d.frequency) > 300) ? d.id : '').style('opacity', 1); } else { d3_5.selectAll('.labels').text('').style('opacity', 0); } } } invalidation.then(() => simulation.stop()); return outerDiv.node(); }36:T5d0,{ // this doesn't work d3.selectAll('g.mark-text.role-mark') .data(largestVoronoiData) .enter().append("text") .text(d => d.country) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.dim2), yScale(d0.dim1)], labelRect)); } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }) }37:T45d,parseLargestVoronoi = (flatData, voronoiData) => { let output = {}; for (let i = 0, l = flatData.columns.length; i < l; i++){ output[flatData.columns[i]] = {area: 0} } for (let i = 0, l = voronoiData.length; i < l; i++){ let o = {}, cell = voronoiData[i], area = geometric.polygonArea(cell), cuisine = cell.data.cuisine; if (area > output[cuisine].area){ output[cuisine].centroid = geometric.polygonCentroid(cell); output[cuisine].point = [xScale(cell.data.dim2), yScale(cell.data.dim1)]; output[cuisine].angle = geometric.lineAngle([output[cuisine].point, output[cuisine].centroid]); output[cuisine].area = area; output[cuisine].polygon = cell; output[cuisine].colors = colors[cell.data.continent]; output[cuisine].continent = cell.data.continent; output[cuisine].country = cell.data.country; output[cuisine].ingredients = cell.data.ingredients; } } let output2 = []; for (let cuisine in output){ output[cuisine].cuisine = cuisine; output2.push(output[cuisine]); } return output2; }38:Ta87,md` ## Resources and notes How to embed notebooks: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks ### For the map viz: Some guides we used: - https://observablehq.com/@cse412/cse-412-section-4-interactive-vega-lite - https://observablehq.com/@manzt/mcv-choropleth-map-with-barchart-using-vega-embed - https://observablehq.com/@uwdata/cartographic-visualization - https://observablehq.com/@t829702/map-pan-zoom-with-cities-d3-v5 - https://simplemaps.com/data/world-cities - https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization/ ### For the foundational ingredients: 04/16 (KS): I combined a couple of ingredients that were "obviously" the same (e.g. unsalted butter/salted butter/butter, pepper/black pepper/ground black pepper, extra large eggs/large eggs/eggs, large garlic cloves/garlic cloves/garlic, scallions/green onions), which changed these a little Some guides for this section: - Faceted horizontal bar charts: https://observablehq.com/@observablehq/layers-facets-concat?collection=@observablehq/observable-for-vega-lite - https://observablehq.com/@uwdata/interaction ### For the similarity plot 04/11 katherine Update - made this chart in d3 (see 3rd chart) w/ non-overlapping labels, but it needs some more styling Possibly relevant: https://observablehq.com/@stuartathompson/preventing-label-overlaps-in-d3 https://observablehq.com/@oliviafvane/hacking-a-vega-lite-map-label-positioning-custom-fonts-stri https://observablehq.com/@d3/slope-chart (see dodge function) http://bl.ocks.org/pnavarrc/5913636 https://observablehq.com/@sjengle/interactivity https://observablehq.com/@d3/learn-d3-interaction https://observablehq.com/@giorgiofighera/histogram-with-tooltips-and-bars-highlighted-on-mouse-over (tooltips) ### For the network: Some guides: - https://observablehq.com/@kacase/star-architecture-in-architecture-research - https://observablehq.com/@ilogre/force-directed-graph - https://stackoverflow.com/questions/46005546/d3-v4-get-current-zoom-scale/46005996/ - https://observablehq.com/@bmschmidt/calculating-label-occlusion-across-zoom-levels-with-3d-r-tr ### TODO: - Maybe...make labels not overlap - Lucy 4/25: I tried to make the graph faster to navigate (before it was slow and sometimes when you hover on a node, it does not highlight because the mouse is on a node label on top of the node instead of the node itself.) However, in the process of making it faster, I ended up making it so that when the nodes get highlighted (during zoom in), the reset doesn't show the smaller labels of everyone again... dunno if we want to keep it this way. - if a search is not found, say something to the user? `39:[{"id":"84d71de522bd968fbff130d2461cfd11aa868baeeb406567f888c3116ba02708f2a5782c992463339a7801a03077d60cdc64b70ca5e288b3bd8f7a1cf6950dc7","href":"https://static.observableusercontent.com/files/84d71de522bd968fbff130d2461cfd11aa868baeeb406567f888c3116ba02708f2a5782c992463339a7801a03077d60cdc64b70ca5e288b3bd8f7a1cf6950dc7","name":"dim_reduct_vectors@7.csv","type":"text/csv","lastModified":1620090960252.466,"size":4306},{"id":"0d50b67b671572a1677257e2d758a3ea8740434a4d93a0321e480e42dfc338a13f0ba48a50263d69d19493b5f8c3e750ca7a4bd57e6181ba89e99df59de8abae","href":"https://static.observableusercontent.com/files/0d50b67b671572a1677257e2d758a3ea8740434a4d93a0321e480e42dfc338a13f0ba48a50263d69d19493b5f8c3e750ca7a4bd57e6181ba89e99df59de8abae","name":"citydata.csv","type":"text/csv","lastModified":1620090960252.466,"size":1289},{"id":"3d8c965485926b3ed7907343a03f94e0a544c823d5a72ed76399d8f28feba37a5d5b56bc076d5a89f32476e726fbfca459959d04d12d66ff21a61b3f951f09cd","href":"https://static.observableusercontent.com/files/3d8c965485926b3ed7907343a03f94e0a544c823d5a72ed76399d8f28feba37a5d5b56bc076d5a89f32476e726fbfca459959d04d12d66ff21a61b3f951f09cd","name":"food_network_npmi_nodes@2.csv","type":"text/csv","lastModified":1620090960252.466,"size":32068},{"id":"55d6d26ac224cfea107bf79e151f908a80061a557a4d0e2af2f85ea29aa42eb8e9e219d6c7a44b082139a8fed0fb78b2e9a6850ff221a3590301e9395724ebb0","href":"https://static.observableusercontent.com/files/55d6d26ac224cfea107bf79e151f908a80061a557a4d0e2af2f85ea29aa42eb8e9e219d6c7a44b082139a8fed0fb78b2e9a6850ff221a3590301e9395724ebb0","name":"top10_ing@1.csv","type":"text/csv","lastModified":1620090960252.466,"size":6198},{"id":"540845e72ee828f5f6af6100deaaa31cf02b0dae158719439f0dbcfed81432e214faa8e8621fb48ff22f4813ba91b587a42ab9cc2fb54bb1d40a6bf501a95a07","href":"https://static.observableusercontent.com/files/540845e72ee828f5f6af6100deaaa31cf02b0dae158719439f0dbcfed81432e214faa8e8621fb48ff22f4813ba91b587a42ab9cc2fb54bb1d40a6bf501a95a07","name":"totals@1.csv","type":"text/csv","lastModified":1620090960252.466,"size":513},{"id":"b75aa198c3a874e4cac2a8a90643672b4d55257e3aa90621aef058dba8060f9d35083cc84005d47c9b57d616ca94892c897511fe2257be71ea710107cce5f182","href":"https://static.observableusercontent.com/files/b75aa198c3a874e4cac2a8a90643672b4d55257e3aa90621aef058dba8060f9d35083cc84005d47c9b57d616ca94892c897511fe2257be71ea710107cce5f182","name":"food_network_npmi.csv","type":"text/csv","lastModified":1620090960252.466,"size":181652}] 30:{"id":"6ff8d3fcb0277a42","slug":null,"title":"Ingredient Interactions: An Exploration of Recipes (final)","thumbnail":"1df1a766d67e45b272431fa1bb875c5e8410868600970ab8e402597bb3d3dd5e","access_level":"unlisted","create_time":"$D2021-05-04T01:16:00.252Z","update_time":"$D2021-05-04T02:23:11.115Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"741ae1fc36a7b823","login":"info247-spring21","name":"InfoViz Spring 2021","avatar_url":null,"tier":"pro_2024"},"version":2722,"publish_version":2722,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a4545304ab4097b","login":"kwsong","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5ec12b257a9d5b9b9d927e14181b0c662ec9384fdade5063962c020638368d41","tier":null}],"members":[{"type":"individual","id":"6a4545304ab4097b","login":"kwsong","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5ec12b257a9d5b9b9d927e14181b0c662ec9384fdade5063962c020638368d41","tier":null,"role":"editor"},{"type":"individual","id":"3d6e86363edb0d5f","login":"lucy3","name":"Li Lucy","avatar_url":"https://avatars-next.observableusercontent.com/18a178f593fed9223ccd93d87a300883de293b5226459080858ed802164c1962","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Ingredient Interactions: An Exploration of Recipes (final)","cells":[{"id":0,"value":"md`# Ingredient Interactions: An Exploration of Recipes (final)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2106,"value":"md`\n## Introduction \n\nThese visualizations show a cross-cultural analysis of food based on a large Kaggle dataset of recipe ingredients. The dataset contains cuisine labels, followed by ingredient names, for individual dishes, but without dish titles or ingredient amounts. \n\nThis map shows the countries, colored by continent, involved in our dataset, which contains thousands of recipes from cuisines around the world. Hover over each colored country to see the number of recipes our dataset has for it. Note that technically Russia is in both Asia and Europe, but we attach one continent per country for easier color-coding. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2455,"value":"projection = d3_5.geoMercator()\n .center([0, 5])\n .scale(100)\n .rotate([115,0])\n .translate([310,200]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2457,"value":"topodata = d3_5.json(\"https://gist.githubusercontent.com/d3noob/e549dc220052ac8214b9db6ce47d2a61/raw/f346e6ccd64feb7d30a6376d67c5313bda1f4875/world-110m2.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2459,"value":"citydata = d3_parse.csvParse(await FileAttachment(\"citydata.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2461,"value":"topojson = require(\"topojson@3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2616,"value":"map_tooltip = {\n map2\n \n const tooltip = d3_5.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n d3_5.selectAll(\"circle#city\")\n .on(\"mouseover\", function(d){\n console.log(\"hover\");\n tooltip\n .style(\"visibility\", \"visible\")\n .style(\"background-color\", \"#fff\")\n .style(\"color\", \"#000\")\n .style(\"font-family\", \"sans-serif\")\n .style(\"border\", \"1px solid #BEBEBE\")\n .style(\"z-index\", 1)\n .style(\"padding\", \"5px\")\n .style(\"font-size\", \"10px\")\n .style(\"max-width\", \"300px\")\n .html(`

Cuisine: ${d.cuisine}
Country: ${d.country}
Recipes: ${d.recipes}

Notable Ingredients: ${d.ingredients}

`);\n })\n .on(\"mousemove\", function(){\n tooltip\n .style(\"top\", (d3_5.event.pageY-10)+\"px\").style(\"left\",(d3_5.event.pageX+10)+\"px\");\n })\n .on(\"mouseout\", function(){\n return tooltip.style(\"visibility\", \"hidden\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## What ingredients co-occur together?\n\n### Instructions\n\nThis network looks at ingredient co-occurrence, as measured by a metric called normalized pointwise mutual information (NPMI). This graph is a network of 922 ingredients that occur at least 50 times in our dataset, and only shows edges where the NPMI between ingredients is above 0.25. \n\nNodes are colored by continent, if at least 75% of their recipes are in that continent. Gray nodes are ingredients that are used across continents. \n\nZoom in to see labels of the most popular nodes (top ~25%), and hover over nodes to see their neighbors. You can also search for ingredients in the search bar. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"d3 = require('d3-fetch', \"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"pca_data = d3_parse.csvParse(await FileAttachment(\"dim_reduct_vectors@7.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"country_totals = d3_parse.csvParse(await FileAttachment(\"totals@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"d3_parse = require(\"d3-dsv@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"geoIds = new Object({\n //'Afghanistan': 4,\n //'Argentina': 32,\n //'Australia': 36,\n //'Canada': 124,\n 'Brazil': 76,\n 'China': 156,\n //'Colombia': 170,\n //'Egypt': 818,\n //'Germany': 276,\n 'France': 250,\n 'Greece': 300,\n 'Jamaica': 388,\n 'Japan': 392,\n 'India': 356,\n 'Ireland': 372,\n 'Italy': 380,\n 'Mexico': 484,\n 'Morocco': 504,\n //'South Africa': 710,\n //'USA': 840\n 'Philippines': 608,\n 'Russia': 643,\n 'South Korea': 410,\n 'Spain': 724,\n 'Thailand': 764,\n 'United Kingdom': 826,\n 'United States': 840,\n 'Vietnam': 704\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"world = await (await fetch('https://vega.github.io/vega-datasets/data/world-110m.json')).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"embed = require('vega-embed@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"top10_df = d3_parse.csvParse(await FileAttachment(\"top10_ing@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"{\n // Used browser DevTools to identify the SVG g classes for the relevant layers\n\n d3.selectAll('g.mark-text.role-axis-label')\n .selectAll('text')\n .style('text-transform', 'capitalize')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"circles = d3.select(chart_scatter).selectAll(\"#dot\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"highlight = {\n const svg = d3.select(chart_scatter);\n \n // used to test out interactivity in this cell\n const status = html`highlight: none`;\n \n // event.namespace allows us to add multiple functions for one event\n // only needed in examples like this where some events trigger multiple functions\n circles.on(\"mouseover.highlight\", function(event, d) { \n d3.select(this)\n .raise() // bring to front\n .style(\"r\", 6)\n \n // show what we interacted with\n d3.select(status).text(\"highlight: \" + d.cuisine);\n });\n\n circles.on(\"mouseout.highlight\", function(event, d) {\n d3.select(this).style(\"r\", 5);\n d3.select(status).text(\"highlight: none\");\n });\n \n return status;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"chartHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"chartWidth = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"margin = ({\n left: 100,\n bottom: 50,\n right: 50,\n top: 50\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"legend_hack = [\n {\n continent: 'Africa',\n color: '#DC9C76'\n },\n {\n continent: 'Asia',\n color: '#74A588'\n },\n {\n continent: 'Europe',\n color: '#42282F'\n },\n {\n continent: 'North America',\n color: '#D6CCAD'\n }, \n {\n continent: 'South America',\n color: '#D6655A'\n }\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"data = pca_data;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"x = d3.scaleLinear()\n .domain([-0.35, 0.8])\n .range([0, chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"y = d3.scaleLinear()\n .domain([0.53, 0.9])\n .range([chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"z = d3.scaleOrdinal()\n .domain(['Africa', 'Asia', 'Europe', 'North America', 'South America'])\n .range(['#DC9C76','#74A588','#42282F','#D6CCAD', '#D6655A'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisTop(x).ticks(12))\n .call(g => g.select(\".domain\").attr(\"display\", \"none\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"yAxis = (g, y) => g\n .call(d3.axisRight(y).ticks(12 * k))\n .call(g => g.select(\".domain\").attr(\"display\", \"none\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"grid = (g, x, y) => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g\n .selectAll(\".x\")\n .data(x.ticks(12))\n .join(\n enter => enter.append(\"line\").attr(\"class\", \"x\").attr(\"y2\", chartHeight),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d)))\n .call(g => g\n .selectAll(\".y\")\n .data(y.ticks(12 * k))\n .join(\n enter => enter.append(\"line\").attr(\"class\", \"y\").attr(\"x2\", chartWidth),\n update => update,\n exit => exit.remove()\n )\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"k = height / width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"xScale = d3.scaleLinear()\n .domain([-0.35, 0.8])\n .range([0, chartWidth]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"yScale = d3.scaleLinear()\n .domain([0.53, 0.9])\n .range([chartHeight,0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"xAxisGenerator = d3.axisBottom(xScale)\n .tickValues(d3.range(-0.4, 0.8, 0.1));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"yAxisGenerator = d3.axisLeft(yScale)\n .tickValues(d3.range(0.5, 0.9, 0.05));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"flatData = parseFlatData(pca_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"voronoiData = {\n const v = [...new d3.Delaunay(arr.flatten(flatData.map(d => [xScale(d.dim2), yScale(d.dim1)]))).voronoi([0, 0, chartWidth, chartHeight]).cellPolygons()];\n for (let i = 0, l = v.length; i < l; i++){\n v[i].data = flatData[i];\n }\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"largestVoronoiData = parseLargestVoronoi(flatData, voronoiData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"colors = ({\n 'Africa': {\n light: '#DC9C76',\n dark: '#DC9C76'\n },\n 'Asia': {\n light: '#74A588',\n dark: '#74A588'\n },\n 'Europe': {\n light: '#42282F',\n dark: '#42282F'\n },\n 'North America': {\n light: '#D6CCAD',\n dark: '#D6CCAD'\n }, \n 'South America': {\n light: '#D6655A',\n dark: '#D6655A'\n }, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"parseFlatData = data => {\n const output = [],\n columns = [];\n \n for (let i0 = 0, l0 = data.length; i0 < l0; i0++){\n let d0 = data[i0];\n \n output.push({\n cuisine: d0.Cuisine,\n continent: d0.Continent,\n country: d0.Country,\n dim1: +d0['Dim 1'],\n dim2: +d0['Dim 2'],\n ingredients: d0['Cuisine-Specific Ingredients'],\n colors: colors[d0.Continent],\n });\n columns.push(d0.Cuisine);\n }\n \n output.columns = columns;\n return output; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"geometric = require(\"geometric@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"arr = require(\"arraygeous@0\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"last = array => array[array.length - 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"drag_v5 = simulation => {\n \n function dragstarted(d) {\n if (!d3_5.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3_5.event.x;\n d.fy = d3_5.event.y;\n }\n \n function dragended(d) {\n if (!d3_5.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3_5.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"data_nodes = d3_parse.csvParse(await FileAttachment(\"food_network_npmi_nodes@2.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"data_links = d3_parse.csvParse(await FileAttachment(\"food_network_npmi.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"network_height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"color = {\n const scale = ['#42282F', '#74A588', '#D6CCAD', '#DC9C76', '#D6655A', '#A9A9A9']\n return d => scale[d.group];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"d3_5 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"