34:["$","title",null,{"children":"How to create and manipulate 2D graphics on the web | Mario Binder | Observable"}] 3c:T55e,md` What we did here: first, we created an empty SVG container using HTML and assigned a unique ID (svg1). In the JavaScript code, we then retrieved the DOM element by its ID, created an SVG circle (in the SVG namespace), and appended it to the SVG element. Then, we set the circle's attributes. *Note on notebook cell execution order: Cells in an Observable notebook are not executed top-to-bottom but based on their dependency. In the example above, we want to demonstrate how to get an element by its ID, but we need to make sure that the HTML cell above is actually executed before the JavaScript cell below. We hack this by printing the HTML tags to the console. More on notebook cell executation orders here: https://observablehq.com/@observablehq/learning-observable-notebooks-and-cells *

**Task: Change Color**
You can use another named HTML color.
You can can also use arbitrary colors by using their hex code like this: "#ADD8E6"
You can also express colors through rgb or hsl codes, for example: "rgb(173, 216, 230)"
Find all named HTML colors here: https://www.w3schools.com/colors/colors_groups.asp

### jQuery jQuery is a popular JavaScript library that makes JavaScript code, especially to manipulate the DOM, more efficient. So let's do the same circle with jQuery into a new SVG container: `3d:T5d3,md` What we did here: We made a selection on all circle elements in SVG and joined the selection with our data. Internally, d3 now creates the corresponding circle elements if they do not exist yet. More about this magic: https://observablehq.com/@d3/selection-join The attributes *cx* and *r* (i.e., the x position and the radius) are defined by the order of the elements and the numeric data attribute, respectively. This works because every DOM element that was created from a data join is bound to its associated data. We have access to the bound data and its index in the data array through the parameters *d* and *i* in the anonymous function we have used for *cx* and *r*. In this example, we use a very simple mapping function. d3 supports many different linear, logarithmic etc. mapping functions, also for color interpolation and other variable types, such as categorical variables: https://d3js.org/d3-scale

**Task: Linear Scale Function**
Implement a clean linear scale function, which scales the radius of the circles linearly between reasonable minimum and maximum sizes. Make sure that this still works if we change the value ranges in the array! Summary statistics functions may help here: https://d3js.org/d3-array/summarize

As we are working with the DOM, we can also use all common event listeners to make our visualizations interactive. Here is a simple example how to make the visualization in *svg4* interactive: `3e:Ta1c,{ // get a webgl context from the canvas //console.log(canvas3); //let c = await document.getElementById("canvas3"); let gl = canvas3.getContext("webgl"); // set up viewport gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, 500, 100); // set up shaders const program = gl.createProgram(); let vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vs()); gl.compileShader(vertexShader); if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(vertexShader)); } let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fs()); gl.compileShader(fragmentShader); if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(fragmentShader)); } gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); // set up shader uniforms const vertexIdLoc = gl.getAttribLocation(program, 'vertexId'); const numVertsLoc = gl.getUniformLocation(program, 'numVerts'); const resolutionLoc = gl.getUniformLocation(program, 'resolution'); const numSlicesLoc = gl.getUniformLocation(program, 'numSlices'); // circle properties const numSlices = 20; const numVerts = numSlices * 3; // set up vertices const vertexIds = new Float32Array(numVerts); vertexIds.forEach((v, i) => { vertexIds[i] = i; }); // set up buffers const idBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, idBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertexIds, gl.STATIC_DRAW); gl.useProgram(program); { // enable vertix ID attribute array gl.enableVertexAttribArray(vertexIdLoc); // bind ID buffer gl.bindBuffer(gl.ARRAY_BUFFER, idBuffer); // Tell the attribute how to get data out of idBuffer (ARRAY_BUFFER) const size = 1; // 1 components per iteration const type = gl.FLOAT; // the data is 32bit floats const normalize = false; // don't normalize the data const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position const offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( vertexIdLoc, size, type, normalize, stride, offset); } // set uniforms gl.uniform1f(numVertsLoc, numVerts); gl.uniform1f(numSlicesLoc, numSlices); gl.uniform2f(resolutionLoc, gl.canvas.width, gl.canvas.height); const offset = 0; gl.drawArrays(gl.TRIANGLES, offset, numVerts); }3f:[] 38:{"id":"33d5a993e553b658","slug":"how-to-create-and-manipulate-2-d-graphics-on-the-web","title":"How to create and manipulate 2D graphics on the web","thumbnail":"fb4cafb7672dee22d6c488fc909d80577129e94177aceeb0fbea2024bf656b82","access_level":"public","create_time":"$D2026-10-22T11:36:48.310Z","update_time":"$D2026-10-22T17:58:57.758Z","view_time":null,"first_public_time":"$D2026-10-22T18:00:47.541Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9468da4b208ea721","login":"mario-binder","name":"Mario Binder","avatar_url":"https://avatars-next.observableusercontent.com/0d60f36d37e08f70d8f29fd32216daf40e5c423ee9db6b33d610f1967a5950a7","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":1262,"publish_version":1262,"role":null,"authored":false,"authors":[{"type":"individual","id":"a46a31254974a7dc","login":"mario-binder","name":"Mario Binder","avatar_url":"https://avatars-next.observableusercontent.com/0d60f36d37e08f70d8f29fd32216daf40e5c423ee9db6b33d610f1967a5950a7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9468da4b208ea721","login":"mario-binder","name":"Mario Binder","avatar_url":"https://avatars-next.observableusercontent.com/0d60f36d37e08f70d8f29fd32216daf40e5c423ee9db6b33d610f1967a5950a7","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to create and manipulate 2D graphics on the web","cells":[{"id":0,"value":"md`# How to create and manipulate 2D graphics on the web\n\nName: Mario Binder\n\nI did the other tasks as well (didn't take that much time)\n\nWe will look into different methods how to generate 2D graphics in the web:\n* Scalable Vector Graphics (SVG), including d3.js,\n* Canvas 2D, and\n* Canvas 3D (WebGL / THREE.js).\n\n## Scalable Vector Graphics (SVG)\n\nSVG graphics can be described in XML. It is part of the Document Object Model (DOM), i.e., it can be manipulated through JavaScript.\n\n### HTML / XML Syntax\nThe easiest way to create a static 2D vector graphic on the web:\nExample from https://www.w3schools.com/html/html5_svg.asp\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"Whenever we draw SVG geometry within an SVG element, we have to make sure that the container is large enough to accommodate all geometry. \n

\n**Task: Change SVG Size**
\nTry what happens when you increase the size of the circle or decrease the size of the SVG canvas. \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"md`\n### JavaScript\nWe can also generate exactly the same 2D SVG graphics using JavaScript. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"svg1 = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n //console.log(svg1); // hack to make HTML cell above be executed before this cell\n try{\n let circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\n svg1.appendChild(circle);\n circle.setAttribute(\"cx\", 50);\n circle.setAttribute(\"cy\", 50);\n circle.setAttribute(\"r\", 40);\n circle.setAttribute(\"stroke\", \"rgb(120, 120, 120)\");\n circle.setAttribute(\"stroke-width\", 2);\n circle.setAttribute(\"fill\", \"rgb(250, 250, 0)\");\n return svg1;\n } catch(err){\n console.error(\"error: \" + err);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"jQuery = require(\"jquery\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"{\n let s = jQuery(\"#svg2\");\n let circle = jQuery(document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\")).attr({\n cx: 50,\n cy: 50,\n r: 40,\n stroke: \"black\", \n \"stroke-width\": 2,\n fill: \"lightblue\"\n });\n s.append(circle);\n return s; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`\nWhat we did here: We first retrieved the new SVG container using jQuery. Then, we created a new circle, defined its attributes, and appended it to the SVG container. \n\nCompared to plain JavaScript, this requires much less code!\n\n### d3 (Data-Driven Documents)\nBy now, d3 is probably the most wide-spread library used for information visualization / data visualization. But, as the name says, d3 is not, per se, a visualization library. Like jQuery, it is very efficient to manipulate the DOM. Let us redo the example above: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"viewof val = Inputs.range([0, 10], {value: 7.9, step: 0.1, label: \"color value\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n let c = d3.color(\"lightblue\");\n c = d3.hsl(c);\n c.s = val / 10;\n return d3.select(\"#svg3\").append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 50)\n .attr(\"r\", 40)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", c);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`\nWhat we did here: we made a selection upon the SVG container, appended a new circle, and defined its attributes with very little code.\n\nHere, d3 is actually of little help compared to jQuery or even vanilla JavaScript. However, it offers some interesting built-in visualization functionality.\n\n

\n**Task: Color Slider**
\nCouple a color component with the slider provided above, e.g., the saturation or brightness.\nFor that, you can use d3-color: https://d3js.org/d3-color\n

\n\nBut what d3 is actually really good at is to automatically generate DOM elements based on data, which is organized in arrays. Let us assume we have the following number array:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"data = [5.0, 2.0, 2.5, 1.0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\nUsing d3, we can very easily map this data onto visual structures in the DOM. For each datum, we can d3 generate a **graphical mark**, and we can define the mark's **visual variables** based on each data point's attributes. In our simple example, each data point only has a single, numeric attribute. As a simple example, let's now generate one circle mark for each datum, and define its size by the numeric attribute. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"circles = {\n let c = d3.select(\"#svg4\");\n let min = 4;\n let max = 50;\n\n let radius = d3.scaleLinear(d3.extent(data), [min, max]);\n\n c.selectAll(\"circle\")\n .data(data).join(\"circle\")\n .attr(\"cx\", (d, i) => i*70+50)\n .attr(\"cy\", 50)\n .attr(\"r\", (d) => radius(d))\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"lightblue\");\n\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"{\n return circles.selectAll(\"circle\")\n .on(\"mousedown\", function(d){\n d3.select(this).attr(\"fill\", \"red\");\n })\n .on(\"mouseout\", function(){\n d3.select(this).attr(\"fill\", \"lightblue\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`\n

\n**Task: Click Event**
\nChange the event type so that the color only changes when the left mouse button is down. You can use any HTML event type to implement this functionality: https://www.w3schools.com/jsref/dom_obj_event.asp\n

\n\n*Mind that, from a perceptual point of view, this example is not recommendable, as relative circle areas can be estimated very poorly by humans!* \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"boxes = {\n let c = d3.select(\"#svg5\");\n let min = 4;\n let max = 80;\n\n let scale = d3.scaleLinear(d3.extent(data), [min, max]);\n\n c.selectAll(\"rect\")\n .data(data).join(\"rect\")\n .attr(\"x\", (d, i) => i*40+20)\n .attr(\"y\", (d) => max - scale(d))\n .attr(\"width\", 20)\n .attr(\"height\", (d) => scale(d))\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"lightblue\");\n\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n

\n**Task: Alternative Encoding**
\nThink about alternative graphical marks and visual channels that can be read more effectively. Encode our small data array using the chosen marks and channels (Bar Chart). You can find documentation about graphical marks available as SVG here: https://www.w3schools.com/graphics/svg_inhtml.asp\n

\n\nIn summary, using d3 and SVG, we can efficiently and flexible generate 2D vector graphics based on underlying data.\n\n## 2D Canvas\n\nCanvas is an HMTL5 container for bitmap graphics.\n\n### JavaScript\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"canvas1 = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"{\n //console.log(canvas1);\n //const c = await document.getElementById(\"canvas1\");\n const ctx = canvas1.getContext(\"2d\");\n ctx.beginPath();\n ctx.arc(50, 50, 40, 0, 2*Math.PI);\n ctx.fillStyle = 'lightblue';\n ctx.lineWidth = 2;\n ctx.fill();\n ctx.stroke();\n return canvas1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\nWhat we did here: we created a canvas element in HTML with a unique ID and retrieved the element through its ID using JavaScript (just like we did it for the SVG element). Then, we retrieved the *CanvasRenderingContext2D*, which is the part of the Canvas API for 2D rendering: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\n\nIf we want to create data-driven graphics, we need to loop over our data ourselves. d3 generates DOM elements; for the 2D Canvas API, we cannot use d3! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"canvas2 = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"{\n //console.log(canvas2);\n //const c = await document.getElementById(\"canvas2\");\n const ctx = canvas2.getContext(\"2d\");\n\n canvas2.addEventListener(\"mousemove\", (e) => {\n let rect = canvas2.getBoundingClientRect();\n //Had to google how to retrieve local coordinates ^^\n let coordX = (e.clientX - rect.left) * (canvas2.width / rect.width);\n let coordY = (e.clientY - rect.top) * (canvas2.height / rect.height);\n draw(ctx, coordX, coordY);\n });\n\n draw(ctx);\n\n return canvas2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"function draw(ctx, coordX = -1.0, coordY = -1.0){\n ctx.lineWidth = 2;\n let yPos = 50;\n\n data.forEach(function(d, i){\n let x = i*100+50;\n let r = d*8;\n\n ctx.beginPath();\n ctx.arc(x, yPos, r, 0, 2*Math.PI);\n ctx.closePath();\n if((coordX - x)**2 + (coordY - yPos)**2 < r**2) {\n ctx.fillStyle = 'red';\n } else {\n ctx.fillStyle = 'lightblue';\n }\n ctx.fill();\n ctx.stroke();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`\n\n\n

\n**Task: Event Handling**
\nHow could we implement a hover event like the one shown for d3 above using Canvas2D?
\nYou can find the API documentation of Canvas2D here: https://www.w3schools.com/graphics/canvas_intro.asp
\n*Hint 1*: You can also use d3 for event handling (on DOM elements).
\n*Hint 2*: clearRect() is a function you might need.
\n

\n\nIn summary, Canvas2D is much less sophisticated than d3. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`\n## 3D Canvas\n\nIf we are working with HTML5 canvas, we are not restricted to the 2D Canvas API. \n\n### WebGL\n\n\nWebGL is a low-level 3D graphics API for the web, which is exposed through HTML5 canvas. It is a JavaScript implementation of OpenGL ES 2.0. WebGL programs are written in JavaScript and GLSL shader code. It works without any required plugins on the most common browsers, such as Chrome, Firefox, and Safari. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"canvas3 = html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"Following the tutorial here to draw a single circle: https://webglfundamentals.org/webgl/lessons/webgl-drawing-without-data.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"Most of the magic happens in the vertex shader (here provided as a string, which is compiled in the code above). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"function vs() {\n return `\n attribute float vertexId; \n uniform float numVerts;\n uniform float numSlices; \n uniform vec2 resolution; \n\n #define PI radians(180.0)\n\n void main(){\n\n float sliceId = floor(vertexId / 3.0); \n float triVertexId = mod(vertexId, 3.0); \n float edge = triVertexId + sliceId; \n float angleU = edge / numSlices; \n float angle = angleU * PI * 2.0; \n float r = step(triVertexId, 1.5); \n vec2 pos = vec2(cos(angle), sin(angle)) * r; \n\n float aspect = resolution.y / resolution.x; \n\n gl_Position = vec4(pos.x * aspect - 1.0 + aspect, pos.y, 0, 1); \n }\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"function fs() {\n return `\n precision mediump float; \n\n void main(){\n gl_FragColor = vec4(0.68, 0.85, 0.9, 1); \n }\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"function renderDotGL(){\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`\nClearly, WebGL is a huge overhead, especially if we are aiming for 2D graphics. Therefore, pure WebGL is rarely used for such tasks. \n\n### THREE.js\nWe will work here with a lightweight JavaScript 3D library, namely THREE.js. THREE.js supports WebGL rendering, but it can also render to Canvas 2D, SVG, and CSS3D. It is a scene graph library: https://threejs.org/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"THREE = require(\"three@0.99.0/build/three.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n return scene;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"width = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"{\n const scale = d3.max(data);\n scene.remove.apply(scene, scene.children)\n data.forEach(function(d, i){\n let material = new THREE.MeshBasicMaterial( { color: 'skyblue' } );\n let blockHeight = height * (d / scale);\n let geometry = new THREE.PlaneGeometry( 30, blockHeight * 2);\n let mesh = new THREE.Mesh(geometry, material);\n mesh.position.x = 30 + i*60;\n mesh.position.y = 0;\n scene.add(mesh);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"camera = {\n const near = 1;\n const far = 100;\n //Replaced with an orthographic camera - it was easier that way\n const camera = new THREE.OrthographicCamera(0, width, height, 0, near, far);\n camera.position.z = 1;\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"renderer = new THREE.WebGLRenderer({antialias: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"{\n invalidation.then(() => renderer.dispose());\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`\nWhat we did here: After integrating three.js, we defined a new scene and created a circle mesh for each data point. Then, we defined a perspective camera. The THREE.WebGLRenderer then renders the scene with the given camera in an endless loop. The example was adopted from this simple THREE.js tutorial: https://observablehq.com/@mbostock/hello-three-js\n\n

\n**Task: Alternative Visual Encoding**
\nAs already mentioned above, visual encoding through circle radius / area is not ideal. Also try changing the visual encoding using THREE.js. You can find the available geometries here: https://threejs.org/docs/#api/en/core/\n

\n\nNow let's add some basic interactivity as well. We are using THREE.js' Raycaster functionality to do that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"raycaster = new THREE.Raycaster()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"view = d3.select(renderer.domElement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"{\n view.on(\"mousemove\", () => {\n let m = d3.mouse(view.node());\n let mouse = new THREE.Vector2((m[0] / width) * 2 - 1, -(m[1] / height) * 2 + 1);\n\n raycaster.setFromCamera( mouse, camera );\n \n scene.children.forEach(function(child){\n child.material.color.set(\"skyblue\"); \n }); \n \n var intersects = raycaster.intersectObjects( scene.children );\n intersects.forEach(function(is){\n is.object.material.color.set(\"red\"); \n }); \n \n renderer.render( scene, camera );\n });\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`\nWhat we did here: We are retrieving the mouse pointer coordinates through d3 and convert them to normalized device coordinates. The raycaster then computes the all intersecting elements with the ray, and we can change the intersecting elements' material color. \n\n*Mind: each circle here is rendered with 50 segments to achieve some acceptable visual quality. An alternative is to use a point geometry with a circle stencil instead. I created a more efficient (and also slightly more complex) extension of this example here using THREE.Points: https://observablehq.com/@mawald/efficient_dots_three_js*\n\n### WebGPU\n\nWebGL will soon be deprecated. WebGPU is the future of web-based graphics. As WebGPU is not yet available for all browsers, the WebGPU example can be found in a separate notebook: https://observablehq.com/@mawald/2d_graphics_webgpu\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null