44:["$","title",null,{"children":"3D Clustered Chart | Eric Lo | Observable"}] 4c:T420,chart = { const isDark = options1.theme === "dark"; /* // Simplified sample const chart = new ClusteredChart() .size([width, height]) .options({font: helvetiker}) .column({x:"territory", y:"profit", z:"quarter"}) .data(data) .render(); */ const chart = new ClusteredChart() .size([width, height]) .options({ animation: options1.animation, font: helvetiker, backgroundColor: isDark ? 0x333333 : 0xffffff, textColor: isDark ? 0xffffff : 0x333333 }) .bar({palette: d3[`scheme${options1.scheme}`]}) .wall({ visible: options1.wall, color: isDark ? 0xffffff : 0xeeeeee, showTicks: options1.wallTicks }) .floor({ visible: options1.floor, color: isDark ? 0xffffff : 0xeeeeee, showTicks: options1.floorTicks }) .column({ x: "territory", y: "profit", z: "quarter" }) .data(data) .render(); invalidation.then(() => chart.dispose()); return chart.renderer.domElement; }4d:Tf79,md`## API Reference and Source Code * **ClusteredChart(container)** - Constructs a new instance of ClusteredChart with default settings. The container is optional and it can be any DOM element. * **size([width, height])** - Sets the dimensions to specified width and height and returns this chart. * **dimensions(dimensions)** - Sets the dimensions of the 3D space to specified width, height and depth and returns this chart. * dimensions.**width** - default is 5. * dimensions.**height** - default is 2. * dimensions.**depth** - default is 5. * **options(options)** - Overrides the default options and returns this chart. * options.**animation** - a boolean value that indicates whether the animation effects is enabled. Default is true. * options.**font** - specifies the font. The value can be an url, a Three.js font instance or an instance of JSON font. * options.**backgroundColor** - specifies the background color. Default is 0xffffff. * options.**textColor** - specifies the text color. Default is 0x666666. * options.**lineColor** - specifies the line color. Default is 0xcccccc. * **bar(bar)** - Overrides the default bar settings and returns this chart. * bar.**scale** - sets the scale of bars to specified x and z. Default is {x: 0.65, z: 0.65}. * bar.**opacity** - sets the opacity of bars. Default is 0.85. * bar.**isOrdinal** - specifies whether the palette is categorical. Default is true. * bar.**palette** - sets the color palette to a categorical scheme or a continuous interpolator. Default is d3.schemeTableau10. * **wall(wall)** - Overrides the default wall settings and returns this chart. * wall.**visible** - a boolean value that indicates whether the wall is visible. Default is true. * wall.**color** - specifies the wall color. Default is 0xeeeeee. * wall.**opacity** - sets the opacity of the walls. Default is 0.9. * wall.**showTicks** - sepcifies whether the ticks are visible. * wall.**tickFormat** - specifies the tick format. Default is "~s". * **floor(floor)** - Overrides the default floor settings and returns this chart. * floor.**visible** - a boolean value that indicates whether the floor is visible. Default is true. * floor.**color** - specifies the floor color. Default is 0xeeeeee. * floor.**opacity** - sets the opacity of the floor. Default is 0.9. * floor.**showTicks** - sepcifies whether the ticks are visible. * **tooltip(tooltip)** - Overrides the default tooltip settings and returns this chart. * tooltip.**textColor** - sets the text color of the tooltip. Default is black. * tooltip.**fillColor** - sets the background color of the tooltip. Default is rgba(255, 255, 255, 0.75). * tooltip.**scale** - sets the scale of the tooltip box. Default is 0.4. * **column(column)** - Specifies the column names for each axis and return this chart. * column.**x** - sets the column name for x axis * column.**y** - sets the column name for y axis * column.**z** - sets the column name for z axis Depending on the data structure, for dataset like the first one below, column.**y** always represents the value which is the **"profit"** in this case, **x** is the **category** and **z** represents the **data points**. \`\`\`{javascript} ... .column({ x: "territory", y: "profit", z: "quarter" }) ... \`\`\`

You only need to specify the column.**x** if the dataset has already been categorized. \`\`\`{javascript} ... .column({ x: "territory" }) ... \`\`\`

* **data(_)** - Sets the data and returns this chart. * **render()** - Renders the chart and returns it's instance. * **dispose()** - Cleans up allocated memory and return this chart. * **renderer** - This property exposes the internal WebGLRenderer. * **onhover(d)** - Occurs when user hover over a bar. * **onclick(d)** - Occurs when user click on a bar.`4e:T57ab,// https://github.com/analyzer2004/clusteredchart // Copyright 2021 Eric Lo class ClusteredChart { constructor(container) { this._container = container; this._width = 0; this._height = 0; this._dims = { width: 5, height: 2, depth: 5 }; this._tickPadding = 0.1; this._options = { animation: true, font: null, backgroundColor: 0xffffff, textColor: 0x666666, lineColor: 0xcccccc }; this._column = { x: "", y: "", z: "" }; this._bar = { scale: { x: 0.65, z: 0.65 }, opacity: 0.85, isOrdinal: true, palette: d3.schemeTableau10 }; this._wall = { visible: true, color: 0xeeeeee, opacity: 0.9, showTicks: true, tickFormat: "~s" }; this._floor = { visible: true, color: 0xeeeeee, opacity: 0.9, showTicks: true }; this._tooltip = { textColor: "black", fillColor: "rgba(255,255,255,0.75)", scale: 0.4 }, // three.js objects this._raycaster = null; this._scene = null; this._sceneOrtho = null; this._camera = null; this._cameraOrtho = null; this._renderer = null; this._controls = null; this._font = null; this._pool = null; // interaction this._mouseScene = null; this._mouseScreen = null; this._hint = null; this._focus = null; this._request = null; this._bars = null; // data this._data = null; this._chartData = null; this._keysX = null; this._keysZ = null; // scales this._x = null; this._y = null; this._z = null; this._color = null // delegates this._docmousemove = e => this._mousemove(e); this._controlschange = () => this._render(); // events this._onhover = null; this._onclick = null; this._oncancel = null; } size(_) { return arguments.length ? (this._width = _[0], this._height = _[1], this) : [this._width, this._height]; } dimensions(_) { return arguments.length ? (this._dims = Object.assign(this._dims, _), this) : this._dims; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } bar(_) { return arguments.length ? (this._bar = Object.assign(this._bar, _), this) : this._bar; } wall(_) { return arguments.length ? (this._wall = Object.assign(this._wall, _), this) : this._wall; } floor(_) { return arguments.length ? (this._floor = Object.assign(this._floor, _), this) : this._floor; } tooltip(_) { return arguments.length ? (this._tooltip = Object.assign(this._tooltip, _), this) : this._tooltip; } column(_) { return arguments.length ? (this._column = Object.assign(this._column, _), this) : this._column; } data(_) { return arguments.length ? (this._data = _, this) : this._data; } onhover(_) { return arguments.length ? (this._onhover = _, this) : this._onhover; } onclick(_) { return arguments.length ? (this._onclick = _, this) : this._onclick; } oncancel(_) { return arguments.length ? (this._oncancel = _, this) : this._oncancel; } render() { this._init(); this._process(); const values = this._chartData.flatMap(d => this._keysZ.map(key => +d[key])) this._initScales(values); this._initPool(values); this._renderChart(); return this; } dispose() { const that = this; if (this._request) cancelAnimationFrame(this._request); cleanup(); this._hint.dispose(); this._detachEvents(); checkMemory(); this._renderer.dispose(); this._controls.dispose(); return this; function cleanup() { const scene = that._scene; for (let i = scene.children.length - 1; i >= 0; i--) { let obj = scene.children[i]; scene.remove(obj); if (obj instanceof THREE.Mesh || obj instanceof THREE.Line) { obj.geometry.dispose(); obj.material.dispose(); if (obj.frame) { obj.frame.geometry.dispose(); obj.frame.material.dispose(); } } } } function checkMemory() { const memory = that._renderer.info.memory; if (memory.geometries > 0 || memory.textures > 0) console.log(memory); } } get renderer() { return this._renderer; } _init() { this._raycaster = new THREE.Raycaster(); this._scene = new THREE.Scene(); this._sceneOrtho = new THREE.Scene(); this._renderer = new THREE.WebGLRenderer({ antialias: true }); this._mouseScene = new THREE.Vector2(); this._mouseScreen = new THREE.Vector2(); this._camera = new THREE.PerspectiveCamera(75, this._width / this._height, 0.5, 500); this._cameraOrtho = new THREE.OrthographicCamera(-this._width / 2, this._width / 2, this._height / 2, -this._height / 2, 1, 10); this._cameraOrtho.position.z = 10; if (this._container) this._container.appendChild(this._renderer.domElement); this._renderer.setPixelRatio(window.devicePixelRatio); this._renderer.setSize(this._width, this._height); this._renderer.autoClear = false; this._camera.aspect = this._width / this._height; this._camera.updateProjectionMatrix(); this._camera.position.x = -2.5; this._camera.position.y = 5; this._camera.position.z = 5; this._scene.position.x = -this._dims.width / 2; this._scene.position.y = this._dims.height / 2; this._scene.position.z = -this._dims.depth / 2; this._scene.background = new THREE.Color(this._options.backgroundColor); this._render(); this._hint = this._createHint(); } _process() { const column = this._column; if (this._data === null || this._data.length === 0) throw "No data to display."; if (column.x === "" && column.y === "" && column.z === "") throw "Please specify the column names."; const keys = Object.keys(this._data[0]); if (column.x !== "" && column.z !== "") { if (!keys.includes(column.x) || !keys.includes(column.y) || !keys.includes(column.z)) throw "Please verify if the specified column names are correct." const xmap = new Map(); this._data.forEach(d => { const key = d[column.x]; let x = xmap.get(key); if (!x) { x = new Object(); x[column.x] = key; xmap.set(key, x); } if (x) x[d[column.z]] = +d[column.y]; }); this._chartData = [...xmap.values()]; } else { if (!keys.includes(column.x)) throw "Please verify if the specified column.x is correct." this._chartData = this._data; } this._keysX = this._chartData.map(d => d[column.x]); let max = 0, mindex = 0; this._chartData.forEach((d, i) => { const len = Object.keys(d).length; if (len > max) { max = len; mindex = i; } }) this._keysZ = Object.keys(this._chartData[mindex]).filter(d => d !== column.x); } _initPool(values) { const that = this; this._pool = { boxGeometry: new THREE.BoxBufferGeometry(1, 1, 1), boxMaterials: this._bar.isOrdinal ? generateByKeys() : generateByValues(), textMaterial: new THREE.MeshBasicMaterial({ color: this._options.textColor }), lineMaterial: new THREE.LineBasicMaterial({ color: this._options.lineColor }), dispose: function () { this.boxGeometry.dispose(); this.boxMaterials.forEach(m => m.dispose()); this.textMaterial.dispose(); this.lineMaterial.dispose(); } } function generateByKeys() { return new Map(that._keysX.map(d => [ d, new THREE.MeshBasicMaterial({ color: that._color(d), opacity: that._bar.opacity, transparent: true }) ])); } function generateByValues() { return new Map( values .filter((value, index, self) => self.indexOf(value) === index) .map(v => [ v, new THREE.MeshBasicMaterial({ color: that._color(v), opacity: that._bar.opacity, transparent: true }) ])); } } _initScales(values) { const ext = d3.extent(values); this._x = d3.scaleBand().domain(this._keysX).range([0, this._dims.width]); this._y = d3.scaleLinear().domain(ext).range([0, this._dims.height]); this._z = d3.scaleBand().domain(this._keysZ).range([this._dims.depth, 0]); this._color = this._bar.isOrdinal ? d3.scaleOrdinal().domain(this._keysX).range(this._bar.palette) : d3.scaleSequential(this._bar.palette).domain(ext); } _renderChart() { const f = this._options.font; if (typeof f === "string") this._loadThenDraw(); else if (typeof f === "object") { if (f.type && f.type === "Font" && f.data) this._font = f; else if (f.glyphs) this._font = new THREE.FontLoader().parse(f); this._drawChart(); } } _loadThenDraw() { const manager = new THREE.LoadingManager(); manager.onLoad = () => { this._drawChart(); } new THREE.FontLoader(manager).load(this._options.font, f => this._font = f); } _drawChart() { const that = this; this._drawElements(); this._initControls(); if (this._options.animation) animate(); this._attachEvents(); that._render(); function animate() { that._request = requestAnimationFrame(animate); if (that._bars.length > 0) that._growBars(); else { // exit the animation loop after finished cancelAnimationFrame(that._request); that._request = null; return; } that._render(); } } _render() { this._renderer.clear(); this._renderer.render(this._scene, this._camera); this._renderer.clearDepth(); this._renderer.render(this._sceneOrtho, this._cameraOrtho); } _growBars() { for (let i = this._bars.length - 1; i >= 0; i--) { const bar = this._bars[i]; if (bar.scale.y <= bar.targetHeight) { bar.scale.y += 0.05; bar.position.y = bar.scale.y / 2; if (bar.scale.y >= bar.targetHeight) { bar.scale.y = bar.targetHeight; bar.position.y = bar.targetHeight / 2; this._bars.splice(i, 1); } } } } _drawElements() { // floor margin const margin = this._floor.visible ? { x: this._dims.width / 20, z: this._dims.depth / 20 } : { x: 0, z: 0 }; this._drawBars(margin); this._drawFloorAndWalls(margin); } _drawBars(margin) { const sx = this._x.bandwidth() * this._bar.scale.x, sz = this._z.bandwidth() * this._bar.scale.z, hsx = sx / 2, hsz = sz / 2, qsx = sx / 4, qsz = sz / 4, halfPI = Math.PI / 2; this._bars = []; this._chartData.forEach((row, i) => { const tx = row[this._column.x], x = this._x(tx) + margin.x / 2; if (this._floor.showTicks) { const t = this._addText(tx, hsx, 0, x + hsx + qsx, 0, 0, halfPI, Math.PI, -halfPI); t.position.z = this._calcTextWidth(t) + this._dims.depth + margin.z + this._tickPadding; } this._keysZ.forEach(key => { const value = row[key], h = this._y(value), z = this._z(key) + margin.z / 2; if (i === 0 && this._floor.showTicks) this._addText(key, hsz, 0, -this._tickPadding, 0, z + qsz, halfPI, Math.PI, 0); const bar = this._addBar(sx, h, sz, x, 0, z, this._bar.isOrdinal ? tx : value); bar.info = { keyX: tx, keyZ: key, value }; }); }); } _drawFloorAndWalls(margin) { const thickness = 0.025; const floor = { width: this._dims.width + margin.x, depth: this._dims.depth + margin.z, x: 0, z: 0 }; const backWall = { x: floor.x, y: 0, z: 0 }, sideWall = { x: floor.x + floor.width, y: 0, z: floor.z }; if (this._floor.visible) this._addWall(floor.width, thickness, floor.depth, floor.x, 0, floor.z, this._floor.color, this._floor.opacity); if (this._wall.visible) { // backwall this._addWall(floor.width, this._dims.height, thickness, backWall.x, backWall.y, backWall.z, this._wall.color, this._wall.opacity); // sidewall this._addWall(thickness, this._dims.height, floor.depth, sideWall.x, sideWall.y, sideWall.z, this._wall.color, this._wall.opacity); } if (this._wall.showTicks) { let ticks, th, fmtr; if (this._wall.showTicks) { ticks = this._y.ticks(); th = this._dims.height / ticks.length * 0.5; fmtr = d3.format(this._wall.tickFormat); } // backwall ticks (x wall) ticks.forEach(tick => { const y = this._y(tick); const t = this._addText(fmtr(tick), th, 0, 0, y, backWall.z, 0, 0, 0); t.position.x = -this._calcTextWidth(t) - this._tickPadding; this._addLine( new THREE.Vector3(backWall.x, y, backWall.z + thickness), new THREE.Vector3(sideWall.x - thickness, y, backWall.z + thickness) ); }); // sidewall ticks (z wall) ticks.forEach(tick => { const y = this._y(tick); const t = this._addText(fmtr(tick), th, 0, sideWall.x, y, 0, 0, -Math.PI / 2, 0); t.position.z = floor.depth + this._tickPadding; this._addLine( new THREE.Vector3(sideWall.x - thickness, y, backWall.z + thickness), new THREE.Vector3(sideWall.x - thickness, y, floor.depth) ); }); } } _calcTextWidth(text) { if (!text.geometry.boundingBox) text.geometry.computeBoundingBox(); return text.geometry.boundingBox.max.x; } _createHint() { const that = this, size = 36, canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"); ctx.font = `${size}px tahoma`; const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; const material = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(material); this._sceneOrtho.add(sprite); return { sprite, update: function (target) { const texts = [target.info.keyX, target.info.keyZ, target.info.value], w = Math.max(...texts.map(d => ctx.measureText(d).width)), dim = { w: w + 40, h: size * 3 + 10 }; ctx.clearRect(0, 0, 1000, 1000); ctx.fillStyle = that._tooltip.fillColor; ctx.fillRect(0, 0, dim.w, dim.h); ctx.fillStyle = that._tooltip.textColor; texts.forEach((t, i) => ctx.fillText(t, 10, size * (i + 1))); texture.needsUpdate = true; sprite.center.set(0.5, 0.5); sprite.scale.set(300 * that._tooltip.scale, 200 * that._tooltip.scale, 1); // 3:2 scale sprite.position.set(that._mouseScreen.x - that._width / 2, -that._mouseScreen.y + that._height / 2, 1); }, clear: function () { ctx.clearRect(0, 0, 1000, 1000); texture.needsUpdate = true; }, dispose: function () { that._sceneOrtho.remove(this.sprite); this.sprite.geometry.dispose(); this.sprite.material.map.dispose(); this.sprite.material.dispose(); } } } _addFrame(target) { const geometry = new THREE.EdgesGeometry(target.geometry); const material = new THREE.LineBasicMaterial({ color: 0x0, linewidth: 1 }); const frame = new THREE.LineSegments(geometry, material); frame.renderOrder = 1; target.frame = frame; target.add(frame); } _addText(text, size, h, x, y, z, rx, ry, rz) { const geometry = new THREE.TextBufferGeometry( text, {font: this._font, size: size, height: h} ); geometry.computeBoundingSphere(); geometry.computeVertexNormals(); const mesh = new THREE.Mesh(geometry, this._pool.textMaterial); mesh.position.set(x, y, z); mesh.rotation.set(rx, ry, rz); this._scene.add(mesh); return mesh; } _addBar(w, h, d, x, y, z, key) { const mesh = this._createMesh( this._pool.boxGeometry, this._pool.boxMaterials.get(key), w, h, d, x, y, z ); if (this._options.animation) { mesh.scale.set(w, 0, d); mesh.targetHeight = h; this._bars.push(mesh); } else mesh.scale.set(w, h, d); return mesh; } _addWall(w, h, d, x, y, z, color, opacity) { const geometry = new THREE.BoxBufferGeometry(w, h, d); const material = new THREE.MeshBasicMaterial({ color: color, opacity: opacity, transparent: true }); return this._createMesh(geometry, material, w, h, d, x, y, z); } _createMesh(geometry, material, w, h, d, x, y, z) { const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x + w / 2, y + h / 2, z + d / 2); this._scene.add(mesh); return mesh; } _addLine(f, t) { const geometry = new THREE.BufferGeometry().setFromPoints([f, t]); const line = new THREE.Line(geometry, this._pool.lineMaterial); this._scene.add(line); return line; } _attachEvents() { document.addEventListener("mousemove", this._docmousemove, false); this._controls.addEventListener("change", this._controlschange); } _detachEvents() { document.removeEventListener("mousemove", this._docmousemove); this._controls.removeEventListener("change", this._controlschange); } _mousemove(e) { //e.preventDefault(); if (e.target instanceof HTMLCanvasElement) { this._mouseScreen.x = e.offsetX; this._mouseScreen.y = e.offsetY; this._mouseScene.x = (e.offsetX / this._width) * 2 - 1; this._mouseScene.y = -(e.offsetY / this._height) * 2 + 1; this._intersect(); } } _intersect() { const that = this; this._camera.updateMatrixWorld(); this._cameraOrtho.updateMatrixWorld(); this._raycaster.setFromCamera(this._mouseScene, this._camera); const intersects = this._raycaster.intersectObjects(this._scene.children); if (intersects.length > 0) { let target; for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.info) { target = intersects[i].object; break; } } if (target) { if (this._focus !== target) { cancelFocus(); this._focus = target; this._addFrame(this._focus); this._hint.update(this._focus); this._render(); } } else cancelFocus(); } else cancelFocus(); function cancelFocus() { const f = that._focus; if (f) { if (f.frame) { f.remove(f.frame); f.frame.geometry.dispose(); f.frame.material.dispose(); f.frame = null; } that._focus = null; that._hint.clear(); that._render(); } } } _initControls() { this._controls = new OrbitControls(this._camera, this._renderer.domElement); this._controls.screenSpacePanning = false; this._controls.maxPolarAngle = Math.PI / 2.5; this._controls.minDistance = 1.12; this._controls.maxDistance = 10; } }4f:[{"id":"5c80552ddd05ad7b0d97f582aa27ea25c3de8fb267332d0018f9a57b178b53545e9363f3d8eef4c4a181ec5f3324b077475e2a90e2af8fe3a8daba92bead36ad","href":"https://static.observableusercontent.com/files/5c80552ddd05ad7b0d97f582aa27ea25c3de8fb267332d0018f9a57b178b53545e9363f3d8eef4c4a181ec5f3324b077475e2a90e2af8fe3a8daba92bead36ad","name":"profit.csv","type":"text/csv","lastModified":1611782208391.962,"size":3622},{"id":"96de168b4636f1225057fcc51889a0cadac9fe2396cecb9b1e24c16496cbd15cb8475297e15122cf9f7b3d40eef8e7ccd9d521f249a2573620470f1cb6d33315","href":"https://static.observableusercontent.com/files/96de168b4636f1225057fcc51889a0cadac9fe2396cecb9b1e24c16496cbd15cb8475297e15122cf9f7b3d40eef8e7ccd9d521f249a2573620470f1cb6d33315","name":"helvetiker_regular.typeface.json","type":"application/json","lastModified":1611782039051.06,"size":63181},{"id":"91e44ce1afd619da6cc2d9e09a03c8f05613b965e31913557297ec78175b7b0a7e0ffc595b9655e1f28aee57ca035f2b2db00884e1d8ca61f6ee5ba0156ad7cb","href":"https://static.observableusercontent.com/files/91e44ce1afd619da6cc2d9e09a03c8f05613b965e31913557297ec78175b7b0a7e0ffc595b9655e1f28aee57ca035f2b2db00884e1d8ca61f6ee5ba0156ad7cb","name":"data2.png","type":"image/png","lastModified":1612140583387.908,"size":58004},{"id":"83ec84e916d6829c05bfbb1e27030031d708e9bbc9842edd52410e88f5a377f1b16796b79c7de55180ceb6fc7348171498b1502d672eea645183493b11ae2403","href":"https://static.observableusercontent.com/files/83ec84e916d6829c05bfbb1e27030031d708e9bbc9842edd52410e88f5a377f1b16796b79c7de55180ceb6fc7348171498b1502d672eea645183493b11ae2403","name":"data1.png","type":"image/png","lastModified":1612140575528.523,"size":66319}] 48:{"id":"8587f27b8091314a","slug":"3d-clustered-chart","title":"3D Clustered Chart","thumbnail":"08a08a5292d79470f329c92ba0a29eb846b35391a3af307c32edca8b81b73fd4","access_level":"public","create_time":"$D2021-01-27T21:12:33.579Z","update_time":"$D2021-12-04T21:15:20.363Z","view_time":null,"first_public_time":"$D2021-02-01T17:45:45.404Z","has_unpublished_edits":null,"fork":false,"stars":42,"starred":false,"owner":{"type":"team","id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":"starter_2024","bio":"code💻 • dataviz📈\nanalyzer2004@gmail.com","followed_by_you":false,"follows_you":false},"version":526,"publish_version":526,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"bio":"code💻 • dataviz📈\nanalyzer2004@gmail.com","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"role":"editor"}],"comments":[{"id":"5b9ba8a86cc554a2","reply_to_id":null,"content":"Just so you know, two out of four tick-axes are in mirrored writing for on my laptop","create_time":"$D2021-02-02T14:53:20.293Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"b1ba96dda7f46992","reply_to_id":"5b9ba8a86cc554a2","content":"Fixed, thanks :-)","create_time":"$D2021-02-02T16:55:11.236Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":30,"collection":{"id":"92cb1ea398b0ccf6","slug":"three-js","title":"5. D3 + Three.js","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"type":"notebook","body":{"titling":"auto","title":"3D Clustered Chart","cells":[{"id":0,"value":"md`# 3D Clustered Chart\n**ClusteredChart** is a 3D representation of the grouped column chart visualizing categorical dataset in three-dimensional space. The first example below demonstrates the most common use case for displaying a multi-series categorical dataset.\n\nFor anyone who is interested in Three.js. Dig into the source code will definitely help you understand many of the essential techniques necessary to add an extra dimension to your next data visualization. It covers:\n1. The mixed use of D3 and Three.js.\n2. The basic use of PerspectiveCamera, OrthographicCamera and OrbitControls.\n3. The use of 2D layer for displaying information on top of the 3D world.\n * Detect and intersect mouse movement using Raycaster\n * Highlight corresponding object\n * Display tooltip using Sprite\n4. Different font/resource loading methods.\n5. Pooling reosurces like geometry and material for better performance.\n6. Basic 3D object drawing - Mesh, Text, Line, WireFrame.\n7. Basic animation.\n8. Resource disposal.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof options1 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`3D Heat Map - \n\\`\\`\\`{javascript> \n .bar({\n scale: {x: 1, z: 1},\n isOrdinal: false,\n palette: d3.interpolateYlOrRd\n })\n ...\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof options2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"chart3 = { \n const chart = new ClusteredChart() \n .size([width, height])\n .dimensions({x:10 * +options2.days/60})\n .options({ \n font: helvetiker,\n textColor: 0x666666,\n lineColor: 0xcccccc\n }) \n .bar({\n scale: {x: 1, z: 1},\n isOrdinal: false,\n palette: d3.interpolateYlOrRd\n })\n .floor({visible: false})\n .wall({visible: false})\n .column({x: \"date\"})\n .data(covid(options2.field, Array.from(map).map(d => d[1]).join(\",\"), +options2.days).reverse())\n .render();\n \n invalidation.then(() => chart.dispose());\n return chart.renderer.domElement; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"md`### Source Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md`### Data and other stuff...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = d3.csvParse(await FileAttachment(\"profit.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"height = screen.height * 0.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"function form(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => event.preventDefault());\n //form.addEventListener(\"change\", () => container.dispatchEvent(new CustomEvent(\"input\")));\n form.addEventListener(\"input\", () => container.value = formValue(form));\n container.value = formValue(form);\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function formValue(form) {\n const object = {};\n for (const input of form.elements) {\n if (input.disabled || !input.hasAttribute(\"name\")) continue;\n let value = input.value;\n switch (input.type) {\n case \"range\":\n case \"number\": {\n value = input.valueAsNumber;\n break;\n }\n case \"date\": {\n value = input.valueAsDate;\n break;\n }\n case \"radio\": {\n if (!input.checked) continue;\n break;\n }\n case \"checkbox\": {\n if (input.checked) value = true;\n else if (input.name in object) continue;\n else value = false;\n break;\n }\n case \"file\": {\n value = input.multiple ? input.files : input.files[0];\n break;\n }\n case \"select-multiple\": {\n value = Array.from(input.selectedOptions, option => option.value);\n break;\n }\n }\n object[input.name] = value;\n }\n return object;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import {map, getYesterdayNumbers} from \"@analyzer2004/covid-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"import {covid} from \"@analyzer2004/performance-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"helvetiker = JSON.parse(await FileAttachment(\"helvetiker_regular.typeface.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.124.0/build/three.min.js\");\n await require(\"three@0.124.0/examples/js/controls/OrbitControls.js\").catch(() => {}); \n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"OrbitControls = THREE.OrbitControls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null