31:T621,chart = { const tooltip = d3.select("body").append("div") .attr("class", "basic-tooltip"); const path = d3.geoPath(projection); const svg = d3.create("svg") .style("display", "block") .style("background-color", "rgb(188, 212, 230, 0.3)") // #bcd4e6 .attr("viewBox", [0, 0, width, height]); const g = svg.append("g"); // draw countries g.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => setCountryColor(d)) .attr("d", path) .on("mouseover", function(d) { // d3.select(this).attr("fill-opacity", 0.7); d3.select(this).attr("stroke", "black"); tooltip.html(setTooltipContent(d)) .style("left", (d3.event.pageX + 15) + "px") .style("top", (d3.event.pageY) + "px") .style("visibility", "visible"); }) .on("mousemove", function(d) { tooltip.style("left", (d3.event.pageX + 15) + "px") .style("top", (d3.event.pageY) + "px"); }) .on("mouseout", function(d) { // d3.select(this).attr("fill-opacity", 1); d3.select(this).attr("stroke", null); tooltip.style("visibility", "hidden"); }) // .append("title") // .text(d => d.properties.name) // draw borders g.append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 0.3) .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }32:T5ca,md` --- **Lived in** ${filterTravelDataByCategory('lived').length} countries.

List

${filterTravelDataByCategory('lived').map(t => t['country_name']).filter((value, index, self) => self.indexOf(value) === index).join(", ")}

**Traveled to** ${filterTravelDataByCategory('traveled').map(t => t['country_name']).filter((value, index, self) => self.indexOf(value) === index).length} different countries, on ${filterTravelDataByCategory('traveled').length} trips.

List

${filterTravelDataByCategory('traveled').map(t => t['country_name']).filter((value, index, self) => self.indexOf(value) === index).join(", ")}

**Wishlist of** ${filterTravelDataByCategory('wishlist').length} countries.

List

${filterTravelDataByCategory('wishlist').map(t => t['country_name']).filter((value, index, self) => self.indexOf(value) === index).join(", ")}

--- _last updated_: Sep 18, 2019 --- improvement ideas: - bar chart per year - select country to view trip details - change projection Overall carbon footprint? way too high :( `33:[] 2f:{"title":"Where I've Been Map","cells":[{"id":0,"value":"md`\n# Where I've Been Map\n\n🗺️ A simple 2D map highlighting the countries I've\nlived,\ntraveled, or\nwish to visit one day.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof countryFilter = select({\n title: \"Map: filter countries\",\n options: [\"\", \"lived\", \"traveled\", \"wishlist\"],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`## Map helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"projection = d3\n .geoNaturalEarth1()","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"function setTooltipContent(d) {\n // init\n let tooltipContent = `

${d.properties.name}

`;\n // find travel data\n const countryFound = filterCountryByIdInTravelData(d);\n if (countryFound.length) {\n if (countryFound[0]['visit_category'] === 'wishlist') {\n tooltipContent += '

✌️someday

';\n } else {\n const countryHistory = {\n lived: countryFound.filter(t => (t['visit_category'] === 'lived')),\n traveled: countryFound.filter(t => (t['visit_category'] === 'traveled'))\n }\n if (countryHistory.lived.length) {\n tooltipContent += '

🏡 lived

';\n }\n if (countryHistory.traveled.length) {\n tooltipContent += `

🧳 traveled x${countryHistory.traveled.length}

`;\n }\n }\n }\n return tooltipContent;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"function filterTravelDataByCategory(categoryString) {\n return personalTravelData\n .filter(t => (t['visit_category'] === categoryString))\n .sort((a, b) => (a['visit_year'] > b['visit_year']) ? 1 : -1)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"function filterCountryByIdInTravelData(d) {\n return personalTravelData.filter(c => parseInt(c['country_id']) === parseInt(d.id));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"// match on the country id\n// https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes\nfunction setCountryColor(d) {\n const countryFound = filterCountryByIdInTravelData(d);\n // return countryFound ? countryColors[countryFound['visit_category']] : 'white';\n if (countryFound.length) {\n if (!countryFilter || (countryFilter && (countryFilter === countryFound[0]['visit_category']))) {\n return countryColors[countryFound[0]['visit_category']];\n }\n }\n return 'white';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"countryColors = {\n return {\n \"lived\": \"#bcd4e6\",\n \"traveled\": \"#e5635e\",\n \"wishlist\": \"#88d8b0\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"personalTravelData = await d3.csv(\"https://gist.githubusercontent.com/raphodn/45da83cc150cbf26b8d8bfa80bc892d5/raw/9f054bc29d79d8a8dd724c6385074aae7dcb76b0/travel_data.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"world = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")\n// d3 = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}