Ingredient Interactions: An Exploration of Recipes (final) / InfoViz Spring 2021

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();

}

projection = d3_5.geoMercator()

.center([0, 5])

.scale(100)

.rotate([115,0])

.translate([310,200]);

html`<style>

path {

stroke: white;

stroke-width: 0.25px;

stroke-linejoin: round;

stroke-linecap: round;

vector-effect: non-scaling-stroke;

fill: Gainsboro;

}

</style>`

citydata = d3_parse.csvParse(await FileAttachment("citydata.csv").text())

map_tooltip = {

map2

const tooltip = d3_5.select("body").append("div")

.attr("class", "svg-tooltip")

.style("position", "absolute")

.style("visibility", "hidden");

d3_5.selectAll("circle#city")

.on("mouseover", function(d){

console.log("hover");

tooltip

.style("visibility", "visible")

.style("background-color", "#fff")

.style("color", "#000")

.style("font-family", "sans-serif")

.style("border", "1px solid #BEBEBE")

.style("z-index", 1)

.style("padding", "5px")

.style("font-size", "10px")

.style("max-width", "300px")

.html(`<div><b>Cuisine</b>: ${d.cuisine}<br><b>Country</b>: ${d.country}<br><b>Recipes</b>: ${d.recipes}</div>`);

})

.on("mousemove", function(){

tooltip

.style("top", (d3_5.event.pageY-10)+"px").style("left",(d3_5.event.pageX+10)+"px");

})

.on("mouseout", function(){

return tooltip.style("visibility", "hidden");

});

}

One platform to build and deploy the best data apps