28:null 29:["$","title",null,{"children":"Interrupted Sinusoidal | osgavablehq | Observable"}] 2e:[{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1697102742162.072,"size":545534},{"id":"b83463a666ec9429b27a6feb0768402040051936cdf30da010839f884585985b9d14b20f4d0f568498636febaedd66678c8b8d04e500cedabe74f685e83ab532","href":"https://static.observableusercontent.com/files/b83463a666ec9429b27a6feb0768402040051936cdf30da010839f884585985b9d14b20f4d0f568498636febaedd66678c8b8d04e500cedabe74f685e83ab532","name":"land-110m-test01.json","type":"application/json","lastModified":1697105590523.522,"size":460228}] 2c:{"id":"957a7c4a03bfce94","slug":null,"title":"Interrupted Sinusoidal","thumbnail":"fa50d1cfe4b29c5d599fb079fb7ff52c60b036119ca95945537e38e60b69cbf7","access_level":"public","create_time":"$D2023-10-09T19:12:54.481Z","update_time":"$D2023-10-12T19:30:52.222Z","view_time":null,"first_public_time":"$D2023-10-09T19:12:54.481Z","has_unpublished_edits":null,"fork":{"id":"b07b87d46c96b6f6","slug":"interrupted-sinusoidal","title":"Interrupted Sinusoidal","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0b21546edc062cba","login":"osgavablehq","name":"osgavablehq","avatar_url":"https://avatars-next.observableusercontent.com/72c2ea320d4324d3d7934a4b189ce79c5e9c24c5c22e12add1d13bc6772a2ac3","tier":"starter_2024"},"version":358,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c8e1caa0f5d5c40","login":"osgav","name":"Gavin","avatar_url":"https://avatars-next.observableusercontent.com/53793e5b68eb5626a4dc21a65e88665b5fd3159aec4bf6624693c1530d851ff6","tier":null}],"members":[{"type":"individual","id":"2c8e1caa0f5d5c40","login":"osgav","name":"Gavin","avatar_url":"https://avatars-next.observableusercontent.com/53793e5b68eb5626a4dc21a65e88665b5fd3159aec4bf6624693c1530d851ff6","tier":null,"role":"editor"},{"type":"team","id":"0b21546edc062cba","login":"osgavablehq","name":"osgavablehq","avatar_url":"https://avatars-next.observableusercontent.com/72c2ea320d4324d3d7934a4b189ce79c5e9c24c5c22e12add1d13bc6772a2ac3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interrupted Sinusoidal","cells":[{"id":1,"value":"md`# Interrupted Sinusoidal\n\nThis interrupted [sinusoidal projection](/@d3/sinusoidal) uses asymmetrical lobe boundaries to emphasize land masses over oceans, after the Swedish *Nordisk Världs Atlas* as reproduced by C.A. Furuti.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoInterruptedSinusoidal()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import {d3, map} with {projection} from \"@d3/world-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`Here’s an alternative form with the lobes explicitly specified as by [Goode](/@d3/interrupted-goode-homolosine).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"projection2 = d3.geoInterrupt(\n d3.geoSinusoidalRaw,\n [[ // northern hemisphere\n [[-180, 0], [-100, 90], [ -40, 0]],\n [[ -40, 0], [ 30, 90], [ 180, 0]]\n ], [ // southern hemisphere\n [[-180, 0], [-160, -90], [-100, 0]],\n [[-100, 0], [ -60, -90], [ -20, 0]],\n [[ -20, 0], [ 20, -90], [ 80, 0]],\n [[ 80, 0], [ 140, -90], [ 180, 0]]\n ]]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"map2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"import {map as map2} with {projection2 as projection} from \"@d3/world-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"# Links\n\n- https://observablehq.com/@d3/world-map\n- https://observablehq.com/@d3/world-map-svg\n- https://github.com/topojson/topojson\n- https://github.com/topojson/topojson-simplify/blob/master/README.md#simplify\n- https://github.com/topojson/topojson-simplify/blob/master/README.md#presimplify\n- https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c\n- https://medium.com/@mbostock/command-line-cartography-part-2-c3a82c5c0f3\n- https://medium.com/@mbostock/command-line-cartography-part-3-1158e4c55a1e\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"# Bartholomew","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"projection_bart = d3.geoInterrupt(\n d3.geoSinusoidalRaw,\n [[ // northern hemisphere\n [[-180, 0], [-100, 90], [ -40, 0]],\n [[ -40, 0], [ 30, 90], [ 180, 0]]\n ], [ // southern hemisphere\n [[-180, 0], [ -60, -90], [ -20, 0]],\n [[ -20, 0], [ 20, -90], [ 80, 0]],\n [[ 80, 0], [ 140, -90], [ 180, 0]]\n ]]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"import {map as map_bart_canvas} with {projection_bart as projection} from \"@d3/world-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"map_bart_canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"import {map as map_bart_svg} with {projection_bart as projection} from \"@d3/world-map-svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"map_bart_svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"## Customizable SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"map_custom_svg_01 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof simplify_weight = Inputs.range([0, 100], {label: \"simplification\", step: 0.1, value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof color_ocean = Inputs.color({label: \"ocean\", value: \"#d4d4d8\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof color_land = Inputs.color({label: \"land\", value: \"#3f3f46\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof color_graticule = Inputs.color({label: \"graticule\", value: \"#3f3f46\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof width_graticule = Inputs.range([0, 10], {label: \"graticule thickness\", step: 0.1, value: 0.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof color_outline = Inputs.color({label: \"outline\", value: \"#facc15\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof width_outline = Inputs.range([0, 10], {label: \"outline thickness\", step: 0.5, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"## constructing the SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"map_custom_svg = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"d3_two = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"graticule = d3_two.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3_two.geoPath(projection_bart.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection_bart.scale(projection_bart.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"path = d3_two.geoPath(projection_bart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"## ~~different source file for \"land\"~~ \n\n## using topojson-simplify\n\nthe current `land-50m.json` source data results in an SVG over 2MB in size\n\nhow can i use a different (more simplified) source for the land geometries?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"world_2 = FileAttachment(\"land-110m-test01.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"topojsonsimplify = require(\"topojson-simplify@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"//land_simple = topojsonsimplify.simplify(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"land_simple_pre = topojsonsimplify.presimplify(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"//land_ahoy = topojson.feature(land_simple_pre, land_simple_pre.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"// land_simple_adjusted = topojsonsimplify.simplify(land_simple_pre, 0.5)\nland_simple_adjusted = topojsonsimplify.simplify(land_simple_pre, simplify_weight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"land_ahoy = topojson.feature(land_simple_adjusted, land_simple_adjusted.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"ok there we go! involving `topojson-simplify` instead of starting with a different source file can get me a reduced file size for the SVG.\n\n- load the existing `land-50m.json` topojson file into the `topojson-simplfy` function `presimplify`\n- load the result of that into `simplify` and provide a `weight` value\n- load the result of that into `topojson` function `feature`\n- use the result of that in the SVG definition\n- receive smaller SVG\n\nwithout this the SVG starts at ~2.3MB\n\nwith weight of 0.5 the SVG is ~380KB\n\nwith weight of 1 the SVG is ~360KB\n\nwith weight of 100 the SVG is ~330KB\n\nvalues close to zero result in a reasonable looking world map\n\nvalues like 100 result in some very vague blobs that don't look good in this context","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"