2c:null 2d:["$","title",null,{"children":"Solar system recreate | Jesse Pink | Observable"}] 32:T565,html` `33:Td7c,html` `34:Te70,html` `35:Tf58,html` `36:[{"id":"94f8c259f3b7b94b880c01a5d49e05dba75061bf78f1d3a82ecb2e815e8c45f1d9bbd4997cad0d71055adff327398e7bc8125cd2bbf13f7b1ccabd20ff724733","href":"https://static.observableusercontent.com/files/94f8c259f3b7b94b880c01a5d49e05dba75061bf78f1d3a82ecb2e815e8c45f1d9bbd4997cad0d71055adff327398e7bc8125cd2bbf13f7b1ccabd20ff724733","name":"截屏2021-09-05 上午11.23.53.png","type":"image/png","lastModified":1630859238028.62,"size":192603}] 30:{"id":"fd88257c74411958","slug":"solar-system-recreate","title":"Solar system recreate","thumbnail":"43ca104af6e2f0ddb2ebb6bc2123aa74f4fbf49c331d4a2734b94d0294f3bd3d","access_level":"public","create_time":"$D2021-09-03T14:53:21.241Z","update_time":"$D2021-09-06T20:00:48.965Z","view_time":null,"first_public_time":"$D2021-09-05T16:56:45.144Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9a798dd33a12ee48","login":"worning77","name":"Jesse Pink","avatar_url":"https://avatars-next.observableusercontent.com/0f9a78ee87ee7f8936d463af13c4673395da2458dce2d7a3485895ef674a1504","tier":"starter_2024"},"version":196,"publish_version":196,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba39a98349b347fe","login":"worning77","name":"Jesse Pink","avatar_url":"https://avatars-next.observableusercontent.com/0f9a78ee87ee7f8936d463af13c4673395da2458dce2d7a3485895ef674a1504","tier":null}],"members":[{"type":"individual","id":"ba39a98349b347fe","login":"worning77","name":"Jesse Pink","avatar_url":"https://avatars-next.observableusercontent.com/0f9a78ee87ee7f8936d463af13c4673395da2458dce2d7a3485895ef674a1504","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Solar system recreate","cells":[{"id":0,"value":"# Solar system recreate","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## 1. Clean data\nLet's clean the data because all the numbers are too big. And only need **distance**, **diameter** and **name** for this. And use formula to make the distance and size relative in order to fit into the canvas.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"FileAttachment(\"截屏2021-09-05 上午11.23.53.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`\n## 2. Resize image file in Observable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`\n Well, the attached img is TOO big, I need to find a resize function. Type observable resize attach image in google and get this useful toturial:\nhttps://observablehq.com/@endpointservices/resize\n\nAfter importing some functions, and publish my draft first, I can see the resized one. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function resize(\n src, // URL of an image\n width = 640, // Desired width\n height = undefined // Desired height, undefined scales by aspect ratio\n) {\n // One cool thing about serverless cells and its code sharing is we can define the backend\n // inline with the front end.\n const backend = deploy(\"resizer\", async (req, res) => {\n const params = JSON.parse(decodeURIComponent(req.query.params))\n const mime = \"image/jpeg\"\n res.header(\"content-type\", mime);\n res.header(\"cache-control\", \"public, max-age=604800, immutable\") // Remember\n res.send(await convert(params.src, params.width, params.height, mime))\n })\n \n return `${backend.href}?params=${encodeURIComponent(JSON.stringify({\n src, width, height\n }))}` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import {deploy} from '@endpointservices/serverless-cells'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function convert(src, width, height, mime) {\n return new Promise(resolve => {\n var img = new Image();\n img.onload = function () {\n var canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height || ((img.height * canvas.width) / img.width);\n\n var ctx = canvas.getContext(\"2d\");\n ctx.imageSmoothingQuality = \"high\"\n // Resize\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n // https://stackoverflow.com/questions/47913980/js-convert-an-image-object-to-a-jpeg-file\n canvas.toBlob(async (data)=> {\n resolve(await data.arrayBuffer())\n }, mime, 0.75);\n };\n img.src = src;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`\n ![](${resize(await FileAttachment(\"截屏2021-09-05 上午11.23.53.png\").url(), 800)})\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`\n## 3. Make SVG\n### Let's continue to make the canvas for svg.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\nMake the viewBox 800 * 200 first, and let's see I want the left and right margin to be 20px according to fomular above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\nDraw a biggest one -- Jupiter first to see the result: \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`**Looks nice**, maybe need reposition later when put every one into the map.\n\nThen, draw others except Sun.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`\nemmm, Venus and Earth overlapped... the parameter(margin) should be bigger to make them have enough space between.\n\nSo change the margin from 20 to 50. Also, change the relative size from *40 to *30. That should work. Let's add text along with their planets. To make it easy for input distance, it is better to **group them** and translate the group's position.\n### Here is the result:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`\nStill have a little bit overlap... But that's fine, if we can ignore Pluto, this issue would be solved. Finally, add the Sun.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md`\n### Have fun with shapes\nMake the belt of Saturn by using ellipse shape, adjust the parameter a little bit.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"