31:T810,chart = { const svg = d3 //.create("svg") .select(DOM.svg(width, height)) .style("display", "block") .attr("viewBox", [0, 0, width, height]); const defs = svg.append("defs"); defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const g = svg.append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); g.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "white"); g.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => color(data.get(d.properties.name))) .attr("d", path) .append("title") .text(d => `${d.properties.name} ${data.has(d.properties.name) ? data.get(d.properties.name) : "N/A"}`); g.append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Zooming var zoom = d3.zoom() .filter(() => { // Only filter out wheel events if (d3.event.type === 'wheel') { // don't allow zooming without pressing [CMD] key return d3.event.metaKey || d3.event.altKey || d3.event.ctrlKey; } // Always accept zooming when we're not using a wheel event to trigger it (e.g. doubleclick) return true; }) .scaleExtent([1, 16]) .on("zoom", zoomed); function zoomed() { g.attr("transform", d3.event.transform); } svg.call(zoom); function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 1.25), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.8), zoomReset: reset }); }32:T51c,rename = new Map([ ["Antigua and Barbuda", "Antigua and Barb."], ["Bolivia (Plurinational State of)", "Bolivia"], ["Bosnia and Herzegovina", "Bosnia and Herz."], ["Brunei Darussalam", "Brunei"], ["Central African Republic", "Central African Rep."], ["Cook Islands", "Cook Is."], ["Democratic People's Republic of Korea", "North Korea"], ["Democratic Republic of the Congo", "Dem. Rep. Congo"], ["Dominican Republic", "Dominican Rep."], ["Equatorial Guinea", "Eq. Guinea"], ["Iran (Islamic Republic of)", "Iran"], ["Lao People's Democratic Republic", "Laos"], ["Marshall Islands", "Marshall Is."], ["Micronesia (Federated States of)", "Micronesia"], ["Republic of Korea", "South Korea"], ["Republic of Moldova", "Moldova"], ["Russian Federation", "Russia"], ["Saint Kitts and Nevis", "St. Kitts and Nevis"], ["Saint Vincent and the Grenadines", "St. Vin. and Gren."], ["Sao Tome and Principe", "São Tomé and Principe"], ["Solomon Islands", "Solomon Is."], ["South Sudan", "S. Sudan"], ["Swaziland", "eSwatini"], ["Syrian Arab Republic", "Syria"], ["The former Yugoslav Republic of Macedonia", "Macedonia"], // ["Tuvalu", ?], ["United Republic of Tanzania", "Tanzania"], ["Venezuela (Bolivarian Republic of)", "Venezuela"], ["Viet Nam", "Vietnam"] ])33:T510,// Based on projectionInput from @d3/projection-comparison function projectionInput({name = "", value} = {}) { // sort the projections randomly d3.shuffle(equalAreaProjections); // add id based on index equalAreaProjections.forEach(function(item, index) { item.label = "P" + (index + 1); }) //console.log(equalAreaProjections); const form = html`

${name}`; form.onchange = () => {form.dispatchEvent(new CustomEvent("input")); //console.log("new projection is " + equalAreaProjections[form.i.selectedIndex].name); } form.oninput = () => {form.value = {name: equalAreaProjections[form.i.selectedIndex].name, p: equalAreaProjections[form.i.selectedIndex].value()}; //console.log("changed projection to " + form.value.name); } form.oninput(); form.prepend(html`

Choose a projection

`); return form; }34:[{"id":"105124169f32536c2c86c7d6a237673814f21444a667f2cb8c4e2b3f7b3cfae56fac5346a6ac7fd5cc02b63fcda1b08ac4e86a7c86896e5eeb37b51ccceb8f69","href":"https://static.observableusercontent.com/files/105124169f32536c2c86c7d6a237673814f21444a667f2cb8c4e2b3f7b3cfae56fac5346a6ac7fd5cc02b63fcda1b08ac4e86a7c86896e5eeb37b51ccceb8f69","name":"countries-50m.json","type":"application/octet-stream","lastModified":1592311635369.118,"size":756420},{"id":"b51e0b67725c9f4f6fad0318d640337b3451be7f9c7b8cee66e2cce64369444637402f13e2ce8a83ab013df9ece12f285d1cfd81c28faaaf7dad30f5eadda875","href":"https://static.observableusercontent.com/files/b51e0b67725c9f4f6fad0318d640337b3451be7f9c7b8cee66e2cce64369444637402f13e2ce8a83ab013df9ece12f285d1cfd81c28faaaf7dad30f5eadda875","name":"hale.csv","type":"application/octet-stream","lastModified":1592311635369.118,"size":3243}] 2f:{"title":"Designing World Maps: Part 1","cells":[{"id":0,"value":"md`# Designing World Maps: Part 1 \n\n[Example for the survey in Mapping the Global South: Equal-Area Projections for Choropleth Maps]\n\nWe would like you to design a world map to visualize data for social science research. To make things simpler, we provide the 2016 life expectancy dataset (from the WHO) as an example.\n\nPlease design the map to visualize the data according to **your research goals** indicated in the survey.\nYou can customize the map through the following parameters:\n1. the map projection\n2. the center (horizontal rotation)\n3. the color scheme\n4. The scale (zooming and panning)\n\nThe map will update accordingly. If you want to reset the map, reload the page.\nWhen you are done designing the map, please download it using the Save button below the map and upload it in the survey.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof projection = projectionInput({\n name: \"projection\",\n value: new URLSearchParams(location.search).get(\"projection\") || \"P1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof horizontalCenter = slider({\n min: -180, \n max: 180, \n step: 1, \n value: 0, \n title: \"Horizontal rotation\", \n description: \"rotation angle λ in degrees from -180 to 180\",\n getValue: input => {\n const value = Math.round(input.valueAsNumber * 2) / 2;\n return value; }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"viewof colorInterpolator = {\n const picker = colorInterpolatorPicker({\n title: \"Color palette\",\n height: 500,\n value: \"Blues\",\n interpolators: [\n // Single hues\n { name: \"Blues\" },\n { name: \"Greens\" },\n // Multi-hues\n { name: \"BuPu\" }, \n { name: \"YlGn\" }, \n { name: \"YlGnBu\" } \n ]\n}) \n picker.onclick = () => { \n //console.log(\"change color\");\n };\n return picker;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"html`

Level of detail

You can zoom with the buttons below or with the mouse.\nYou can pan with the mouse.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"{\n const form = html`\n \n \n \n

`;\n form.in.onclick = () => { \n chart.zoomIn(); \n }\n form.out.onclick = () => {\n chart.zoomOut();\n }\n form.reset.onclick = () => {\n chart.zoomReset();\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"legend({color, title: data.title})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"DOM.download(() => rasterize(chart), \"map1_p\" + projection.name + \"_c\" + horizontalCenter + \".png\", \"Save map 1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`\n*You may need to click the button twice: First to save the map, then to download it.*\n\nYou can now go back to the survey.\nPlease **do not** change the name of the file before uploading it.\n\nDo you have any questions or comments? \nPlease include them in the last question of the survey or write us an e-mail.\n\n---\n## Appendix\nData: Health-adjusted life expectancy, 2016. Source: WHO`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"color = d3.scaleSequential()\n .domain(d3.extent(Array.from(data.values())))\n .interpolator(colorInterpolator)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"hale.csv\").text(), ({country, hale}) => [rename.get(country) || country, +hale])), {title: \"Healthy life expectancy (years)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"equalAreaProjections = [\n {name: \"EC\", value: d3.geoEckert4}, // Eckert IV\n {name: \"GP\", value: () => d3.geoCylindricalEqualArea().parallel(45)}, // Gall-Peters\n {name: \"HA\", value: d3.geoHammer}, // Hammer\n {name: \"EE\", value: d3.geoEqualEarth}, // Equal Earth\n {name: \"MO\", value: d3.geoMollweide} // Mollweide\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"path = d3.geoPath(projection.p.rotate([horizontalCenter, 0]).center([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.p.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.p.scale(projection.p.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"import {colorInterpolatorPicker} from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"import {radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}