31:Ted4,function geoConicConformalSpainCompact() { var cache, cacheStream, peninsula = d3.geoConicConformal().rotate([5, -38.6]).parallels([0,60]), peninsulaPoint, canarias = d3.geoConicConformal().rotate([5, -38.6]).parallels([0,60]), canariasPoint, point, pointStream = { point: function(x, y) { point = [x, y]; } }; function conicConformalSpain(coordinates) { var x = coordinates[0], y = coordinates[1]; return ( (point = null), (peninsulaPoint.point(x, y), point) || (canariasPoint.point(x, y), point) ); } conicConformalSpain.invert = function(coordinates) { var k = peninsula.scale(), t = peninsula.translate(), x = (coordinates[0] - t[0]) / k, y = (coordinates[1] - t[1]) / k; return (y >= clipY0 && y< clipY1 && x >= -clipX0 && x < -clipX1 ? canarias : peninsula ).invert(coordinates); }; conicConformalSpain.stream = function(stream) { return cache && cacheStream === stream ? cache : (cache = multiplex([ peninsula.stream((cacheStream = stream)), canarias.stream(stream) ])); }; conicConformalSpain.precision = function(_) { if (!arguments.length) return peninsula.precision(); peninsula.precision(_), canarias.precision(_); return reset(); }; conicConformalSpain.scale = function(_) { if (!arguments.length) {return peninsula.scale();} peninsula.scale(_); canarias.scale(_); return conicConformalSpain.translate(peninsula.translate()); }; conicConformalSpain.translate = function(_) { if (!arguments.length) return peninsula.translate(); var k = peninsula.scale(), x = +_[0], y = +_[1]; peninsulaPoint = peninsula .translate(_) .clipExtent([ [x - clipX0Pen * k, y - clipY0Pen * k], [x + clipX1Pen * k, y + clipY1Pen * k] ]) .stream(pointStream); canariasPoint = canarias .translate([x + xTranslate * k, y - yTranslate * k]) .clipExtent([ [x - clipX0 * k + epsilon, y + clipY0 * k + epsilon], [x - clipX1 * k - epsilon, y + clipY1 * k - epsilon] ]) .stream(pointStream); return reset(); }; function reset() { cache = cacheStream = null; return conicConformalSpain; } conicConformalSpain.drawCompositionBorders = function(context) { /* console.info("CLIP EXTENT: ", canarias.clipExtent()); console.info("UL BBOX:", peninsula.invert([canarias.clipExtent()[0][0], canarias.clipExtent()[0][1]])); console.info("UR BBOX:", peninsula.invert([canarias.clipExtent()[1][0], canarias.clipExtent()[0][1]])); console.info("LD BBOX:", peninsula.invert([canarias.clipExtent()[1][0], canarias.clipExtent()[1][1]])); */ /* */ const extent = canarias.clipExtent() const ul = peninsula.invert([extent[0][0], extent[0][1]]) const ur = peninsula.invert([extent[1][0], extent[0][1]]) const ld = peninsula.invert([extent[1][0], extent[1][1]]) const ulCanaryIslands = peninsula(ul); const urCanaryIslands = peninsula(ur); const ldCanaryIslands = peninsula(ld); /*var ulCanaryIslands = peninsula([-14.0346750, 34.965007]); var urCanaryIslands = peninsula([-7.4208899, 35.536988]); var ldCanaryIslands = peninsula([-7.3148275, 33.54359]);*/ context.moveTo(ulCanaryIslands[0], ulCanaryIslands[1]); context.lineTo(urCanaryIslands[0], urCanaryIslands[1]); context.lineTo(ldCanaryIslands[0], ldCanaryIslands[1]); }; conicConformalSpain.getCompositionBorders = function() { const context = d3Path.path(); this.drawCompositionBorders(context); return context.toString(); }; return conicConformalSpain.scale(2700); }32:T10c1,function geoConicConformalSpain(){ var cache, cacheStream, iberianPeninsule = d3.geoConicConformal().rotate([5, -38.6]).parallels([0,60]), iberianPeninsulePoint, canaryIslands = d3.geoConicConformal().rotate([5, -38.6]).parallels([0,60]), canaryIslandsPoint, point, pointStream = {point: function(x, y) { point = [x, y]; }}; /* var iberianPeninsuleBbox = [[-11, 46], [4, 35]]; var canaryIslandsBbox = [[-19.0, 28.85], [-12.7, 28.1]]; */ function conicConformalSpain(coordinates) { var x = coordinates[0], y = coordinates[1]; return point = null, (iberianPeninsulePoint.point(x, y), point) || (canaryIslandsPoint.point(x, y), point); } conicConformalSpain.invert = function(coordinates) { var k = iberianPeninsule.scale(), t = iberianPeninsule.translate(), x = (coordinates[0] - t[0]) / k, y = (coordinates[1] - t[1]) / k; return (y >= 0.05346 && y< 0.0897 && x >= -0.13388 && x < -0.0322 ? canaryIslands : iberianPeninsule).invert(coordinates); }; conicConformalSpain.stream = function(stream) { return cache && cacheStream === stream ? cache : cache = multiplex([iberianPeninsule.stream(cacheStream = stream), canaryIslands.stream(stream)]); }; conicConformalSpain.precision = function(_) { if (!arguments.length) {return iberianPeninsule.precision();} iberianPeninsule.precision(_); canaryIslands.precision(_); return reset(); }; conicConformalSpain.scale = function(_) { if (!arguments.length) {return iberianPeninsule.scale();} iberianPeninsule.scale(_); canaryIslands.scale(_); return conicConformalSpain.translate(iberianPeninsule.translate()); }; conicConformalSpain.translate = function(_) { if (!arguments.length) {return iberianPeninsule.translate();} var k = iberianPeninsule.scale(), x = +_[0], y = +_[1]; /* var c0 = iberianPeninsule(iberianPeninsuleBbox[0]); var x0 = (x - c0[0]) / k; var y0 = (y - c0[1]) / k; var c1 = iberianPeninsule(iberianPeninsuleBbox[1]); var x1 = (x - c1[0]) / k; var y1 = (y - c1[1]) / k; console.info('Iberian Peninsula: p0: ' + x0 + ', ' + y0 + ' , p1: ' + x1 + ' - ' + y1); c0 = canaryIslands.translate([x + 0.1 * k, y - 0.094 * k])(canaryIslandsBbox[0]); x0 = (x - c0[0]) / k; y0 = (y - c0[1]) / k; c1 = canaryIslands.translate([x + 0.1 * k, y - 0.094 * k])(canaryIslandsBbox[1]); x1 = (x - c1[0]) / k; y1 = (y - c1[1]) / k; console.info('Canry Islands: p0: ' + x0 + ', ' + y0 + ' , p1: ' + x1 + ' - ' + y1); */ iberianPeninsulePoint = iberianPeninsule .translate(_) .clipExtent([[x - 0.06857 * k, y - 0.1288 * k],[x + 0.13249 * k, y + 0.06 * k]]) .stream(pointStream); canaryIslandsPoint = canaryIslands .translate([x + 0.1 * k, y - 0.094 * k]) .clipExtent([[x - 0.1331 * k + epsilon, y + 0.053457 * k + epsilon],[x - 0.0354 * k - epsilon, y + 0.08969 * k - epsilon]]) .stream(pointStream); return reset(); }; function reset() { cache = cacheStream = null; return conicConformalSpain; } conicConformalSpain.drawCompositionBorders = function(context) { /* console.info("CLIP EXTENT: ", canaryIslands.clipExtent()); console.info("UL BBOX:", iberianPeninsule.invert([canaryIslands.clipExtent()[0][0], canaryIslands.clipExtent()[0][1]])); console.info("UR BBOX:", iberianPeninsule.invert([canaryIslands.clipExtent()[1][0], canaryIslands.clipExtent()[0][1]])); console.info("LD BBOX:", iberianPeninsule.invert([canaryIslands.clipExtent()[1][0], canaryIslands.clipExtent()[1][1]])); */ var ulCanaryIslands = iberianPeninsule([-14.0346750, 34.965007]); var urCanaryIslands = iberianPeninsule([-7.4208899, 35.536988]); var ldCanaryIslands = iberianPeninsule([-7.3148275, 33.54359]); context.moveTo(ulCanaryIslands[0], ulCanaryIslands[1]); context.lineTo(urCanaryIslands[0], urCanaryIslands[1]); context.lineTo(ldCanaryIslands[0], ldCanaryIslands[1]); }; conicConformalSpain.getCompositionBorders = function() { const context = d3Path.path(); this.drawCompositionBorders(context); return context.toString(); }; return conicConformalSpain.scale(2700); }33:Tbff,function geoAlbersUsaPr() { var cache, cacheStream, lower48 = d3.geoAlbers(), lower48Point, alaska = d3.geoConicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]), alaskaPoint, hawaii = d3.geoConicEqualArea().rotate([157, 0]).center([-3, 19.9]).parallels([8, 18]), hawaiiPoint, puertoRico = d3.geoConicEqualArea().rotate([66, 0]).center([0, 18]).parallels([8, 18]), puertoRicoPoint, point, pointStream = {point: function(x, y) { point = [x, y]; }}; function albersUsa(coordinates) { var x = coordinates[0], y = coordinates[1]; return point = null, (lower48Point.point(x, y), point) || (alaskaPoint.point(x, y), point) || (hawaiiPoint.point(x, y), point) || (puertoRicoPoint.point(x, y), point); } albersUsa.invert = function(coordinates) { var k = lower48.scale(), t = lower48.translate(), x = (coordinates[0] - t[0]) / k, y = (coordinates[1] - t[1]) / k; return (y >= 0.120 && y < 0.234 && x >= -0.425 && x < -0.214 ? alaska : y >= 0.166 && y < 0.234 && x >= -0.214 && x < -0.115 ? hawaii : y >= 0.204 && y < 0.234 && x >= 0.320 && x < 0.380 ? puertoRico : lower48).invert(coordinates); }; albersUsa.stream = function(stream) { return cache && cacheStream === stream ? cache : cache = multiplex([lower48.stream(cacheStream = stream), alaska.stream(stream), hawaii.stream(stream), puertoRico.stream(stream)]); }; albersUsa.precision = function(_) { if (!arguments.length) return lower48.precision(); lower48.precision(_), alaska.precision(_), hawaii.precision(_), puertoRico.precision(_); return reset(); }; albersUsa.scale = function(_) { if (!arguments.length) return lower48.scale(); lower48.scale(_), alaska.scale(_ * 0.35), hawaii.scale(_), puertoRico.scale(_); return albersUsa.translate(lower48.translate()); }; albersUsa.translate = function(_) { if (!arguments.length) return lower48.translate(); var k = lower48.scale(), x = +_[0], y = +_[1]; lower48Point = lower48 .translate(_) .clipExtent([[x - 0.455 * k, y - 0.238 * k], [x + 0.455 * k, y + 0.238 * k]]) .stream(pointStream); alaskaPoint = alaska .translate([x - 0.307 * k, y + 0.201 * k]) .clipExtent([[x - 0.425 * k + epsilon, y + 0.120 * k + epsilon], [x - 0.214 * k - epsilon, y + 0.234 * k - epsilon]]) .stream(pointStream); hawaiiPoint = hawaii .translate([x - 0.205 * k, y + 0.212 * k]) .clipExtent([[x - 0.214 * k + epsilon, y + 0.166 * k + epsilon], [x - 0.115 * k - epsilon, y + 0.234 * k - epsilon]]) .stream(pointStream); puertoRicoPoint = puertoRico .translate([x + 0.350 * k, y + 0.224 * k]) .clipExtent([[x + 0.320 * k, y + 0.204 * k], [x + 0.380 * k, y + 0.234 * k]]) .stream(pointStream).point; return reset(); }; function reset() { cache = cacheStream = null; return albersUsa; } return albersUsa.scale(1070); }34:T759,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = d3.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }35:[] 2f:{"title":"Composite Spain map calculator","cells":[{"id":0,"value":"md`# Composite Spain map calculator`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`This notebook is an attempt to create a more compact projection for Spain. \n\nAs a starting point, use the geoConicConformalSpain projection from [d3-composite-projections](https://github.com/rveciana/d3-composite-projections) created by [Rojer Veciana](https://github.com/rveciana) and move the Canary Islands just below the Iberian peninsula in order to be able to create a larger-scale map to be displayed on small screens such as mobile phones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"viewof selectedProjection = radio({\n title: 'Projection',\n options: [\"geoConicConformalSpain\", \"geoConicConformalSpainCompact\"\n ],\n value: 'geoConicConformalSpain'\n}\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"/**/\nmap = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`### Península config`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof clipX0Pen = number({min:0,max:5,step:0.00001,value:0.06857 , title: \"clipX0Pen\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof clipY0Pen = number({min:0,max:5,step:0.0001,value:0.1288 , title: \"clipY0Pen\"})\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof clipX1Pen = number({min:0,max:5,step:0.00001,value:0.13249 , title: \"clipX1Pen\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof clipY1Pen = number({min:0,max:5,step:0.001,value:0.1, title: \"clipY1Pen\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`### Canarias config`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"viewof xTranslate = number({min:0,max:5,step:0.001,value:0.178,title: \"xTranslate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"viewof yTranslate = number({min:0,max:5,step:0.001,value:0.085,title: \"yTranslate\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof clipX0 = number({min:-100,max:5,step:0.001,value:0.053, title: \"clipX0\"}) \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof clipY0 = number({min:0,max:5,step:0.000001,value:0.062, title: \"clipY0\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof clipX1 = number({min:-100,max:5,step:0.0001,value:-0.044, title: \"clipX1\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof clipY1 = number({min:0,max:5,step:0.00001,value:0.099, title: \"clipY1\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"projections = {\n return {\n geoConicConformalSpainCompact:geoConicConformalSpainCompact,\n geoConicConformalSpain:geoConicConformalSpain\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"height = width*ratio","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"ratio = 0.55","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"projection = projections[selectedProjection]()","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"path = { \n return d3.geoPath(projection)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"function multiplex(streams) {\n const n = streams.length;\n return {\n point(x, y) { for (const s of streams) s.point(x, y); },\n sphere() { for (const s of streams) s.sphere(); },\n lineStart() { for (const s of streams) s.lineStart(); },\n lineEnd() { for (const s of streams) s.lineEnd(); },\n polygonStart() { for (const s of streams) s.polygonStart(); },\n polygonEnd() { for (const s of streams) s.polygonEnd(); }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"epsilon = 1e-6","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"es = d3.json('https://unpkg.com/es-atlas@0.2.0/es/provinces.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"\nworld = d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"d3Path = import('d3-path')","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"function number(config = {}) {\n const {\n value,\n title,\n description,\n placeholder,\n submit,\n step = \"any\",\n min,\n max\n } = typeof config === \"number\" || typeof config === \"string\" ? {value: +config} : config;\n const form = input({\n type: \"number\",\n title,\n description,\n submit,\n attributes: { value, placeholder, step, min, max, autocomplete: \"off\" },\n getValue: input => input.valueAsNumber\n });\n form.output.remove();\n form.input.style.width = \"auto\";\n form.input.style.fontSize = \"1em\";\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}