First draft of genuary 2

genuary02/observablehq.config.js

@@ -0,0 +1,38 @@
+// See https://observablehq.com/framework/config for documentation.
+export default {
+  // The app’s title; used in the sidebar and webpage titles.
+  title: "Genuary02",
+
+  // The pages and sections in the sidebar. If you don’t specify this option,
+  // all pages will be listed in alphabetical order. Listing pages explicitly
+  // lets you organize them into sections and have unlisted pages.
+  // pages: [
+  //   {
+  //     name: "Examples",
+  //     pages: [
+  //       {name: "Dashboard", path: "/example-dashboard"},
+  //       {name: "Report", path: "/example-report"}
+  //     ]
+  //   }
+  // ],
+
+  // Content to add to the head of the page, e.g. for a favicon:
+  head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">',
+
+  // The path to the source root.
+  root: "src",
+
+  // Some additional configuration options and their defaults:
+  // theme: "default", // try "light", "dark", "slate", etc.
+  // header: "", // what to show in the header (HTML)
+  // footer: "Built with Observable.", // what to show in the footer (HTML)
+  // sidebar: true, // whether to show the sidebar
+  // toc: true, // whether to show the table of contents
+  // pager: true, // whether to show previous & next links in the footer
+  // output: "dist", // path to the output root for build
+  // search: true, // activate search
+  // linkify: true, // convert URLs in Markdown to links
+  // typographer: false, // smart quotes and other typographic improvements
+  // preserveExtension: false, // drop .html from URLs
+  // preserveIndex: false, // drop /index from URLs
+};

genuary02/package.json

@@ -0,0 +1,20 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf src/.observablehq/cache",
+    "build": "observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "^1.13.3"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

genuary02/src/index.md

@@ -0,0 +1,61 @@
+# Genuary02
+
+```js
+
+const WIDTH = 800;
+const HEIGHT = 600;
+
+```
+
+Life
+
+```js
+// Set up the svg canvas 
+
+
+const svg = d3.create("svg")
+  .attr("width", WIDTH)
+  .attr("height", HEIGHT)
+  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
+
+
+svg.append("clipPath")
+    .attr("id", "clipRect")
+    .append("rect")
+    .attr("x", 0)
+    .attr("y", 0)
+    .attr("width", WIDTH)
+    .attr("height", HEIGHT);
+
+
+const bg_g = svg.append("g")
+  .attr("id", "background");
+
+bg_g.selectAll("rect")
+  .data( [ { bg: "yellow" } ] )
+  .join("rect")
+  .attr("x", 0)
+  .attr("y", 0)
+  .attr("width", WIDTH)
+  .attr("height", HEIGHT)
+  .attr("fill", (d) => d.bg)
+;
+
+const dots = [ { x:20, y:20}, { x: 120, y:120 } ];
+
+const dots_g = svg.append("g")
+  .attr("id", "dots")
+  .attr("clip-path", "url(#clipRect)");
+
+dots_g.selectAll("circle")
+  .data(dots)
+  .join("circle")
+  .attr("cx", (d) => d.x)
+  .attr("cy", (d) => d.y)
+  .attr("fill", "blue");
+
+display(svg.node());
+
+```
+
+