27:null 28:["$","title",null,{"children":"JavaScript Notebook Basics | Shipeng Sun | Observable"}] 2d:T45d,The above cell is using Markdown language. For the basic syntax of Markdown, please visit MarkdownGuide
And the current cell is HTML. HTML is HyperText Markup Language and serves as the content language for web pages. However, the grammar of HTML is tedious and that is eaxctly why Markdown was created as a lightweight markup language that you can use to add formatting elements to plaintext text documents.
For example, in Markdown, a hyper link can be created easily with [text](url) like [Hunter College](https://hunter.cuny.edu). In HTML this will be <a href="https://hunter.cuny.edu">Hunter College</a> 2e:T423,digitalClock = { let data = [0,0,0,0]; function update() { const t = new Date(); data[0] = t.getHours(); data[1] = t.getMinutes(); if(data[1] < 10) data[1] = '0' + data[1]; data[2] = t.getSeconds(); if(data[2] < 10) data[2] = '0' + data[2]; data[3] = t.getMilliseconds()/10; //console.log(data); }; // create container svg const svg = d3 .create('svg') .attr('width', 900) .attr('height', 100); function draw() { svg.selectAll('g').remove(); svg.append('g') .append('text') .attr('x', deltaX.toFixed()) .attr('y', deltaY.toFixed()) .attr('font-size', 30) .attr('fill', clockColor) .text(data.join(':')) console.log(data.join(':')); } // draw clock draw(); setInterval(()=>{ update(); draw(); }, 30) // update time and draw hands every second /* const interval = d3.interval(() => { update() draw() }, 1000); invalidation.then(() => { interval.stop() }); */ return svg.node(); }2f:T12b9,// https://levelup.gitconnected.com/programming-languages-with-the-highest-amount-of-listings-indeed-glassdoor-linkedin-and-upwork-549a1c4618be langJobs = { let rawText = ` Python Indeed = 218, 173 jobs Glassdoor = 72, 294 jobs LinkedIn = 877, 403 jobs Flexjobs = 2,075 jobs SimplyHired = 97, 554 jobs Upwork =15, 327 jobs Freelancer = 309 jobs Total = 1, 283, 135 listings JavaScript Indeed = 149, 863 jobs Glassdoor = 51, 597 jobs LinkedIn = 791, 445 jobs Flexjobs = 1, 858 jobs SimplyHired = 62, 904 jobs Upwork = 39, 410 jobs Freelancer = 205 jobs Total = 1, 097,282 listings TypeScript Indeed = 30, 604 jobs Glassdoor = 7, 847 jobs LinkedIn = 64, 275 jobs Flexjobs = 473 jobs SimplyHired = 9, 754 jobs Upwork = 3, 572 jobs Freelancer = 46 jobs Total = 116, 571 listings Node.js Indeed = 30, 541 jobs Glassdoor = 7, 136 jobs LinkedIn = 206, 566 jobs Flexjobs = 382 jobs SimplyHired = 10, 599 jobs Upwork = 8, 579 jobs Freelancer = 81 jobs Total = 263, 883 listings Java Indeed = 176, 758 jobs Glassdoor = 46, 506 jobs LinkedIn = 844, 147 jobs Flexjobs = 1, 481 jobs SimplyHired = 68, 628 jobs Upwork = 8, 515 jobs Freelancer = 210 jobs Total = 1, 146, 245 listings C C was quite a broad keyword. To counter the problem, I tried to use the keyword C developer but again some filters brought results containing the word developer. This left me scratching my head. It was difficult to accurately search for C jobs. Regardless, C is often bundled together with C++ in most listings. C++ and C# results will generally guide us on how popular C jobs are as a whole. C++ Indeed = 89, 808 jobs Glassdoor = (Search didn’t allow the + symbol) LinkedIn = 745, 973 jobs Flexjobs = 48 jobs SimplyHired = 39, 983 jobs Upwork = 2, 718 jobs Freelancer = 253 jobs Total = 878, 783 listings C# Indeed =101, 458 jobs Glassdoor = 34, 393 jobs LinkedIn = 179, 830 jobs Flexjobs = 65 jobs SimplyHired = 46, 666 jobs Upwork = 3, 982 jobs Freelancer = 317 jobs Total = 366, 711 listings PHP Indeed = 19, 001 jobs Glassdoor = 9, 536 jobs LinkedIn = 66, 199 jobs Flexjobs = 345 jobs SimplyHired = 9, 935 jobs Upwork = 17, 686 jobs Freelancer = 376 jobs Total = 123, 078 Listings SQL Indeed = 203, 961 jobs Glassdoor = 86, 231 jobs Linkedln = 1, 182, 629 jobs Flexjobs = 2, 665 jobs SimplyHired = 102, 059 jobs Upwork = 6, 808 jobs Freelancer = 204 jobs Total =1,584,557 listing Go Go was also a broad keyword that presented undesired results. Golang was the keyword used. Indeed = 9, 049 jobs Glassdoor = 2, 472 jobs LinkedIn = 22, 266 jobs Flexjobs =232 jobs SimplyHired =3, 333 Upwork =678 jobs Freelancer =10 jobs Total = 38, 040 listings R R was also a broad keyword. Searching for R jobs with high relevance was a bit difficult. Matlab Indeed = 17, 881 jobs Glassdoor =9, 059 jobs LinkedIn =155, 145 jobs Flexjobs =40 jobs SimplyHired = 12, 019 jobs Upwork = 519 jobs Freelancer = 38 jobs Total = 194, 701 listings Swift Swift also turned out to be a broad keyword in some job boards. I only listed relevant results. Indeed = Broad keyword. Glassdoor = Broad keyword. LinkedIn = 19, 734 jobs Flexjobs =338 jobs SimplyHired = Broad keyword. Upwork = 1, 502 jobs Freelancer = 50 jobs Total = 21, 624 listings Kotlin Indeed = 9, 966 jobs Glassdoor = 2, 550 jobs LinkedIn = 16, 064 jobs Flexjobs = 167 jobs SimplyHired = 3, 407 jobs Upwork = 1, 138 jobs Freelancer = 23 jobs Total = 33, 315 listings Objective-C Indeed = Broad keyword. Glassdoor = 25, 384 jobs LinkedIn = 7,192 jobs Flexjobs = Broad keyword. SimplyHired = Broad keyword. Upwork = 723 jobs Freelancer = 99 jobs Total = 33, 398 listings Rust Indeed = 9, 302 jobs Glassdoor = 2, 825 jobs LinkedIn = 7, 431 Flexjobs = 83 jobs SimplyHired = Broad keyword. Upwork = 508 jobs Freelancer = 15 jobs Total= 20, 164 listings Ruby Indeed = 32, 272 jobs Glassdoor =10, 102 jobs LinkedIn = 39, 165 jobs Flexjobs = 600 jobs SimplyHired = 13, 105 jobs Upwork =1, 149 jobs Freelancer = 14 jobs Total = 96, 405 listings HTML/CSS Indeed = 42, 540 jobs Glassdoor = 18, 027 jobs LinkedIn = 69, 132 jobs Flexjobs = 1, 017 jobs SimplyHired = 19, 994 jobs Upwork = 11, 668 jobs Freelancer = 344 jobs Total = 162, 722 listings Bash/Shell Indeed = 4, 806 jobs Glassdoor = 2, 189 jobs LinkedIn = 9, 718 jobs Flexjobs = 17 jobs SimplyHired = 2, 406 jobs Upwork = 309 jobs Freelancer = 34 jobs Total = 19, 479 listings Powershell Indeed = 25, 167 jobs Glassdoor = 12, 350 jobs LinkedIn = 66, 577 jobs Flexjobs = 118 jobs SimplyHired =13, 541 jobs Upwork = 242 jobs Freelancer = 7 jobs Total = 118, 002 listings ` let textLines = rawText.split('\n').filter( t=> t && t.trim() !== ""); return textLines; } 30:[] 2b:{"id":"aceaa6bc78f327c3","slug":null,"title":"JavaScript Notebook Basics","thumbnail":"e0fd8262974f3650df81a5702443176d20fed94810d4c32ba982969c1a9fc565","access_level":"public","create_time":"$D2023-02-20T22:09:44.815Z","update_time":"$D2025-04-03T20:08:14.426Z","view_time":null,"first_public_time":"$D2023-02-20T22:09:44.815Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":337,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7664db221032674b","slug":"markdown-basics","title":"Markdown for WebGIS","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"type":"notebook","body":{"title":"JavaScript Notebook Basics","cells":[{"id":0,"value":"# JavaScript Notebook Basics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"### What to learn from this ___[notebook](http://www.geo.hunter.cuny.edu)___?\n - Basics of HTML, Markdown, and JavaScript Cells supported in Observable\n - Elements of JavaScript programming like variables and functions\n - Observable Inputs that allow user interactivity\n - Creating SVG or canvas for visualization using D3.js\n - Generate reactive and dynamic content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"$2d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"### A HTML cell with a simple list","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"

Observable supports HTML, Markdown, and JavaScript Cells.
This is an example of unordered list.
For more information on HTML elements, read W3Schools\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"### JavaScript Cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"#### Various Observable Inputs ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"viewof deltaY = Inputs.range([30, 60], {label: \"Top Margin\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof deltaX = Inputs.range([0, 600], {label: \"Left Margin\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof clockColor = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"#### Graphics and Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"In Observable, it is easy to interact with Markdown or HTML. For example, the following text will be \"reactive\" when we change the left margin and color values using the slider and color selector above.

\nThe top and left margins of the digital clock below are ${deltaY}, ${deltaX}. And the color of the clock is ${\n// Observable allows JavaScript code running in Markdown or HTML cells.\n// For this hexToRGBA function, see https://stackoverflow.com/questions/21646738/convert-hex-to-rgba\n((hex)=>{\n var c;\n if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){\n c= hex.substring(1).split('');\n if(c.length== 3){\n c= [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c= '0x'+c.join('');\n return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';\n }\n throw new Error('Bad Hex');\n})(clockColor)}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"#### Define and call anonymous functions immediately","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"### Interaction between JavaScript and HTML & Markdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"With a markdown cell: The left margin of the clock is ${deltaX}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"{\n var timesRslt1 = function(x,y) {\n return x*y;\n }(5,6);\n\n var timesRslt2 = ((x,y)=>{\n return x*y;\n })(5,6);\n\n return [timesRslt1, timesRslt2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"{\n var a = 1;\n var b = 2;\n\n return a+b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"viewof worldCupDateV = Inputs.datetime({label: \"2026 World Cup Final\", value: \"2026-07-19T16:00\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"weeksCount = {\n // Calculate weeks in milliseconds\n const minute = 1000 * 60;\n const hour = minute * 60;\n const day = hour * 24;\n const week = day * 7;\n const year = day * 365;\n \n // Divide Time with a week\n const d = new Date();\n return Math.round( (worldCupDateV.getTime() - d.getTime()) / week);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$${weeksCount} weeks to world cup","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"{\n var toWrite = htl.html`

A count down

`;\n \n let updateCountDown = () => {\n const d = new Date();\n document.querySelector(\"#cdWorldCup\").innerHTML = (worldCupDateV.getTime() - d.getTime())/1000 + \" seconds to go\";\n };\n \n setInterval(updateCountDown, 1000);\n \n return toWrite;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"