31:Tae3,make_chart = { var data = chart_data; play_button; const band_width = band_gap + bar_size; data.map((d, i) => { var first = i == 0; let last = i == data.length - 1; let colors = colors_map[d.Color || "white"]; let container = new Zdog.Anchor({ addTo: illo, translate: { x: band_width * 2 * i, y: 0 } }); container.__NAME = "BAR"; let anchor = new Zdog.Anchor({ addTo: container, translate: { z: -15 } }); let anchor2 = new Zdog.Anchor({ addTo: container, translate: { y: 10 } }); let anchor3 = new Zdog.Anchor({ addTo: container, translate: {y: -scale(d.Value)-35} }); var box = new Zdog.Box({ addTo: anchor, width: bar_size, height: scale(d.Value), depth: bar_size, stroke: false, color: colors.default, // default face color leftFace: colors.sides, rightFace: colors.sides, topFace: colors.lids, bottomFace: colors.lids }); var text = new Zdog.Text({ addTo: anchor2, font: opensans, value: (d.Key || '') + '', fontSize: font_size, color: '#fdfa62', textAlign: 'center', textBaseline: 'middle', fill: true, stroke: false }); var text2 = new Zdog.Text({ addTo: anchor3, font: opensans, value: '$'+(d.Value+'B' || '') + '', fontSize: font_size, fontWeight: 'bold', color: '#fdfa62', textAlign: 'center', textBaseline: 'middle', fill: true, stroke: false }); var chart_width = (data.length - 1) * band_width * 2; illo.__3d_tx = -chart_width * Math.cos(-0.45) * 0.5; illo.__3d_ty = -chart_width * Math.sin(0.45) * 0.15; illo.__2d_tx = -chart_width * 0.5; illo.__2d_ty = 120; //illo.__viewtype = "3d" mutable view_type = true; set_view_type(); box.scale.y = 0; box.scale.x = 0; box.scale.z = 0; text.rotate.x = -1; text.color = "rgba(255,255,255,0)"; const tweet = { offset: 0, height: 0, tr: -1 }; const tween = new TWEEN.Tween(tweet) .to({ offset: -scale(d.Value) / 2, height: 1, tr: 0 }, animationSpeed) .delay(i * animationSpeed) .easing(TWEEN.Easing.Quadratic.Out) .onUpdate(() => { anchor.translate.y = tweet.offset; box.scale.y = tweet.height; text.rotate.x = tweet.tr; }) .onStart(() => { box.scale.x = 1; box.scale.z = 1; text.color = text_color; }) .onComplete(() => { if (last) { mutable view_type = false; set_view_type(); } }) .start(); }); invalidation.then(() => { illo.children.map(d => d.remove()); illo.children = []; }); return illo; }32:[{"id":"23010ac5994f67c0fd687d4bbe376644cea5f8001d8d583657dbf6ed0d9546bcf184e49819e4869a82d93e7a8830313e441add0bcec7286329487f754dc042c8","href":"https://static.observableusercontent.com/files/23010ac5994f67c0fd687d4bbe376644cea5f8001d8d583657dbf6ed0d9546bcf184e49819e4869a82d93e7a8830313e441add0bcec7286329487f754dc042c8","name":"OpenSans-Regular.ttf","type":"font/ttf","lastModified":1619821761271.741,"size":217360},{"id":"37aa6ef8f171dae006df82e4e4e5bfc00399e00dc2cea34906ace4445c4279bc0060dd63e5fe7aaceb61a7d37b8d8745a794eb393b3be7895be9a712070b0aae","href":"https://static.observableusercontent.com/files/37aa6ef8f171dae006df82e4e4e5bfc00399e00dc2cea34906ace4445c4279bc0060dd63e5fe7aaceb61a7d37b8d8745a794eb393b3be7895be9a712070b0aae","name":"data.csv","type":"text/csv","lastModified":1619859690861.525,"size":94}] 2f:{"title":"Virtual Reality Gaming Revenue.","cells":[{"id":0,"value":"html`

Virtual Reality Gaming Revenue.

Week 5:Uncertainties. Day 30: 3D.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"html`

Revenue projections for VR gaming industry.\n
Chart has been made using:\nAlok Pepakayala's notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"html`

Data Credit:\nStatista\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof toggle2d3d = {\n var b = html`