2e:null 2f:["$","title",null,{"children":"World Stadium Location Visualization Tutorial | Kyungho Lee | Observable"}] 34:T477,{ const projection = d3.geoNaturalEarth1(); const path = d3.geoPath(projection); // we need to know what the biggest value is in the dataset const maxCapacity = d3.max(stadiumDataRaw, o => o.capacity); // the biggest value will have a radius of 6, all others will be scaled accordingly const circleScale = d3.scaleSqrt() .domain([0, maxCapacity]) .range([0, 6]); const circles = stadiumDataRaw.map(d => { const position = projection([d.long, d.lat]); const [x, y] = position; const type = d.kind.replace(" ", "").toLowerCase(); return svg``; }); // d3.geoGraticule10 is a utiliy function to generate a grid line at every 10 lat/long coordinates return html` `; }35:[] 32:{"id":"d6b60d2ae00c6c92","slug":"world-stadium-location-visualization-tutorial","title":"World Stadium Location Visualization Tutorial","thumbnail":"cccf3775f9d2f71f4dcce935068049f4b8e76f3526866d9e907c08bfdc87cdc0","access_level":"public","create_time":"$D2022-04-27T00:01:11.582Z","update_time":"$D2022-04-27T02:03:20.808Z","view_time":null,"first_public_time":"$D2022-04-27T00:53:32.855Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ad919f6c2c0f661e","login":"52541137d39f87c3","name":"Kyungho Lee","avatar_url":"https://avatars-next.observableusercontent.com/5d40311e0c88d94528d714eeb435b7c6b4a9bee339374629bbd29589f3590d03","tier":"starter_2024"},"version":51,"publish_version":51,"role":null,"authored":false,"authors":[{"type":"individual","id":"52541137d39f87c3","login":"52541137d39f87c3","name":"Kyungho Lee","avatar_url":"https://avatars-next.observableusercontent.com/5d40311e0c88d94528d714eeb435b7c6b4a9bee339374629bbd29589f3590d03","tier":null}],"members":[{"type":"individual","id":"52541137d39f87c3","login":"52541137d39f87c3","name":"Kyungho Lee","avatar_url":"https://avatars-next.observableusercontent.com/5d40311e0c88d94528d714eeb435b7c6b4a9bee339374629bbd29589f3590d03","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"2f7c5c4e8e78fcd3","slug":"sports","title":"Sports","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"World Stadium Location Visualization Tutorial","cells":[{"id":0,"value":"# World Stadium Location Visualization Tutorial\n'' https://observablehq.com/@figurescc/stadiums-around-the-world-step-by-step\n''","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"countries = d3.json(\"https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = width /2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"{\n const projection = d3.geoMercator(); // we choose the infamous mercator for starters\n const path = d3.geoPath(projection); // a path generator using our projection method\n\n console.log(path(countries)); // check the console to see how the path generator transforms\n // the geoJSON into SVG path drawing commands\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"{\n const projection = d3.geoMercator();\n const path = d3.geoPath(projection);\n \n const center = [13.064458, 52.382106]; // our current location\n const position = projection(center); // the projection method will turn longitude,latitude into x,y\n \n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"stadiumDataRaw = d3.csv(\"https://gist.githubusercontent.com/davidelsche/b25f9373135bf9c3ab14e526626423b4/raw/779156c1145bcf09a1356c7ef6f4fa5daa635aa6/world_of_stadiums.csv\", d => {\n return {\n country: d.country,\n capacity: +d.capacity, // the plus operator will interpret all entries for that column as numbers\n lat: +d.lat,\n long: +d.long,\n kind: d.kind,\n city: d.city,\n name: d.name,\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n const projection = d3.geoMercator();\n const path = d3.geoPath(projection);\n \n const circles = stadiumDataRaw.map(d => {\n const position = projection([d.long, d.lat]);\n const [x, y] = position;\n const type = d.kind.replace(\" \", \"\").toLowerCase();\n const circle = svg``;\n \n return circle;\n });\n\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"stadiumColors = ({\n baseball: \"#8339FF\",\n basketball: \"#169B78\",\n bullfight: \"#EA3086\",\n cricket: \"#AAC80B\",\n football: \"#0097DB\",\n hockey: \"#FFA930\",\n horseracing: \"#8EC7F3\",\n other: \"#FFA3F0\",\n race: \"#D25E69\",\n rugby: \"#FFD110\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"