31: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` `; }32:[] 2f:{"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"},{"id":3,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"countries = d3.json(\"https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = width /2","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}