2e:null 2f:["$","title",null,{"children":"Where I've Been Map | Raphael Odini | Observable"}] 34: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(); }35: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 :( `36:[] 32:{"id":"e3d2e7b0005ece11","slug":"where-ive-been-map","title":"Where I've Been Map","thumbnail":"281cda20812bfcde4446bb2d9597bf0c3032ff0387cd683cedf34466ef1cc67d","access_level":"public","create_time":"$D2019-09-18T06:56:37.102Z","update_time":"$D2019-10-04T05:46:11.371Z","view_time":null,"first_public_time":"$D2019-09-18T12:20:37.693Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"0e52e5e33af91574","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":"starter_2024"},"version":300,"publish_version":300,"role":null,"authored":false,"authors":[{"type":"individual","id":"a93115718e55c049","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":null}],"members":[{"type":"individual","id":"a93115718e55c049","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`## Map helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"projection = d3\n .geoNaturalEarth1()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"countryColors = {\n return {\n \"lived\": \"#bcd4e6\",\n \"traveled\": \"#e5635e\",\n \"wishlist\": \"#88d8b0\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"personalTravelData = await d3.csv(\"https://gist.githubusercontent.com/raphodn/45da83cc150cbf26b8d8bfa80bc892d5/raw/9f054bc29d79d8a8dd724c6385074aae7dcb76b0/travel_data.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")\n// d3 = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"