29:null 2a:["$","title",null,{"children":"How to create a 3D engine from scratch using Vega | Mathias Tiberghien | Observable"}] 2f:T6e49,spec = ({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"colors", "value":["#77A7FB","#E57368","#FBCB43"] }, { "name":"size", "init":"min(width,height)/3" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":45, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"scale", "value":1, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1}, "on": [{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"scaleX", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleY", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleZ", "value":0.7, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"paddingX", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"paddingY", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360.0", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360.0", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"hover", "init":"{}", "on": [{"events":"@face_xy:mousemove[event.buttons === 0],@face_xz:mousemove[event.buttons === 0],@face_yz:mousemove[event.buttons === 0]", "update":"datum"}, {"events":"area:mouseout", "update":"{}"}] }, { "name":"hover_band_x", "init":"{}", "on": [{"events":"@band_x:mousemove[event.buttons === 0]", "update":"datum"}, {"events":"area:mouseout", "update":"{}"}] }, { "name":"hover_band_y", "init":"{}", "on": [{"events":"@band_y:mousemove[event.buttons === 0]", "update":"datum"}, {"events":"area:mouseout", "update":"{}"}] } ], "scales":[ { "name":"x", "type":"band", "domain":{"data":"table", "field":"dim_1"}, "range":[0, {"signal":"size * scale * scaleX"}], "padding":{"signal":"paddingX"} }, { "name":"y", "type":"band", "domain":{"data":"table", "field":"dim_2"}, "range":[0, {"signal":"size * scale * scaleY"}], "padding":{"signal": "paddingY"} }, { "name":"z", "type":"linear", "domain":{"data":"table", "field":"value"}, "range":[0, {"signal":"size * scale * scaleZ"}], "zero":true }, { "name":"colorX", "type": "ordinal", "domain":{"data":"table", "field":"dim_1"}, "range":{"signal":"colors"} } ], "data":[ { "name":"table", "values":[ { "dim_1":"A", "dim_2":"1", "value":23 }, { "dim_1":"B", "dim_2":"1", "value":32 }, { "dim_1":"C", "dim_2":"1", "value":67 }, { "dim_1":"A", "dim_2":"2", "value":50 }, { "dim_1":"B", "dim_2":"2", "value":18 }, { "dim_1":"C", "dim_2":"2", "value":24 }, { "dim_1":"A", "dim_2":"3", "value":30 }, { "dim_1":"B", "dim_2":"3", "value":36 }, { "dim_1":"C", "dim_2":"3", "value":33 } ] }, { "name":"source", "source":"table", "transform":[ { "type":"formula", "expr": "{x1:(scale('x', datum.dim_1) - range('x')[1]/2), x2:(scale('x', datum.dim_1) + bandwidth('x') - range('x')[1]/2), y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:min(0,scale('z', datum.value)) , z2: max (0, scale('z', datum.value))}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y:datum.points.y2},{x: datum.points.x2, y:datum.points.y2}, {x: datum.points.x2, y:datum.points.y1},{x: datum.points.x1, y:datum.points.y1},{x:datum.points.x1, y:datum.points.y2}]", "as":"xyPoints" }, { "type":"formula", "expr":"[{x:datum.points.x1, z:datum.points.z2},{x: datum.points.x2, z:datum.points.z2}, {x: datum.points.x2, z:datum.points.z1},{x: datum.points.x1, z:datum.points.z1},{x:datum.points.x1, z:datum.points.z2}]", "as":"xzPoints" }, { "type":"formula", "expr":"[{y:datum.points.y1, z:datum.points.z2},{y: datum.points.y2, z:datum.points.z2}, {y: datum.points.y2, z:datum.points.z1},{y: datum.points.y1, z:datum.points.z1},{y:datum.points.y1, z:datum.points.z2}]", "as":"yzPoints" }, { "type":"flatten", "fields":["xyPoints", "xzPoints", "yzPoints"], "as":["xy", "xz", "yz"] } ] }, { "name":"projectedPoints", "source":"source", "transform":[ { "type":"formula", "expr":"isXYBack ? datum.points.z1 : datum.points.z2", "as":"usedPointZ" }, { "type":"formula", "expr":"isYZBack ? datum.points.x1 : datum.points.x2", "as":"usedPointX" }, { "type":"formula", "expr":"isXZBack ? datum.points.y1 : datum.points.y2", "as":"usedPointY" }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.usedPointZ - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.usedPointZ + q.z*datum.xy.x, z:q.w * datum.usedPointZ + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.usedPointZ }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"xy_z" }, { "type":"formula", "expr":"{x:q.w * datum.xz.x + q.y*datum.xz.z - q.z * datum.usedPointY, y:q.w * datum.usedPointY - q.x * datum.xz.z + q.z*datum.xz.x, z:q.w * datum.xz.z + q.x*datum.usedPointY - q.y * datum.xz.x, w: -q.x * datum.xz.x - q.y * datum.usedPointY - q.z * datum.xz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"xz_z" }, { "type":"formula", "expr":"{x:q.w * datum.usedPointX + q.y*datum.yz.z - q.z * datum.yz.y, y:q.w * datum.yz.y - q.x * datum.yz.z + q.z*datum.usedPointX, z:q.w * datum.yz.z + q.x*datum.yz.y - q.y * datum.usedPointX, w: -q.x * datum.usedPointX - q.y * datum.yz.y - q.z * datum.yz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"yz_z" }, { "type":"window", "ops":["max","max","max"], "groupby":["dim_1","dim_2", "value"], "fields":["xy_z","xz_z","yz_z"], "frame": [ null, null ] }, { "type":"formula", "expr":"max(datum.max_xy_z, max(datum.max_xz_z, datum.max_yz_z))", "as":"max_z" }, { "type":"project", "fields":["dim_1","dim_2","value", "xy_x","xy_y","xz_x","xz_y","yz_x","yz_y","max_z"] }, { "type":"collect", "sort":{"field":["max_z"]} } ] }, { "name":"ground", "values":[{"points":{}}], "transform": [ { "type":"formula", "expr":"{x1:-(range('x')[1])/2, x2:(range('x')[1])/2, y1:-(range('y')[1])/2, y2:(range('y')[1])/2, z2:0}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y:datum.points.y2},{x: datum.points.x2, y:datum.points.y2}, {x: datum.points.x2, y:datum.points.y1},{x: datum.points.x1, y:datum.points.y1},{x:datum.points.x1, y:datum.points.y2}]", "as":"xyPoints" }, { "type":"flatten", "fields":["xyPoints"], "as":["xy"] }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] }, { "name":"values", "source":"table", "transform": [ { "type":"formula", "expr": "{x1:(scale('x', datum.dim_1) - range('x')[1]/2), x2:(scale('x', datum.dim_1) + bandwidth('x') - range('x')[1]/2), y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:0 , z2: (scale('z', (datum.value + 10)))}", "as":"points" }, { "type":"formula", "expr":"{x:datum.points.x1 + (datum.points.x2 - datum.points.x1)/2, y:datum.points.y1}", "as":"xy" }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] }, { "name":"dim_2s", "source":"table", "transform": [ { "type":"project", "fields":["dim_2"] }, { "type":"aggregate", "groupby":["dim_2"] }, { "type":"formula", "expr": "(isValid(hover.dim_2) && hover.dim_2 === datum.dim_2) || (isValid(hover_band_y.dim_2) && hover_band_y.dim_2 === datum.dim_2) ? 40 : 10", "as":"usedOffset" }, { "type":"formula", "expr": "{x1: -datum.usedOffset - range('x')[1]/2, x2: datum.usedOffset + range('x')[1]/2, y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:0 , z2: 0}", "as":"points" }, { "type":"formula", "expr": "isYZBack ? datum.points.x1 : datum.points.x2", "as": "usedX" }, { "type":"formula", "expr":"[{x: datum.usedX, y:datum.points.y1}]", "as":"xyPoints" }, { "type":"flatten", "fields":["xyPoints"], "as":["xy"] }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] }, { "name":"dim_1s", "source":"table", "transform": [ { "type":"project", "fields":["dim_1"] }, { "type":"aggregate", "groupby":["dim_1"] }, { "type":"formula", "expr": "(isValid(hover.dim_1) && hover.dim_1 === datum.dim_1) || (isValid(hover_band_x) && hover_band_x.dim_1 === datum.dim_1) ? 40 : 10", "as":"usedOffset" }, { "type":"formula", "expr": "{y1: -datum.usedOffset - range('y')[1]/2, y2: datum.usedOffset + range('y')[1]/2, x1:(scale('x', datum.dim_1) - (range('x')[1]/2)), x2: (bandwidth('x') + scale('x', datum.dim_1) - (range('x')[1]/2) ) , z1:0 , z2: 0}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1 + (datum.points.x2 - datum.points.x1)/2, y:isXZBack ? datum.points.y1 : datum.points.y2}]", "as":"xyPoints" }, { "type":"flatten", "fields":["xyPoints"], "as":["xy"] }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] }, { "name":"dim_1_bands", "source":"dim_1s", "transform": [ { "type":"project", "fields":["dim_1"] }, { "type":"formula", "expr": "{y1: -range('y')[1]/2, y2: range('y')[1]/2, x1:(scale('x', datum.dim_1) - (range('x')[1]/2)), x2: (bandwidth('x') + scale('x', datum.dim_1) - (range('x')[1]/2) ) , z1:0 , z2: 0}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y: datum.points.y1},{x:datum.points.x2, y: datum.points.y1},{x:datum.points.x2, y: datum.points.y2},{x:datum.points.x1, y: datum.points.y2},{x:datum.points.x1, y: datum.points.y1}]", "as":"xyPoints" }, { "type":"flatten", "fields":["xyPoints"], "as":["xy"] }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] }, { "name":"dim_2_bands", "source":"dim_2s", "transform": [ { "type":"project", "fields":["dim_2"] }, { "type":"formula", "expr": "{x1: - range('x')[1]/2, x2: range('x')[1]/2, y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:0 , z2: 0}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y: datum.points.y1},{x:datum.points.x2, y: datum.points.y1},{x:datum.points.x2, y: datum.points.y2},{x:datum.points.x1, y: datum.points.y2},{x:datum.points.x1, y: datum.points.y1}]", "as":"xyPoints" }, { "type":"flatten", "fields":["xyPoints"], "as":["xy"] }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.points.z2 - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.points.z2 + q.z*datum.xy.x, z:q.w * datum.points.z2 + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.points.z2}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y ) + height/2", "as":"y" } ] } ], "marks":[ { "type":"area", "from":{"data":"ground"}, "encode":{ "update":{ "fill":{"value":"grey"}, "opacity":[{"test":"isXYBack", "value": 0.1},{"value":0.3}], "x":[{"field":"x"}], "y":[{"field":"y"}], "y2":{"value":0} } } }, { "type":"group", "from":{"facet":{"name": "bands_x", "data":"dim_1_bands", "groupby":["dim_1"]}}, "marks":[ { "type":"area", "name":"band_x", "interactive":true, "from":{"data":"bands_x"}, "encode":{ "update":{ "fill":[{"test":"isValid(hover_band_x.dim_1) && datum.dim_1 === hover_band_x.dim_1","value": "grey"},{"test":"isValid(hover.dim_1) && datum.dim_1 === hover.dim_1","value": "grey"},{"value":"transparent"}], "x":[{"field":"x"}], "y":[{"field":"y"}], "y2":{"value":0}, "opacity":{"value":0.2} } } } ] }, { "type":"group", "from":{"facet":{"name": "bands_y", "data":"dim_2_bands", "groupby":["dim_2"]}}, "marks":[ { "type":"area", "name":"band_y", "interactive":true, "from":{"data":"bands_y"}, "encode":{ "update":{ "fill":[{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 === hover_band_y.dim_2","value": "grey"},{"test":"isValid(hover.dim_2) && datum.dim_2 === hover.dim_2","value": "grey"},{"value":"transparent"}], "x":[{"field":"x"}], "y":[{"field":"y"}], "y2":{"value":0}, "opacity":{"value":0.2} } } } ] }, { "type":"group", "from": { "facet": { "name":"bars", "data": "projectedPoints", "groupby":["dim_1","dim_2", "value", "max_z"] } }, "marks": [ { "type":"area", "name":"face_yz", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"field":"dim_1", "scale":"colorX"}, "x":{"field":"yz_x"}, "y":{"field":"yz_y"}, "y2":{"value":0}, "opacity":[{"test":"isValid(hover.dim_1) && (datum.dim_1 !== hover.dim_1 || datum.dim_2 !== hover.dim_2)", "value": 0.3}, {"test":"isValid(hover_band_x.dim_1) && datum.dim_1 !== hover_band_x.dim_1", "value": 0.3},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 !== hover_band_y.dim_2", "value": 0.3}] } } }, { "type":"area", "name":"face_xz", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":[{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, 50 )"}], "x":{"field":"xz_x"}, "y":{"field":"xz_y"}, "y2":{"value":0}, "opacity":[{"test":"isValid(hover.dim_1) && (datum.dim_1 !== hover.dim_1 || datum.dim_2 !== hover.dim_2)", "value": 0.3},{"test":"isValid(hover_band_x.dim_1) && datum.dim_1 !== hover_band_x.dim_1", "value": 0.3},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 !== hover_band_y.dim_2", "value": 0.3}] } } }, { "type":"area", "name":"face_xy", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, isXYBack ? 80 : 30)"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"}, "y2":{"value":0}, "opacity":[{"test":"isValid(hover.dim_1) && (datum.dim_1 !== hover.dim_1 || datum.dim_2 !== hover.dim_2)", "value": 0.1},{"test":"isValid(hover_band_x.dim_1) && datum.dim_1 !== hover_band_x.dim_1", "value": 0.3},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 !== hover_band_y.dim_2", "value": 0.3}] } } } ] }, { "type":"text", "from":{"data":"values"}, "encode":{ "enter":{"align":{"value":"center"}}, "update":{ "text":{"field":"value"}, "x":{"field":"x"}, "y":{"field":"y"}, "opacity":[{"test":"isValid(hover.dim_1) && hover.dim_1 === datum.dim_1 && hover.dim_2 === datum.dim_2", "value": 1},{"test":"isValid(hover_band_x.dim_1) && hover_band_x.dim_1 === datum.dim_1", "value": 1},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 === hover_band_y.dim_2", "value": 1},{"value":0}] } } }, { "type":"text", "from":{"data":"dim_2s"}, "encode":{ "enter":{"align":{"value":"center"}}, "update":{ "text":{"field":"dim_2"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":[{"test":"isValid(hover.dim_2) && hover.dim_2 === datum.dim_2", "value": 25},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 === hover_band_y.dim_2", "value": 25},{"value":12}], "fill":[{"test":"isValid(hover.dim_2) && hover.dim_2 === datum.dim_2", "value":"green"},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 === hover_band_y.dim_2", "value": "green"},{"value":"black"}], "fontWeight":[{"test":"isValid(hover.dim_2) && hover.dim_2 === datum.dim_2", "value": "bold"},{"test":"isValid(hover_band_y.dim_2) && datum.dim_2 === hover_band_y.dim_2", "value": "bold"}] } } }, { "type":"text", "from":{"data":"dim_1s"}, "encode":{ "enter":{"align":{"value":"center"}}, "update":{ "text":{"field":"dim_1"}, "x":{"field":"x"}, "y":{"field":"y"}, "fontSize":[{"test":"isValid(hover.dim_1) && hover.dim_1 === datum.dim_1", "value": 25},{"test":"isValid(hover_band_x.dim_1) && hover_band_x.dim_1 === datum.dim_1", "value":25},{"value":12}], "fill":[{"test":"isValid(hover.dim_1) && hover.dim_1 === datum.dim_1", "value":"green"},{"test":"isValid(hover_band_x.dim_1) && hover_band_x.dim_1 === datum.dim_1", "value":"green"},{"value":"black"}], "fontWeight":[{"test":"isValid(hover.dim_1) && hover.dim_1 === datum.dim_1", "value": "bold"},{"test":"isValid(hover_band_x.dim_1) && hover_band_x.dim_1 === datum.dim_1", "value":"bold"}] } } } ] })30:T4b7,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] } ] })31:T44c,( [ { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] } ] ) 32:Tae7,md` ## The 3D Algebra I tried to understand the demonstrations and the logic behind but in all that complexity I came up with this: To be able to project a 3D point into a 2 point you will need to apply rotations to your point and the most friendly and efficient way to store the 3D rotations is the quartenion. Quartenion is probably a mix between quarterback and onion: robust, efficient and when you start to understand the magic inside you begin to cry (I just felt I'm getting old). The good news is that you don't need to understand everything to move forward. With the following you'll be able to build a 3D engine: - A quartenion stores 4 paramètres: w, x, y, z => w is the constant and (x, y, z ) are representing the axis - A rotation on one axis is stored using the following rule: w = Cos(rotationAngle/2) then you set the desired rotated axis parameter to Sin(rotationAngle/2), the other axis parameters are set to 0. Example: a rotation of 90 degrees applied on the axis x will have a quartenion q with the following: {w:Cos(PI/2), x:Sin(PI/2), y : 0, z : 0} - To combine 2 rotation axis you have to multiply the 2 quartenions and the order does matter - The product q2 of quartenion q0 by quartenion q1 can be developped like this: - q2.w = (q0.w* q1.w) - (q0.x*q1.x) - (q0.y*q1.y) - (q0.z*q1.z) - q2.x = (q0.w * q1.x) + (q0.x * q1.w) + (q0.y * q1.z) - (q0.z * q1.y) - q2.y = (q0.w * q1.y) - (q0.x * q1.z) + (q0.y * q1.w) + (q0.z * q1.x) - q2.z = (q0.w * q1.z) + (q0.x * q1.y) - (q0.y * q1.x) + (q0.z * q1.w) - The inverse of a quartenion q, q_1 is: - q_1.w = q.w - q_1.x = -q.x - q_1.y = -q.y - q_1.z = -q.z - A basic 3D engine can be built like this: - Create a quartenion representing the horizontal rotation (around axis z): qz = {w:cos(rotation_HOR/2), x:0, y:0, z:sin(rotation_HOR/2)} - Create a quartenion representing the vertical rotation (around axis x): qx = {w:cos(rotation_VER/2), x:sin(rotation_VER/2), y:0, z:0} - Create a quartenion q representing your 3D rotation muliplying qx by qz using the multiplication formula. because you have some 0 in your parameters, you should end with that simplified formula: - q.w = qx.w * qz.w - q.x = qx.x * qz.w - q.y = -qx.x * qz.z - q.z = qx.w * qz.z - create the quartenion q_1 inverse of q = {w:q.w, x:-q.x, y:-q.y, z,-q.z} - You can now project a 3D point using the following rules: - Define the quartenion qp representing your poin using the following: - qp.w = 0, - qp.x = p.x - qp.y = p.y - qp.z = p.z - Create q1 multiplying your rotation quartenion (q) by your quartenion p (qp) - Create q2 multiplying q1 by q_1 (the inverse of q) - The point (q2.x, q2.y) is your projected point This was a lot of theory: let's apply it to try to rend a cube... `33:T968,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" } ], "data":[ { "name":"square", "values":[ {"x":0, "y":0}, {"x":100, "y":0}, {"x":100, "y":100}, {"x":0, "y":100} ] } ], "marks":[ { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "x":{"field":"x"}, "y":{"field":"y"}, "fill":{"value":"steelblue"} } } } ] })34:Td76,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"size", "init":"min(width,height)/2" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" } ], "data":[ { "name":"square", "values":[ {"x":0, "y":0}, {"x":100, "y":0}, {"x":100, "y":100}, {"x":0, "y":100} ], "transform":[ { "type":"formula", "expr":"{x:((datum.x - 50)), y:((datum.y - 50)), z:0, w:0}", "as":"qp" }, { "type":"formula", "expr":"{x:q.w * datum.qp.x + q.y*datum.qp.z- q.z * datum.qp.y, y:q.w * datum.qp.y - q.x * datum.qp.z + q.z*datum.qp.x, z:q.w * datum.qp.z + q.x*datum.qp.y - q.y * datum.qp.x, w: -q.x * datum.qp.x - q.y * datum.qp.y - q.z * datum.qp.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"y" } ] } ], "marks":[ { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "x":{"field":"x"}, "y":{"field":"y"}, "fill":{"value":"steelblue"} } } } ] })35:T1763,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"size", "init":"min(width,height)/2" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":150, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"color", "value":"steelblue" } ], "data":[ { "name":"square", "values":[ {"x":0, "y":0}, {"x":100, "y":0}, {"x":100, "y":100}, {"x":0, "y":100} ], "transform":[ { "type":"formula", "expr":"{x:datum.x - 50, y:datum.y - 50, z:50, w:0}", "as":"qpxy" }, { "type":"formula", "expr":"{x:q.w * datum.qpxy.x + q.y*datum.qpxy.z- q.z * datum.qpxy.y, y:q.w * datum.qpxy.y - q.x * datum.qpxy.z + q.z*datum.qpxy.x, z:q.w * datum.qpxy.z + q.x*datum.qpxy.y - q.y * datum.qpxy.x, w: -q.x * datum.qpxy.x - q.y * datum.qpxy.y - q.z * datum.qpxy.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"{x: 50, y: datum.x - 50, z:datum.y - 50, w:0}", "as":"qpyz" }, { "type":"formula", "expr":"{x:q.w * datum.qpyz.x + q.y*datum.qpyz.z- q.z * datum.qpyz.y, y:q.w * datum.qpyz.y - q.x * datum.qpyz.z + q.z*datum.qpyz.x, z:q.w * datum.qpyz.z + q.x*datum.qpyz.y - q.y * datum.qpyz.x, w: -q.x * datum.qpyz.x - q.y * datum.qpyz.y - q.z * datum.qpyz.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" }, { "type":"formula", "expr":"{x: datum.y - 50, y:50 , z:datum.x - 50, w:0}", "as":"qpxz" }, { "type":"formula", "expr":"{x:q.w * datum.qpxz.x + q.y*datum.qpxz.z- q.z * datum.qpxz.y, y:q.w * datum.qpxz.y - q.x * datum.qpxz.z + q.z*datum.qpxz.x, z:q.w * datum.qpxz.z + q.x*datum.qpxz.y - q.y * datum.qpxz.x, w: -q.x * datum.qpxz.x - q.y * datum.qpxz.y - q.z * datum.qpxz.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" } ] } ], "marks":[ { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "fill":{"signal":"hcl(hcl(color).h, hcl(color).c, 30)"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"} } } }, { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "x":{"field":"yz_x"}, "y":{"field":"yz_y"}, "fill":{"value":"steelblue"} } } }, { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "fill":{"signal":"hcl(hcl(color).h, hcl(color).c, 40)"}, "x":{"field":"xz_x"}, "y":{"field":"xz_y"} } } } ] })36:T18d6,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"size", "init":"min(width,height)/2" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" }, { "name":"color", "value":"steelblue" } ], "data":[ { "name":"square", "values":[ {"x":0, "y":0}, {"x":100, "y":0}, {"x":100, "y":100}, {"x":0, "y":100} ], "transform":[ { "type":"formula", "expr":"{x:datum.x - 50, y:datum.y - 50, z:isXYBack ? -50 : 50, w:0}", "as":"qpxy" }, { "type":"formula", "expr":"{x:q.w * datum.qpxy.x + q.y*datum.qpxy.z- q.z * datum.qpxy.y, y:q.w * datum.qpxy.y - q.x * datum.qpxy.z + q.z*datum.qpxy.x, z:q.w * datum.qpxy.z + q.x*datum.qpxy.y - q.y * datum.qpxy.x, w: -q.x * datum.qpxy.x - q.y * datum.qpxy.y - q.z * datum.qpxy.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"{x: isYZBack ? -50 : 50, y: datum.x - 50, z:datum.y - 50, w:0}", "as":"qpyz" }, { "type":"formula", "expr":"{x:q.w * datum.qpyz.x + q.y*datum.qpyz.z- q.z * datum.qpyz.y, y:q.w * datum.qpyz.y - q.x * datum.qpyz.z + q.z*datum.qpyz.x, z:q.w * datum.qpyz.z + q.x*datum.qpyz.y - q.y * datum.qpyz.x, w: -q.x * datum.qpyz.x - q.y * datum.qpyz.y - q.z * datum.qpyz.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" }, { "type":"formula", "expr":"{x: datum.y - 50, y:isXZBack ? -50 : 50 , z:datum.x - 50, w:0}", "as":"qpxz" }, { "type":"formula", "expr":"{x:q.w * datum.qpxz.x + q.y*datum.qpxz.z- q.z * datum.qpxz.y, y:q.w * datum.qpxz.y - q.x * datum.qpxz.z + q.z*datum.qpxz.x, z:q.w * datum.qpxz.z + q.x*datum.qpxz.y - q.y * datum.qpxz.x, w: -q.x * datum.qpxz.x - q.y * datum.qpxz.y - q.z * datum.qpxz.z }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" } ] } ], "marks":[ { "type":"line", "from":{"data":"square"}, "encode":{ "enter":{ "fill":{"value":"steelblue"}}, "update":{ "x":{"field":"yz_x"}, "y":{"field":"yz_y"} } } }, { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "fill":{"signal":"hcl(hcl(color).h, hcl(color).c, 40)"}, "x":{"field":"xz_x"}, "y":{"field":"xz_y"} } } }, { "type":"line", "from":{"data":"square"}, "encode":{ "update":{ "fill":{"signal":"hcl(hcl(color).h, hcl(color).c, 30)"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"} } } } ] })37:T5ed,( { "name":"source", "source":"table", "transform":[ { "type":"formula", "expr": "{x1:(scale('x', datum.dim_1) - range('x')[1]/2), x2:(scale('x', datum.dim_1) + bandwidth('x') - range('x')[1]/2), y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:min(0,scale('z', datum.value)) , z2: max (0, scale('z', datum.value))}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y:datum.points.y2},{x: datum.points.x2, y:datum.points.y2}, {x: datum.points.x2, y:datum.points.y1},{x: datum.points.x1, y:datum.points.y1},{x:datum.points.x1, y:datum.points.y2}]", "as":"xyPoints" }, { "type":"formula", "expr":"[{x:datum.points.x1, z:datum.points.z2},{x: datum.points.x2, z:datum.points.z2}, {x: datum.points.x2, z:datum.points.z1},{x: datum.points.x1, z:datum.points.z1},{x:datum.points.x1, z:datum.points.z2}]", "as":"xzPoints" }, { "type":"formula", "expr":"[{y:datum.points.y1, z:datum.points.z2},{y: datum.points.y2, z:datum.points.z2}, {y: datum.points.y2, z:datum.points.z1},{y: datum.points.y1, z:datum.points.z1},{y:datum.points.y1, z:datum.points.z2}]", "as":"yzPoints" }, { "type":"flatten", "fields":["xyPoints", "xzPoints", "yzPoints"], "as":["xy", "xz", "yz"] } ] } )38:Tb7a,([ { "type":"formula", "expr":"isXYBack ? datum.points.z1 : datum.points.z2", "as":"usedPointZ" }, { "type":"formula", "expr":"isYZBack ? datum.points.x1 : datum.points.x2", "as":"usedPointX" }, { "type":"formula", "expr":"isXZBack ? datum.points.y1 : datum.points.y2", "as":"usedPointY" }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.usedPointZ - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.usedPointZ + q.z*datum.xy.x, z:q.w * datum.usedPointZ + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.usedPointZ }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"{x:q.w * datum.xz.x + q.y*datum.xz.z - q.z * datum.usedPointY, y:q.w * datum.usedPointY - q.x * datum.xz.z + q.z*datum.xz.x, z:q.w * datum.xz.z + q.x*datum.usedPointY - q.y * datum.xz.x, w: -q.x * datum.xz.x - q.y * datum.usedPointY - q.z * datum.xz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" }, { "type":"formula", "expr":"{x:q.w * datum.usedPointX + q.y*datum.yz.z - q.z * datum.yz.y, y:q.w * datum.yz.y - q.x * datum.yz.z + q.z*datum.usedPointX, z:q.w * datum.yz.z + q.x*datum.yz.y - q.y * datum.usedPointX, w: -q.x * datum.usedPointX - q.y * datum.yz.y - q.z * datum.yz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" } ] )39:T719,([ { "type":"group", "from": { "facet": { "name":"bars", "data": "projectedPoints", "groupby":["dim_1","dim_2", "value"] } }, "marks": [ { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"field":"dim_1", "scale":"colorX"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"yz_x"}, "y":{"field":"yz_y"}, "y2":{"value":0} } } }, { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "fill":[{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, 50 )"}], "x":{"field":"xz_x"}, "y":{"field":"xz_y"}, "y2":{"value":0} } } }, { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, isXYBack ? 80 : 30)"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"}, "y2":{"value":0} } } } ] }])3a:T2b41,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"colors", "value":["#77A7FB","#E57368","#FBCB43"] }, { "name":"size", "init":"min(width,height)/2" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"scale", "value":1, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1}, "on": [{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"scaleX", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleY", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleZ", "value":0.7, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"paddingX", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"paddingY", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360.0", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360.0", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" } ], "scales":[ { "name":"x", "type":"band", "domain":{"data":"table", "field":"dim_1", "sort":true}, "range":[0, {"signal":"size * scale * scaleX"}], "padding":{"signal":"paddingX"} }, { "name":"y", "type":"band", "domain":{"data":"table", "field":"dim_2", "sort":true}, "range":[0, {"signal":"size * scale * scaleY"}], "padding":{"signal": "paddingY"} }, { "name":"z", "type":"linear", "domain":{"data":"table", "field":"value"}, "range":[0, {"signal":"size * scale * scaleZ"}], "zero":true }, { "name":"colorX", "type": "ordinal", "domain":{"data":"table", "field":"dim_1"}, "range":{"signal":"colors"} } ], "data":[ { "name":"table", "values":[ { "dim_1":"A", "dim_2":"1", "value":23 }, { "dim_1":"B", "dim_2":"1", "value":32 }, { "dim_1":"C", "dim_2":"1", "value":67 }, { "dim_1":"A", "dim_2":"2", "value":50 }, { "dim_1":"B", "dim_2":"2", "value":18 }, { "dim_1":"C", "dim_2":"2", "value":24 }, { "dim_1":"A", "dim_2":"3", "value":30 }, { "dim_1":"B", "dim_2":"3", "value":36 }, { "dim_1":"C", "dim_2":"3", "value":33 } ] }, { "name":"source", "source":"table", "transform":[ { "type":"formula", "expr": "{x1:(scale('x', datum.dim_1) - range('x')[1]/2), x2:(scale('x', datum.dim_1) + bandwidth('x') - range('x')[1]/2), y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:min(0,scale('z', datum.value)) , z2: max (0, scale('z', datum.value))}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y:datum.points.y2},{x: datum.points.x2, y:datum.points.y2}, {x: datum.points.x2, y:datum.points.y1},{x: datum.points.x1, y:datum.points.y1}]", "as":"xyPoints" }, { "type":"formula", "expr":"[{x:datum.points.x1, z:datum.points.z2},{x: datum.points.x2, z:datum.points.z2}, {x: datum.points.x2, z:datum.points.z1},{x: datum.points.x1, z:datum.points.z1}]", "as":"xzPoints" }, { "type":"formula", "expr":"[{y:datum.points.y1, z:datum.points.z2},{y: datum.points.y2, z:datum.points.z2}, {y: datum.points.y2, z:datum.points.z1},{y: datum.points.y1, z:datum.points.z1}]", "as":"yzPoints" }, { "type":"flatten", "fields":["xyPoints", "xzPoints", "yzPoints"], "as":["xy", "xz", "yz"] } ] }, { "name":"projectedPoints", "source":"source", "transform":[ { "type":"formula", "expr":"isXYBack ? datum.points.z1 : datum.points.z2", "as":"usedPointZ" }, { "type":"formula", "expr":"isYZBack ? datum.points.x1 : datum.points.x2", "as":"usedPointX" }, { "type":"formula", "expr":"isXZBack ? datum.points.y1 : datum.points.y2", "as":"usedPointY" }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.usedPointZ - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.usedPointZ + q.z*datum.xy.x, z:q.w * datum.usedPointZ + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.usedPointZ }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"{x:q.w * datum.xz.x + q.y*datum.xz.z - q.z * datum.usedPointY, y:q.w * datum.usedPointY - q.x * datum.xz.z + q.z*datum.xz.x, z:q.w * datum.xz.z + q.x*datum.usedPointY - q.y * datum.xz.x, w: -q.x * datum.xz.x - q.y * datum.usedPointY - q.z * datum.xz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" }, { "type":"formula", "expr":"{x:q.w * datum.usedPointX + q.y*datum.yz.z - q.z * datum.yz.y, y:q.w * datum.yz.y - q.x * datum.yz.z + q.z*datum.usedPointX, z:q.w * datum.yz.z + q.x*datum.yz.y - q.y * datum.usedPointX, w: -q.x * datum.usedPointX - q.y * datum.yz.y - q.z * datum.yz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" } ] } ], "marks":[ { "type":"group", "from": { "facet": { "name":"bars", "data": "projectedPoints", "groupby":["dim_1","dim_2", "value", "max_y", "max_x"] } }, "marks": [ { "type":"line", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"field":"dim_1", "scale":"colorX"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"yz_x"}, "y":{"field":"yz_y"} } } }, { "type":"line", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "fill":[{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, 50 )"}], "x":{"field":"xz_x"}, "y":{"field":"xz_y"} } } }, { "type":"line", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, isXYBack ? 80 : 30)"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"} } } } ] } ] }, {"renderer":"svg"})3b:T7e1,( [ { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"xy_z" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"xz_z" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x, z:datum.q1.w * q_1.z + datum.q1.x * q_1.y - datum.q1.y * q_1.x + datum.q1.z * q_1.w}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.z) + height/2", "as":"yz_z" }, { "type":"window", "ops":["max","max","max"], "groupby":["dim_1","dim_2", "value"], "fields":["xy_z","xz_z","yz_z"], "frame": [ null, null ] }, { "type":"formula", "expr":"max(datum.max_xy_z, max(datum.max_xz_z, datum.max_yz_z))", "as":"max_z" }, { "type":"project", "fields":["dim_1","dim_2","value", "xy_x","xy_y","xz_x","xz_y","yz_x","yz_y","max_z"] }, { "type":"collect", "sort":{"field":["max_z"]} } ] )3c:T2e03,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals":[ { "name":"colors", "value":["#77A7FB","#E57368","#FBCB43"] }, { "name":"size", "init":"min(width,height)/2" }, { "name":"angle_HOR", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)"}] }, { "name":"validAngle_HOR", "update":"angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name":"angle_VER", "on":[{"events":{"source":"view", "type": "mousemove", "filter":"event.buttons === 1"}, "update":"rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)"}] }, { "name":"validAngle_VER", "update":"angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name":"rotation_HOR", "value":40, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_HOR"}, "update":"validAngle_HOR"}] }, { "name":"rotation_VER", "value":65, "bind":{"input":"range", "min": 0, "max": 360, "step": 1}, "on":[{"events":{"signal":"validAngle_VER"}, "update":"validAngle_VER"}] }, { "name":"scale", "value":1, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1}, "on": [{"events":"view:mousewheel", "update":"max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))"}] }, { "name":"scaleX", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleY", "value":2, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"scaleZ", "value":0.7, "bind":{"input":"range", "min": 0, "max": 2, "step": 0.1} }, { "name":"paddingX", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"paddingY", "value":0.7, "bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"qrAngle_HOR", "init":"PI*rotation_HOR/360.0", "on": [{"events":{"signal":"rotation_HOR"}, "update":"PI*rotation_HOR/360.0"}] }, { "name":"qrAngle_VER", "init":"PI*rotation_VER/360.0", "on": [{"events":{"signal":"rotation_VER"}, "update":"PI*rotation_VER/360.0"}] }, { "name":"qrw0", "update":"cos(qrAngle_VER)" }, { "name":"qrw1", "update":"cos(qrAngle_HOR)" }, { "name":"qrx0", "update":"sin(qrAngle_VER)" }, { "name":"qrz1", "update":"sin(qrAngle_HOR)" }, { "name":"q", "update":"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, { "name":"q_1", "update":"{x:-q.x, y:-q.y, z: -q.z, w: q.w}" }, { "name":"isYZBack", "update":"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0" }, { "name":"isXZBack", "update":"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0" }, { "name":"isXYBack", "update":"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" } ], "scales":[ { "name":"x", "type":"band", "domain":{"data":"table", "field":"dim_1", "sort":true}, "range":[0, {"signal":"size * scale * scaleX"}], "padding":{"signal":"paddingX"} }, { "name":"y", "type":"band", "domain":{"data":"table", "field":"dim_2", "sort":true}, "range":[0, {"signal":"size * scale * scaleY"}], "padding":{"signal": "paddingY"} }, { "name":"z", "type":"linear", "domain":{"data":"table", "field":"value"}, "range":[0, {"signal":"size * scale * scaleZ"}], "zero":true }, { "name":"colorX", "type": "ordinal", "domain":{"data":"table", "field":"dim_1"}, "range":{"signal":"colors"} } ], "data":[ { "name":"table", "values":[ { "dim_1":"A", "dim_2":"1", "value":23 }, { "dim_1":"B", "dim_2":"1", "value":32 }, { "dim_1":"C", "dim_2":"1", "value":67 }, { "dim_1":"A", "dim_2":"2", "value":50 }, { "dim_1":"B", "dim_2":"2", "value":18 }, { "dim_1":"C", "dim_2":"2", "value":24 }, { "dim_1":"A", "dim_2":"3", "value":30 }, { "dim_1":"B", "dim_2":"3", "value":36 }, { "dim_1":"C", "dim_2":"3", "value":33 } ] }, { "name":"source", "source":"table", "transform":[ { "type":"formula", "expr": "{x1:(scale('x', datum.dim_1) - range('x')[1]/2), x2:(scale('x', datum.dim_1) + bandwidth('x') - range('x')[1]/2), y1:(scale('y', datum.dim_2) - (range('y')[1]/2)), y2: (bandwidth('y') + scale('y', datum.dim_2) - (range('y')[1]/2) ) , z1:min(0,scale('z', datum.value)) , z2: max (0, scale('z', datum.value))}", "as":"points" }, { "type":"formula", "expr":"[{x:datum.points.x1, y:datum.points.y2},{x: datum.points.x2, y:datum.points.y2}, {x: datum.points.x2, y:datum.points.y1},{x: datum.points.x1, y:datum.points.y1},{x:datum.points.x1, y:datum.points.y2}]", "as":"xyPoints" }, { "type":"formula", "expr":"[{x:datum.points.x1, z:datum.points.z2},{x: datum.points.x2, z:datum.points.z2}, {x: datum.points.x2, z:datum.points.z1},{x: datum.points.x1, z:datum.points.z1},{x:datum.points.x1, z:datum.points.z2}]", "as":"xzPoints" }, { "type":"formula", "expr":"[{y:datum.points.y1, z:datum.points.z2},{y: datum.points.y2, z:datum.points.z2}, {y: datum.points.y2, z:datum.points.z1},{y: datum.points.y1, z:datum.points.z1},{y:datum.points.y1, z:datum.points.z2}]", "as":"yzPoints" }, { "type":"flatten", "fields":["xyPoints", "xzPoints", "yzPoints"], "as":["xy", "xz", "yz"] } ] }, { "name":"projectedPoints", "source":"source", "transform":[ { "type":"formula", "expr":"isXYBack ? datum.points.z1 : datum.points.z2", "as":"usedPointZ" }, { "type":"formula", "expr":"isYZBack ? datum.points.x1 : datum.points.x2", "as":"usedPointX" }, { "type":"formula", "expr":"isXZBack ? datum.points.y1 : datum.points.y2", "as":"usedPointY" }, { "type":"formula", "expr":"{x:q.w * datum.xy.x + q.y*datum.usedPointZ - q.z * datum.xy.y, y:q.w * datum.xy.y - q.x * datum.usedPointZ + q.z*datum.xy.x, z:q.w * datum.usedPointZ + q.x*datum.xy.y - q.y * datum.xy.x, w: -q.x * datum.xy.x - q.y * datum.xy.y - q.z * datum.usedPointZ }", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xy_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xy_y" }, { "type":"formula", "expr":"{x:q.w * datum.xz.x + q.y*datum.xz.z - q.z * datum.usedPointY, y:q.w * datum.usedPointY - q.x * datum.xz.z + q.z*datum.xz.x, z:q.w * datum.xz.z + q.x*datum.usedPointY - q.y * datum.xz.x, w: -q.x * datum.xz.x - q.y * datum.usedPointY - q.z * datum.xz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x) + width/2", "as":"xz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"xz_y" }, { "type":"formula", "expr":"{x:q.w * datum.usedPointX + q.y*datum.yz.z - q.z * datum.yz.y, y:q.w * datum.yz.y - q.x * datum.yz.z + q.z*datum.usedPointX, z:q.w * datum.yz.z + q.x*datum.yz.y - q.y * datum.usedPointX, w: -q.x * datum.usedPointX - q.y * datum.yz.y - q.z * datum.yz.z}", "as":"q1" }, { "type":"formula", "expr":"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as":"q2" }, { "type":"formula", "expr":"(datum.q2.x ) + width/2", "as":"yz_x" }, { "type":"formula", "expr":"(datum.q2.y) + height/2", "as":"yz_y" }, { "type":"window", "ops":["row_number", "max", "max"], "groupby":["dim_1","dim_2", "value"], "fields":["points", "yz_y", "yz_x"], "as":["index", "max_y", "max_x"], "frame": [ null, null ] }, { "type":"collect", "sort":{"field":["max_y","max_x"], "order": [{"signal":"rotation_VER > 90 & rotation_VER < 180 ? 'descending':'ascending'"}]} } ] } ], "marks":[ { "type":"group", "from": { "facet": { "name":"bars", "data": "projectedPoints", "groupby":["dim_1","dim_2", "value", "max_y", "max_x"] } }, "marks": [ { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"field":"dim_1", "scale":"colorX"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"yz_x"}, "y":{"field":"yz_y"}, "y2":{"value":0} } } }, { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "fill":[{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, 50 )"}], "x":{"field":"xz_x"}, "y":{"field":"xz_y"}, "y2":{"value":0} } } }, { "type":"area", "from":{"data":"bars"}, "encode":{ "enter":{ }, "update":{ "fill":{"signal":"hcl(hcl(scale('colorX',datum.dim_1)).h, hcl(scale('colorX',datum.dim_1)).c, isXYBack ? 80 : 30)"}, "tooltip":{"signal":"{'dim_1':datum.dim_1, 'dim_2':datum.dim_2, 'value':datum.value}"}, "x":{"field":"xy_x"}, "y":{"field":"xy_y"}, "y2":{"value":0} } } } ] } ] }, {"renderer":"svg"})3d:[] 2d:{"id":"407a9e99e9f938cc","slug":"how-to-create-a-3d-engine-from-scratch-using-vega","title":"How to create a 3D engine from scratch using Vega","thumbnail":"c758a2c1786c8f5a0fe46613e9f4d0a74cbb570a612baa8f04d4aebe0f1f6965","access_level":"public","create_time":"$D2020-02-22T14:39:02.182Z","update_time":"$D2020-03-19T15:18:18.311Z","view_time":null,"first_public_time":"$D2020-02-23T11:18:57.803Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"1ab1463344b266e0","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":"starter_2024"},"version":388,"publish_version":388,"role":null,"authored":false,"authors":[{"type":"individual","id":"0161860a595b9637","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":null}],"members":[{"type":"individual","id":"0161860a595b9637","login":"mathiastiberghien","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/a16241a634f3076e093beeb4c0c0a672737bd033a393f97b3242b427679fc82e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"0bfa1471ddeaa408","slug":"vega","title":"Vega","owner":{"id":"1ab1463344b266e0","login":"mathiastiberghien","name":"Mathias Tiberghien"}},"type":"notebook","body":{"title":"How to create a 3D engine from scratch using Vega","cells":[{"id":0,"value":"md`# How to create a 3D engine from scratch using Vega\nThis tutorial details the creation of a simple and very basic 3D engine using Vega, a visualization declarative language. The goal is to understand how the 3D projections basic algebra works and learn more about Vega. Of course you won't end with a full 3D engine that deals with light, clipping and other complex stuff. This article humbly pretends to be an entry point in the 3D world for people who are intimated by it. It also assumes that you are familiarized with Vega documentation .\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`*Try to drag down the view to move the chart. Change the scales and the paddings to modify the bars*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"embed(spec,{\"renderer\":\"svg\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md `\n## Introduction\n\nI've always considered computed 3D as a piano: when I see one I want to sit and play but after 5 minutes, I feel like a kid who doesn't know what to do with it (I feel also a huge need for a cookie). This week I decided to try to put my hands into it.\nI tried to gather the minimal requirements to perform 3D projections caclulations. \nWhen you're working in 3D you have to deal with a lot of concerns like which object are rendered and which are hidden to the user, and it requires to understand many concepts that won't be covered here (since Vega is declarative, we have to describe all the calculations so we want to make it as simple as possible).\n\nNow, as Vega is a visualization language, let's learn how to say:\n\n\"Ok Vega, I'd like to move some basic objects in the 3D space\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n## Preliminaries\n\nTo be able to observe a 3D object on a plane, I will need to rotate it. Let's create first the rotation system.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`*Dragging down the mouse will now change the rotationX (when the mouse moves on the horizontal axis) and rotationY (when the mouse moves on the vertical axis) values.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`It requires the following signals:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`- \"angle_HOR\" will listen to horizontal mouse move event in the view\n- \"validAngle_HOR will ensure that the angle remains in the range 0-360\n- \"rotation_HOR\" will listent to \"validAngle_HOR\" and be configurable with a slider\n- \"angle_VER\" will listen to vertical mouse move event in the view\n- \"validAngle_VER will ensure that the angle remains in the range 0-360\n- \"rotation_VER\" will listent to \"validAngle_VER\" and be configurable with a slider`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`## Let's draw a cube\nVega has the mark rect to draw a square, but as we want to transform points we prefer to use a path. The problem is that the path is defined with svg and not an array of dots. Here's the good news: The line mark will behave exactly as a path. To create a square, you create a table with 4 points: the four corners of the square. To ensure that the sape is closed you'll use the interpolation 'linear-closed'.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"(\n {\n \"name\":\"square\",\n \"values\":[\n {\"x\":0, \"y\":0},\n {\"x\":100, \"y\":0},\n {\"x\":100, \"y\":100},\n {\"x\":0, \"y\":100}\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"(\n{\n \"type\":\"line\",\n \"from\":{\"data\":\"square\"},\n \"encode\":{\n \"update\":{\n \"x\":{\"field\":\"x\"},\n \"y\":{\"field\":\"y\"},\n \"fill\":{\"value\":\"steelblue\"}\n }\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md `With a collection of dots in a table and an area mark we are now able to create the 3D engine as described earlier: first we add a bunch of signals to create the rotation quartenion and its inverse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"([\n {\n \"name\":\"qrAngle_HOR\",\n \"init\":\"PI*rotation_HOR/360\",\n \"on\": [{\"events\":{\"signal\":\"rotation_HOR\"}, \"update\":\"PI*rotation_HOR/360.0\"}]\n },\n {\n \"name\":\"qrAngle_VER\",\n \"init\":\"PI*rotation_VER/360\",\n \"on\": [{\"events\":{\"signal\":\"rotation_VER\"}, \"update\":\"PI*rotation_VER/360.0\"}]\n },\n {\n \"name\":\"qrw0\",\n \"update\":\"cos(qrAngle_VER)\"\n },\n {\n \"name\":\"qrw1\",\n \"update\":\"cos(qrAngle_HOR)\"\n },\n {\n \"name\":\"qrx0\",\n \"update\":\"sin(qrAngle_VER)\"\n },\n {\n \"name\":\"qrz1\",\n \"update\":\"sin(qrAngle_HOR)\"\n },\n {\n \"name\":\"q\",\n \"update\":\"{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}\"\n },\n {\n \"name\":\"q_1\",\n \"update\":\"{x:-q.x, y:-q.y, z: -q.z, w: q.w}\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`- \"qrAngle_HOR\" is the half of \"rotation_HOR\" converted in radians\n- \"qrAngle_VER\" is the half of \"rotation_VER\" coverted in radians\n- \"qrw0\", \"qrw1\", \"qrx0\", \"qrz1\" are the rotations parameters for axis z and x\n- \"q\" is the multiplication of the quartenion qx by qz\n- \"q_1\" is the inverse of quartenion q\n\nWe just need now to add some transformations to the square points in order to:\n- Create the point quartenion\n- Transform those points using q and q_1\n- Apply scale and center translation to the projected point\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`*The same square projected on XY plane*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"(\n [\n {\n \"type\":\"formula\",\n \"expr\":\"{x:((datum.x - 50)), y:((datum.y - 50)), z:0, w:0}\",\n \"as\":\"qp\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x:q.w * datum.qp.x + q.y*datum.qp.z- q.z * datum.qp.y, y:q.w * datum.qp.y - q.x * datum.qp.z + q.z*datum.qp.x, z:q.w * datum.qp.z + q.x*datum.qp.y - q.y * datum.qp.x, w: -q.x * datum.qp.x - q.y * datum.qp.y - q.z * datum.qp.z }\",\n \"as\":\"q1\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}\",\n \"as\":\"q2\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"(datum.q2.x) + width/2\",\n \"as\":\"x\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"(datum.q2.y) + height/2\",\n \"as\":\"y\"\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`Above you can see the transformations added to the table 'square':\n- qp is created using a -50 (the size of the square is 100) translation to the square to make it at the center of the rotation (you can try to remove the -50 and watch the difference)\n- q1 is created multiplying q by qp\n- q2 is created multiplying q1 by q_1\n- q2.x and q2.y are translated to the middle of the view and are now replacing the previous point\n\nWell, the maths are doing the job but we still don't have a cube: we only have projected our square on the xy plane. We need now to project it on xz and yz plane...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"(\n [{\n \"type\":\"formula\",\n \"expr\":\"{x:datum.x - 50, y:datum.y - 50, z:50, w:0}\",\n \"as\":\"qpxy\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x: 50, y: datum.x - 50, z:datum.y - 50, w:0}\",\n \"as\":\"qpyz\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x: datum.y - 50, y: 50 , z:datum.x - 50, w:0}\",\n \"as\":\"qpxz\"\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`- \"qpxy\" is the projection of the top of the square. z is set to 50 which i 100 - 50 to ensure that the rotation is at the center of the square\n- \"qpyz\" and \"qpxz\" are projections of the 'left' and 'right' side of the square\nYou can notice that in each projection point, the constant parameter is the axis perpendicular to the plane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"([{\n \"type\":\"area\",\n \"from\":{\"data\":\"square\"},\n \"encode\":{\n \"update\":{\n \"x\":{\"field\":\"yz_x\"},\n \"y\":{\"field\":\"yz_y\"},\n \"y2\":{\"value\":0}\n }\n }\n },\n {\n \"type\":\"area\",\n \"from\":{\"data\":\"square\"},\n \"encode\":{\n \"update\":{\n \"fill\":{\"signal\":\"hcl(hcl(color).h, hcl(color).c, 40)\"},\n \"x\":{\"field\":\"xz_x\"},\n \"y\":{\"field\":\"xz_y\"},\n \"y2\":{\"value\":0}\n }\n }\n },\n {\n \"type\":\"area\",\n \"from\":{\"data\":\"square\"},\n \"encode\":{\n \"update\":{\n \"fill\":{\"signal\":\"hcl(hcl(color).h, hcl(color).c, 30)\"},\n \"x\":{\"field\":\"xy_x\"},\n \"y\":{\"field\":\"xy_y\"},\n \"y2\":{\"value\":0}\n }\n }\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`In the square points table, we added the transformations to be able to project the square on the 3 planes and added also 2 area marks to draw them changing the color for each face. Are we done? Well you have noticed that the hidden faces are not rendering. Should we draw them? No, as we only are seeing a maximum of 3 faces at the same time, we will use a transofrmation on each axis to get the information if a face is back or not and project the right face when needed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"([{\n \"name\":\"isYZBack\",\n \"update\":\"{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0\"\n },\n {\n \"name\":\"isXZBack\",\n \"update\":\"{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0\"\n },\n {\n \"name\":\"isXYBack\",\n \"update\":\"{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0\"\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`- \"isXYBack\", \"isXZBack\", \"isYZBack\" are axis vectors ((1,0,0), (0,1,0), (0,01)) multiplied by the rotation matrix. Only the z component is calculated because the others parameters are irrelevant to evaluate the direction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"(\n [{\n \"type\":\"formula\",\n \"expr\":\"{x:datum.x - 50, y:datum.y - 50, z:isXYBack ? -50 : 50, w:0}\",\n \"as\":\"qpxy\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x: isYZBack ? -50 : 50, y: datum.x - 50, z:datum.y - 50, w:0}\",\n \"as\":\"qpyz\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x: datum.y - 50, y:isXZBack ? -50 : 50 , z:datum.x - 50, w:0}\",\n \"as\":\"qpxz\"\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`On the data side, each face is evaluating if its back for its constant value to always display the right face\n\nNow that we have tested our 3D engine, let's apply it to a data representation: a 3D column chart...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`## Let's build a 3D Column chart\nI don't think tha 3D is a good way to represent data, but we will try here to create a 3D object based on data to learn a little bit about scales and discover the limits of a simple 3D engine. Let's face it, we also doing it because this is really pleasant...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"({\n \"name\":\"table\",\n \"values\":[\n {\n \"dim_1\":\"A\",\n \"dim_2\":\"1\",\n \"value\":23\n },\n {\n \"dim_1\":\"B\",\n \"dim_2\":\"1\",\n \"value\":32\n },\n {\n \"dim_1\":\"C\",\n \"dim_2\":\"1\",\n \"value\":67\n },\n {\n \"dim_1\":\"A\",\n \"dim_2\":\"2\",\n \"value\":50\n },\n {\n \"dim_1\":\"B\",\n \"dim_2\":\"2\",\n \"value\":18\n },\n {\n \"dim_1\":\"C\",\n \"dim_2\":\"2\",\n \"value\":24\n },\n {\n \"dim_1\":\"A\",\n \"dim_2\":\"3\",\n \"value\":30\n },\n {\n \"dim_1\":\"B\",\n \"dim_2\":\"3\",\n \"value\":36\n },\n {\n \"dim_1\":\"C\",\n \"dim_2\":\"3\",\n \"value\":33\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`Here is the data table with 3 dimensions. We will use two band scales to create the 'dim_1' and 'dim_2' coordinates and a linear scale to represent the size of 'value'. We will add some variables to be able to modify these scales and see how it affects rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"([{\n \"name\":\"size\",\n \"init\":\"min(width,height)/2\"\n },\n {\n \"name\":\"scale\",\n \"value\":1,\n \"bind\":{\"input\":\"range\", \"min\": 0.1, \"max\": 2, \"step\": 0.1},\n \"on\": [{\"events\":\"view:mousewheel\", \"update\":\"max(0.1, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))\"}]\n },\n {\n \"name\":\"scaleX\",\n \"value\":2,\n \"bind\":{\"input\":\"range\", \"min\": 0, \"max\": 2, \"step\": 0.1}\n },\n {\n \"name\":\"scaleY\",\n \"value\":2,\n \"bind\":{\"input\":\"range\", \"min\": 0, \"max\": 2, \"step\": 0.1}\n },\n {\n \"name\":\"scaleZ\",\n \"value\":0.7,\n \"bind\":{\"input\":\"range\", \"min\": 0, \"max\": 2, \"step\": 0.1}\n },\n {\n \"name\":\"paddingX\",\n \"value\":0.7,\n \"bind,\":{\"input\":\"range\", \"min\":0, \"max\":1, \"step\":0.1}\n },\n {\n \"name\":\"paddingY\",\n \"value\":0.7,\n \"bind\":{\"input\":\"range\", \"min\":0, \"max\":1, \"step\":0.1}\n }]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`Here are the signals:\n- \"size\" will be the size in pixel of our 3D world\n- \"scale\" will apply a factor from 0.1 to 2 to the size of the world\n- \"scaleX\", \"scaleY\" and \"scaleZ\" will apply a factor from 0 to 2 to the x, y and z axes\n- \"paddingX\" and \"paddingY\" will define the padding for bands x and y\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"([{\n \"name\":\"x\",\n \"type\":\"band\",\n \"domain\":{\"data\":\"table\", \"field\":\"dim_1\"},\n \"range\":[0, {\"signal\":\"size * scale * scaleX\"}],\n \"padding\":{\"signal\":\"paddingX\"}\n },\n {\n \"name\":\"y\",\n \"type\":\"band\",\n \"domain\":{\"data\":\"table\", \"field\":\"dim_2\"},\n \"range\":[0, {\"signal\":\"size * scale * scaleY\"}],\n \"padding\":{\"signal\": \"paddingY\"}\n },\n {\n \"name\":\"z\",\n \"type\":\"linear\",\n \"domain\":{\"data\":\"table\", \"field\":\"value\"},\n \"range\":[0, {\"signal\":\"size * scale * scaleZ\"}],\n \"zero\":true\n },\n {\n \"name\":\"colorX\",\n \"type\": \"ordinal\",\n \"domain\":{\"data\":\"table\", \"field\":\"dim_1\"},\n \"range\":{\"signal\":\"colors\"}\n }\n ]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`Here are the scales:\n- \"x\" is the band scale based on 'dim_1'\n- \"y\" is the band scale based on 'dim_2'\n- \"z\" it the linear scale based on 'value'\n- \"colorX\" is an ordinal scale based on 'dim_1\n\n**Note**: you can notice that the range of each scale is defined using scale parameters. This will allow us to scale each dimension one by one and globally.\n\nWe will now use these scales to create 3D rectangle points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`The transform in that table are doing the following:\n- \"points\": Create the 3D points for each entry using scales. For each dimension we have 2 points: the front point and the back point. With these points we are able to define the 6 faces of a bar. You can notice the translation on x and y: it make rotate ours bars around the center.\n- \"xyPoints\", \"xzPoints\" and \"yzPoints\" are defining the coordinates of each rectangle of the bar using 5 points like we did for the cube\n- \"xy\", \"xz\", \"yz\" are the same points flattened (one row per point)\n\nWhese these transformations we have exactly the same data structure that we had for the cube. We just need to apply the projection algorithm and we're done`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`There is a lot of transormations here but this is the same job for each face: first we define which side of the bar we need to render, the we apply the projection algorithm.\n\nNow that we have our projected points, let's render them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`The marks structure is almost the same that for the cube. We added a group to facet (split) each bar using our three dimensions ('dim_1', 'dim_2' and 'value') to be rendered separately`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`Everything seems to be fine: you can scale the view, each dimension and the paddings.\nBut when you start to rotate the object, you can see objects that should be behind overlapping objects that should be in front: This is because objects are drawn in the order of the data set, not the logical visual order. This is a limitation of our simple engine. To solve this we should use the z parameter of our projected point. We need to calculate the higher z will be, the closest the bar will be and should be rendered at last. We modify the 'projectedPoints' table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md`The 'q2' formula where update to calculate z and the points xy_z,xz_z,yz_z where added. Then the max of each z value of each surface by bar was calculated and use to order the bars.\n\nFor the record, please note that I had hard time to understand this and I first hazardous solutions, because of the following...\n\nYou'll also need to update the marks to add the max_z column in the grouping of the facet otherwhise you'll lose the ordering:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"({\n \"type\":\"group\",\n \"from\":\n {\n \"facet\":\n {\n \"name\":\"bars\", \"data\": \"projectedPoints\", \"groupby\":[\"max_z\",\"dim_1\",\"dim_2\", \"value\"] \n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`**Note:** If you turn the bars upside down you will notice that there are still clipping issues: I didn't want to work on it for that exercise, but if someone knows how to solve it (in a simple way), please just tell me!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`## Decorating the bars\nWe did the most difficult. Now we can add a ground, the horizontal axes labels, an values at the top of the bars. You do this all the same: create a table with desired points, project them using the algorithms and add some marks using them`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"embed(spec, {\"renderer\":\"svg\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`## Conclusion\nI had a lot of fun with that small journey in the 3D world and I hope that you had too.\nAs I just tried to be able to do instead of to be able to understand everything, I hope that I didn't add too much confusion trying to simplify everything...\n\nOnce again, I was amazed how Vega allowed me to easily achieved it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`## Credits\nThat video was the key point to be able to produce the 3D Algebra: Quartenions\nThe video was made by Grant Sanderson with the technology of Ben Eater`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 2e:"$2d:body"