{ const ol = d3.select(html`

`); const detailTable = d3.select(html``); function dataJoin(data, thing) { // list of similar countries ol.append('p') .text(`${activeCountry.name} `) .append('img') .attr("src", flagMetadataMap.has(activeCountry.name) ? flagMetadataMap.get(activeCountry.name).imageUrl : DEFAULT_IMAGE_URL) .attr("width", "100px"); ol.selectAll('li') // select all list elements (orange circle above) .data( Array.from(data) .map(d => new Object({country: d[0], similarity: d[1]})) .filter(d => d.country !== activeCountry.name) .sort((a, b) => b.similarity - a.similarity) .slice(0,5) ) // bind all our data values (blue circle above) .join('li') // a selection that merges the "enter" and "update" states .text(d => "") .append('button') .text(d => `${d.country}: ${d.similarity.toFixed(4)} `) .on("click", clicked) .append('img') .attr("src", d => flagMetadataMap.has(d.country) ? flagMetadataMap.get(d.country).imageUrl : DEFAULT_IMAGE_URL) .attr("width", "120px"); function clicked(event, d) { (viewof searchTerm).value = d.country; (viewof searchTerm).dispatchEvent(new Event("input")); dataJoin(activeData, d.country); } // table of flag properties detailTable.append(() => html` `); detailTable.selectAll('tr#data-rows') .data(Array.from(Object.entries(activeCountry))) .join('tr') .html(d => `

Flag Properties	${activeCountry.name} Value
${d[0]}	${d[1]}`) .on("click", detailClicked) .on("mouseover", (event, d) => d3.select(event.currentTarget) .style("background-color", "#bbbbbb")) .on("mouseout", (event, d) => d3.select(event.currentTarget) .style("background-color", "")); function detailClicked(event, d) { (viewof detailQuery).value = d[0]; (viewof detailQuery).dispatchEvent(new Event("input")); } } dataJoin(activeData, 0); return html` ${viewof searchTerm}${ol.node()} ${detailTable.node()} ${chartLegend}${chart} `; // }

Flag Properties

${activeCountry.name} Value

${d[0]}

${d[1]}`) .on("click", detailClicked) .on("mouseover", (event, d) => d3.select(event.currentTarget) .style("background-color", "#bbbbbb")) .on("mouseout", (event, d) => d3.select(event.currentTarget) .style("background-color", "")); function detailClicked(event, d) { (viewof detailQuery).value = d[0]; (viewof detailQuery).dispatchEvent(new Event("input")); } } dataJoin(activeData, 0); return html`

${viewof searchTerm}${ol.node()}

${detailTable.node()}

${chartLegend}${chart}

`; //

}