40:null 41:["$","title",null,{"children":"Creating a 3D Matrix visualization using Vega | Mathias Tiberghien | Observable"}] 47:T6100,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":500, "height":500, "background":{"signal":"theme === 'dark'?'black':'white'"}, "title": { "text": "3D Matrix", "color": {"signal": "theme === 'dark' ? 'lightgrey':'black'"}, "dy": 25 }, "signals": [ {"name": "x_sequence", "value": {"min": -1, "max": 1, "count": 40}}, {"name": "y_sequence", "value": {"min": -1, "max": 1, "count": 40}}, { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theme", "value": "dark", "bind": {"input": "select", "options": ["dark", "light"]} }, { "name": "theta", "value": 30, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 65, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1}, "on":[ {"events":{"signal": "equation_id"},"update":"equation_id === 4 ?0.3:equation_id===5?0.5:0.6", "force": true} ] }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "axes", "value": true, "bind": {"input": "checkbox"}}, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"lightgrey", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name": "equation", "value": "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "bind": { "input": "select", "options": [ "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "x*y³ - y*x³", "sqrt(x²+y²)", "half tore", "half sphere" ] } }, { "name":"ticks", "value":true, "bind":{"input": "checkbox"} } , { "name":"ticks_count", "value":1, "bind":{"input": "range", "min": 0,"max":5, "step": 1, "name":"ticks count"} }, { "name":"perspective", "value":0.1, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name": "equation_id", "init":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)", "on": [{"events":{"signal":"equation"},"update":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)"}] }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type":"ordinal", "domain":{"data":"id_source", "field":"x", "sort":true} }, { "name":"dy", "type":"ordinal", "domain":{"data":"id_source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[], "transform": [ { "type": "sequence", "start": {"signal": "x_sequence.min"}, "stop": { "signal": "x_sequence.max+(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "step": { "signal": "(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "as": "x" }, { "type": "formula", "expr": "sequence(y_sequence.min,y_sequence.max + (y_sequence.max-y_sequence.min)/(y_sequence.count-1),(y_sequence.max-y_sequence.min)/(y_sequence.count-1))", "as": "y" }, {"type": "flatten", "fields": ["y"]}, { "type": "formula", "expr": "equation_id === 1 ?10*sin(sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)))/sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)): equation_id === 2 ? datum.x*pow(datum.y,3)-datum.y*pow(datum.x,3): equation_id === 3 ? sqrt(pow(datum.x,2)+pow(datum.y,2)) : equation_id === 4 ? sqrt(0.08- pow(sqrt(pow(datum.x,2) + pow(datum.y,2)) - 0.7,2))||0: sqrt(1- (pow(datum.x,2)+pow(datum.y,2)))||0", "as": "z" } ] }, { "name":"volcano", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/volcano.json" }, { "name":"volcano_source", "values":[], "transform": [ { "type":"sequence", "start":0, "stop":{"signal":"data('volcano')[0].height"}, "as":"y" }, { "type":"formula", "expr": "sequence(0,data('volcano')[0].width,1)", "as":"x" }, { "type":"flatten", "fields":["x"] }, { "type":"formula", "expr": "data('volcano')[0].values[data('volcano')[0].width*datum.y+datum.x]", "as":"z" } ] }, { "name":"weather_seattle_source", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/seattle-weather-hourly-normals.csv", "format":{"type":"csv","parse":{"temperature":"number", "date":"date"}}, "transform": [ { "type":"formula", "expr": "hours(datum.date)", "as":"hour" }, { "type":"formula", "expr": "timeFormat(datum.date, '%m/%d')", "as":"day" }, { "type":"project", "fields":["day","hour","temperature"], "as":["x","y","z"] } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] }, { "name": "axes", "values": [{}], "transform": [ { "type": "formula", "expr": "{x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[0])}", "as": "root" }, { "type": "formula", "expr": "{x:q.w * datum.root.x + q.y*datum.root.z- q.z * datum.root.y, y:q.w * datum.root.y - q.x * datum.root.z + q.z*datum.root.x, z:q.w * datum.root.z + q.x*datum.root.y - q.y * datum.root.x, w: -q.x * datum.root.x - q.y * datum.root.y - q.z * datum.root.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_root" }, { "type": "formula", "expr": "[{label:'x', x:scale('x',size_x-1),y:range('y')[0],z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('x')[0])},{label:'y', x:range('x')[0],y:scale('y',size_y-1),z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('y')[0])},{label:ticks?'z ['+format(domain('z')[0],'.1~f')+', '+format(domain('z')[1],'.1~f')+']':'z', x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[1]), 'isNumber':true}]", "as": "axis" }, {"type": "flatten", "fields": ["axis"]}, { "type": "formula", "expr": "{x:q.w * datum.axis.x + q.y*datum.axis.z- q.z * datum.axis.y, y:q.w * datum.axis.y - q.x * datum.axis.z + q.z*datum.axis.x, z:q.w * datum.axis.z + q.x*datum.axis.y - q.y * datum.axis.x, w: -q.x * datum.axis.x - q.y * datum.axis.y - q.z * datum.axis.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_axis" } ] }, { "name":"x_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_x+size_x/(ticks_count+1)), size_x/(ticks_count+1))", "as":"x_tick" }, { "type": "flatten", "fields":["x_tick"] }, { "type": "formula", "expr": "round(max(0,datum.x_tick-1))", "as":"x_tick" }, { "type":"formula", "expr": "domain('dx')[datum.x_tick]", "as":"label" }, { "type":"formula", "expr":"{x:scale('x',datum.x_tick),y:1.2*scale('y',size_y-1),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y","projection.x2","projection.y2"], "as":["label","x","y","x2","y2"] } ] }, { "name":"y_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_y+size_y/(ticks_count+1)), size_y/(ticks_count+1))", "as":"y_tick" }, { "type": "flatten", "fields":["y_tick"] }, { "type": "formula", "expr": "round(max(0,datum.y_tick-1))", "as":"y_tick" }, { "type":"formula", "expr": "domain('dy')[datum.y_tick]", "as":"label" }, { "type":"formula", "expr":"{x:1.2*scale('x',size_x-1),y:scale('y',datum.y_tick),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y"], "as":["label","x","y"] } ] } ], "marks":[ { "type": "rect", "encode": { "enter": {}, "update": { "fill": {"signal": "theme === 'dark'?'black':'white'"}, "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "width": {"signal": "width"}, "height": {"signal": "height"} } } }, { "name": "axes_m", "type": "rule", "from": {"data": "axes"}, "encode": { "enter": {"strokewidth": {"value": 1}}, "update": { "opacity": {"signal": "axes?1:0"}, "stroke": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "x": {"field": "p_root.x", "offset": {"signal": "center.x"}}, "y": {"field": "p_root.y", "offset": {"signal": "center.y"}}, "x2": {"field": "p_axis.x", "offset": {"signal": "center.x"}}, "y2": {"field": "p_axis.y", "offset": {"signal": "center.y"}} } } }, { "type": "text", "interactive":false, "from": {"data": "axes_m"}, "encode": { "enter": { "text": {"field": "datum.axis.label"}, "align": {"value": "center"}, "baseline":{"value": "bottom"} }, "update": { "opacity": {"signal": "axes?1:0"}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"field": "x2"}, "yc": {"field": "y2", "offset": -5} } } }, { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } }, { "type": "text", "interactive":false, "encode": { "enter": { "align": {"value": "center"}, "baseline":{"value":"middle"} }, "update": { "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"signal": "width/2"}, "yc": {"signal": "height*0.95"}, "text": { "signal": "'id: '+ matrix_values.id+', x: '+matrix_values.x+', y: '+matrix_values.y+', z: '+matrix_values.z" }, "opacity": {"signal": "!is_dragging && isValid(matrix_values.x)?1:0"} } } }, { "type": "text", "interactive":false, "encode": { "enter": {"x": {"value": 15}}, "update": { "y": {"signal": "height*0.1"}, "fill": [{"test":"theme === 'dark'","value":"lightgrey"},{"value":"black"}], "text": { "signal": "'Matrix size: '+size_x+'X'+size_y+'('+size_x*size_y+')'" } } } }, { "type":"text", "interactive":false, "from":{"data":"x_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "baseline":{"signal":"phi>90?'bottom':'top'"}, "text":{"field":"label"}, "opacity":[{"test":"ticks && (phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } }, { "type":"text", "interactive":false, "from":{"data":"y_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "text":{"field":"label"}, "baseline":{"signal":"phi>90?'bottom':'top'"}, "opacity":[{"test":"ticks &&(phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } } ] })48:T47b,This data set has the following properties: - data is not ordered - some `z` value is missing (object B-1 does not have value) - the `x`/`y` matrix is incomplete (object C-3 is not in the data set) - There are some duplicates for `x` and `y` (C-2 appears twice) - `x` is a string - `y` is a number - `z` is a number This small example represents a general source for our 3D Matrix: we have `x`,`y` and `z` fields and we want to accept input source that might have some missing values or even missing cells, and where the data is not properly sorted. ## Building the matrix We want now create a matrix that is a grid with n columns and p rows where n is the number of different values for `x` and p is the number of different values of `y`. We want to have a value in each cell, and if we don't have one we will use a null value. In our example the data set has 3 different values for `x` (A, B and C) and 3 different values for `y` (1,2,3). It should generate a 3x3 matrix with 9 cells. To build our matrix we first need to count and order the different values of `x` and `y`. We will achieve this using ordinal sorted scales declared like this:49:T4a7,matrix=({ "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] })4a:T12c5,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals": [ { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"size_x", "init":"length(domain('dx'))" }, { "name":"size_y", "init":"length(domain('dx'))" }, { "name":"size", "update":"scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" } ], "scales": [ { "name":"dx", "type": "ordinal", "domain":{"data": "source", "field":"x", "sort":true} }, { "name":"dy", "type": "ordinal", "domain":{"data": "source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] } ], "data":[ { "name":"source", "values":[ { "x":"A", "y":1, "z":42 }, { "x":"C", "y":2, "z":61 }, { "x":"B", "y":3, "z":64 }, { "x":"A", "y":2, "z":50 }, { "x":"A", "y":3, "z":21 }, { "x":"C", "y":1, "z":50 }, { "x":"B", "y":1 }, { "x":"B", "y":2, "z":27 }, { "x":"C", "y":2, "z":48 } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type":"formula", "expr":"{x:datum.point.x*size/2, y:datum.point.y*size/2, z:datum.point.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] } ], "marks":[ { "type":"symbol", "from": {"data":"projections"}, "encode": { "update": { "x":{"field":"projection.x", "offset":{"signal": "center.x"}}, "y":{"field":"projection.y", "offset":{"signal":"center.y"}} } } } ] })4b:T627,paths=({ "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] })4c:T1b53,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals": [ { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name":"size_x", "init":"length(domain('dx'))" }, { "name":"size_y", "init":"length(domain('dx'))" }, { "name":"size", "update":"scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" } ], "scales": [ { "name":"dx", "type": "ordinal", "domain":{"data": "source", "field":"x", "sort":true} }, { "name":"dy", "type": "ordinal", "domain":{"data": "source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[ { "x":"A", "y":1, "z":42 }, { "x":"C", "y":2, "z":61 }, { "x":"B", "y":3, "z":64 }, { "x":"A", "y":2, "z":50 }, { "x":"A", "y":3, "z":21 }, { "x":"C", "y":1, "z":50 }, { "x":"B", "y":1 }, { "x":"B", "y":2, "z":27 }, { "x":"C", "y":2, "z":48 } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type":"formula", "expr":"{x:datum.point.x*size/2, y:datum.point.y*size/2, z:datum.point.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] } ], "marks":[ { "type":"path", "from": {"data":"paths"}, "encode": { "update": { "fill":{"field":"avg_z", "scale":"color"}, "stroke":{"value":"darkgrey"}, "path":{"field":"path"}, "x":{"signal":"center.x"}, "y":{"signal":"center.y"}, "tooltip":{"signal":"{x:datum.data.x,y:datum.data.y,z:datum.data.z}"} } } } ] })4d:T2b63,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "signals": [ { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theta", "value": 30, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 65, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1} }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"lightgrey", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name":"perspective", "value":0.15, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type": "ordinal", "domain":{"data": "source", "field":"x", "sort":true} }, { "name":"dy", "type": "ordinal", "domain":{"data": "source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[ { "x":"A", "y":1, "z":42 }, { "x":"C", "y":2, "z":61 }, { "x":"B", "y":3, "z":64 }, { "x":"A", "y":2, "z":50 }, { "x":"A", "y":3, "z":21 }, { "x":"C", "y":1, "z":50 }, { "x":"B", "y":1 }, { "x":"B", "y":2, "z":27 }, { "x":"C", "y":2, "z":48 } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] } ], "marks":[ { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } } ] })4e:T368c,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":400, "height":400, "background":{"signal":"theme === 'dark'?'black':'white'"}, "title": { "text": "3D Matrix", "color": {"signal": "theme === 'dark' ? 'lightgrey':'black'"}, "dy": 25 }, "signals": [ {"name": "x_sequence", "value": {"min": -1, "max": 1, "count": 40}}, {"name": "y_sequence", "value": {"min": -1, "max": 1, "count": 40}}, { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theme", "value": "dark", "bind": {"input": "select", "options": ["dark", "light"]} }, { "name": "theta", "value": 30, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 65, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1}, "on":[ {"events":{"signal": "equation_id"},"update":"equation_id === 4 ?0.3:equation_id===5?0.5:0.6", "force": true} ] }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"lightgrey", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name": "equation", "value": "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "bind": { "input": "select", "options": [ "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "x*y³ - y*x³", "sqrt(x²+y²)", "half tore", "half sphere" ] } }, { "name":"perspective", "value":0.15, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "equation_id", "init":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)", "on": [{"events":{"signal":"equation"},"update":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)"}] }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type": "ordinal", "domain":{"data": "source", "field":"x", "sort":true} }, { "name":"dy", "type": "ordinal", "domain":{"data": "source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[], "transform": [ { "type": "sequence", "start": {"signal": "x_sequence.min"}, "stop": { "signal": "x_sequence.max+(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "step": { "signal": "(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "as": "x" }, { "type": "formula", "expr": "sequence(y_sequence.min,y_sequence.max + (y_sequence.max-y_sequence.min)/(y_sequence.count-1),(y_sequence.max-y_sequence.min)/(y_sequence.count-1))", "as": "y" }, {"type": "flatten", "fields": ["y"]}, { "type": "formula", "expr": "equation_id === 1 ?10*sin(sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)))/sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)): equation_id === 2 ? datum.x*pow(datum.y,3)-datum.y*pow(datum.x,3): equation_id === 3 ? sqrt(pow(datum.x,2)+pow(datum.y,2)) : equation_id === 4 ? sqrt(0.08- pow(sqrt(pow(datum.x,2) + pow(datum.y,2)) - 0.7,2))||0: sqrt(1- (pow(datum.x,2)+pow(datum.y,2)))||0", "as": "z" } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] } ], "marks":[ { "type": "text", "interactive":false, "encode": { "enter": { "align": {"value": "center"}, "baseline":{"value":"middle"} }, "update": { "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"signal": "width/2"}, "yc": {"signal": "height*0.95"}, "text": { "signal": "'id: '+ matrix_values.id+', x: '+matrix_values.x+', y: '+matrix_values.y+', z: '+matrix_values.z" }, "opacity": {"signal": "!is_dragging && isValid(matrix_values.x)?1:0"} } } }, { "type": "text", "interactive":false, "encode": { "enter": {"x": {"value": 15}}, "update": { "y": {"signal": "height*0.1"}, "fill": [{"test":"theme === 'dark'","value":"lightgrey"},{"value":"black"}], "text": { "signal": "'Matrix size: '+size_x+'X'+size_y+'('+size_x*size_y+')'" } } } }, { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } } ] })4f:T6101,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":500, "height":500, "background":{"signal":"theme === 'dark'?'black':'white'"}, "title": { "text": "3D Matrix", "color": {"signal": "theme === 'dark' ? 'lightgrey':'black'"}, "dy": 25 }, "signals": [ {"name": "x_sequence", "value": {"min": -1, "max": 1, "count": 40}}, {"name": "y_sequence", "value": {"min": -1, "max": 1, "count": 40}}, { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theme", "value": "dark", "bind": {"input": "select", "options": ["dark", "light"]} }, { "name": "theta", "value": 30, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 65, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1}, "on":[ {"events":{"signal": "equation_id"},"update":"equation_id === 4 ?0.3:equation_id===5?0.5:0.6", "force": true} ] }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "axes", "value": true, "bind": {"input": "checkbox"}}, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"lightgrey", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name": "equation", "value": "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "bind": { "input": "select", "options": [ "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "x*y³ - y*x³", "sqrt(x²+y²)", "half tore", "half sphere" ] } }, { "name":"ticks", "value":true, "bind":{"input": "checkbox"} } , { "name":"ticks_count", "value":1, "bind":{"input": "range", "min": 0,"max":5, "step": 1, "name":"ticks count"} }, { "name":"perspective", "value":0.15, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name": "equation_id", "init":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)", "on": [{"events":{"signal":"equation"},"update":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)"}] }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type":"ordinal", "domain":{"data":"id_source", "field":"x", "sort":true} }, { "name":"dy", "type":"ordinal", "domain":{"data":"id_source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[], "transform": [ { "type": "sequence", "start": {"signal": "x_sequence.min"}, "stop": { "signal": "x_sequence.max+(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "step": { "signal": "(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "as": "x" }, { "type": "formula", "expr": "sequence(y_sequence.min,y_sequence.max + (y_sequence.max-y_sequence.min)/(y_sequence.count-1),(y_sequence.max-y_sequence.min)/(y_sequence.count-1))", "as": "y" }, {"type": "flatten", "fields": ["y"]}, { "type": "formula", "expr": "equation_id === 1 ?10*sin(sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)))/sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)): equation_id === 2 ? datum.x*pow(datum.y,3)-datum.y*pow(datum.x,3): equation_id === 3 ? sqrt(pow(datum.x,2)+pow(datum.y,2)) : equation_id === 4 ? sqrt(0.08- pow(sqrt(pow(datum.x,2) + pow(datum.y,2)) - 0.7,2))||0: sqrt(1- (pow(datum.x,2)+pow(datum.y,2)))||0", "as": "z" } ] }, { "name":"volcano", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/volcano.json" }, { "name":"volcano_source", "values":[], "transform": [ { "type":"sequence", "start":0, "stop":{"signal":"data('volcano')[0].height"}, "as":"y" }, { "type":"formula", "expr": "sequence(0,data('volcano')[0].width,1)", "as":"x" }, { "type":"flatten", "fields":["x"] }, { "type":"formula", "expr": "data('volcano')[0].values[data('volcano')[0].width*datum.y+datum.x]", "as":"z" } ] }, { "name":"weather_seattle_source", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/seattle-weather-hourly-normals.csv", "format":{"type":"csv","parse":{"temperature":"number", "date":"date"}}, "transform": [ { "type":"formula", "expr": "hours(datum.date)", "as":"hour" }, { "type":"formula", "expr": "timeFormat(datum.date, '%m/%d')", "as":"day" }, { "type":"project", "fields":["day","hour","temperature"], "as":["x","y","z"] } ] }, { "name":"id_source", "source":"source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] }, { "name": "axes", "values": [{}], "transform": [ { "type": "formula", "expr": "{x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[0])}", "as": "root" }, { "type": "formula", "expr": "{x:q.w * datum.root.x + q.y*datum.root.z- q.z * datum.root.y, y:q.w * datum.root.y - q.x * datum.root.z + q.z*datum.root.x, z:q.w * datum.root.z + q.x*datum.root.y - q.y * datum.root.x, w: -q.x * datum.root.x - q.y * datum.root.y - q.z * datum.root.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_root" }, { "type": "formula", "expr": "[{label:'x', x:scale('x',size_x-1),y:range('y')[0],z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('x')[0])},{label:'y', x:range('x')[0],y:scale('y',size_y-1),z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('y')[0])},{label:ticks?'z ['+format(domain('z')[0],'.1~f')+', '+format(domain('z')[1],'.1~f')+']':'z', x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[1]), 'isNumber':true}]", "as": "axis" }, {"type": "flatten", "fields": ["axis"]}, { "type": "formula", "expr": "{x:q.w * datum.axis.x + q.y*datum.axis.z- q.z * datum.axis.y, y:q.w * datum.axis.y - q.x * datum.axis.z + q.z*datum.axis.x, z:q.w * datum.axis.z + q.x*datum.axis.y - q.y * datum.axis.x, w: -q.x * datum.axis.x - q.y * datum.axis.y - q.z * datum.axis.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_axis" } ] }, { "name":"x_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_x+size_x/(ticks_count+1)), size_x/(ticks_count+1))", "as":"x_tick" }, { "type": "flatten", "fields":["x_tick"] }, { "type": "formula", "expr": "round(max(0,datum.x_tick-1))", "as":"x_tick" }, { "type":"formula", "expr": "domain('dx')[datum.x_tick]", "as":"label" }, { "type":"formula", "expr":"{x:scale('x',datum.x_tick),y:1.2*scale('y',size_y-1),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y","projection.x2","projection.y2"], "as":["label","x","y","x2","y2"] } ] }, { "name":"y_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_y+size_y/(ticks_count+1)), size_y/(ticks_count+1))", "as":"y_tick" }, { "type": "flatten", "fields":["y_tick"] }, { "type": "formula", "expr": "round(max(0,datum.y_tick-1))", "as":"y_tick" }, { "type":"formula", "expr": "domain('dy')[datum.y_tick]", "as":"label" }, { "type":"formula", "expr":"{x:1.2*scale('x',size_x-1),y:scale('y',datum.y_tick),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y"], "as":["label","x","y"] } ] } ], "marks":[ { "type": "rect", "encode": { "enter": {}, "update": { "fill": {"signal": "theme === 'dark'?'black':'white'"}, "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "width": {"signal": "width"}, "height": {"signal": "height"} } } }, { "name": "axes_m", "type": "rule", "from": {"data": "axes"}, "encode": { "enter": {"strokewidth": {"value": 1}}, "update": { "opacity": {"signal": "axes?1:0"}, "stroke": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "x": {"field": "p_root.x", "offset": {"signal": "center.x"}}, "y": {"field": "p_root.y", "offset": {"signal": "center.y"}}, "x2": {"field": "p_axis.x", "offset": {"signal": "center.x"}}, "y2": {"field": "p_axis.y", "offset": {"signal": "center.y"}} } } }, { "type": "text", "interactive":false, "from": {"data": "axes_m"}, "encode": { "enter": { "text": {"field": "datum.axis.label"}, "align": {"value": "center"}, "baseline":{"value": "bottom"} }, "update": { "opacity": {"signal": "axes?1:0"}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"field": "x2"}, "yc": {"field": "y2", "offset": -5} } } }, { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } }, { "type": "text", "interactive":false, "encode": { "enter": { "align": {"value": "center"}, "baseline":{"value":"middle"} }, "update": { "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"signal": "width/2"}, "yc": {"signal": "height*0.95"}, "text": { "signal": "'id: '+ matrix_values.id+', x: '+matrix_values.x+', y: '+matrix_values.y+', z: '+matrix_values.z" }, "opacity": {"signal": "!is_dragging && isValid(matrix_values.x)?1:0"} } } }, { "type": "text", "interactive":false, "encode": { "enter": {"x": {"value": 15}}, "update": { "y": {"signal": "height*0.1"}, "fill": [{"test":"theme === 'dark'","value":"lightgrey"},{"value":"black"}], "text": { "signal": "'Matrix size: '+size_x+'X'+size_y+'('+size_x*size_y+')'" } } } }, { "type":"text", "interactive":false, "from":{"data":"x_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "baseline":{"signal":"phi>90?'bottom':'top'"}, "text":{"field":"label"}, "opacity":[{"test":"ticks && (phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } }, { "type":"text", "interactive":false, "from":{"data":"y_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "text":{"field":"label"}, "baseline":{"signal":"phi>90?'bottom':'top'"}, "opacity":[{"test":"ticks &&(phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } } ] })50:T6114,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":500, "height":500, "background":{"signal":"theme === 'dark'?'black':'white'"}, "title": { "text": "Maungawhau volcano", "color": {"signal": "theme === 'dark' ? 'lightgrey':'black'"}, "dy": 25 }, "signals": [ {"name": "x_sequence", "value": {"min": -1, "max": 1, "count": 40}}, {"name": "y_sequence", "value": {"min": -1, "max": 1, "count": 40}}, { "name": "scheme", "value": "blueorange", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theme", "value": "dark", "bind": {"input": "select", "options": ["dark", "light"]} }, { "name": "theta", "value": 75, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 65, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1}, "on":[ {"events":{"signal": "equation_id"},"update":"equation_id === 4 ?0.3:equation_id===5?0.5:0.6", "force": true} ] }, { "name": "scale", "value": 1.3, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "axes", "value": true, "bind": {"input": "checkbox"}}, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"lightgrey", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name": "equation", "value": "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "bind": { "input": "select", "options": [ "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "x*y³ - y*x³", "sqrt(x²+y²)", "half tore", "half sphere" ] } }, { "name":"ticks", "value":true, "bind":{"input": "checkbox"} } , { "name":"ticks_count", "value":1, "bind":{"input": "range", "min": 0,"max":5, "step": 1, "name":"ticks count"} }, { "name":"perspective", "value":0.15, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name": "equation_id", "init":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)", "on": [{"events":{"signal":"equation"},"update":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)"}] }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type":"ordinal", "domain":{"data":"id_source", "field":"x", "sort":true} }, { "name":"dy", "type":"ordinal", "domain":{"data":"id_source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[], "transform": [ { "type": "sequence", "start": {"signal": "x_sequence.min"}, "stop": { "signal": "x_sequence.max+(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "step": { "signal": "(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "as": "x" }, { "type": "formula", "expr": "sequence(y_sequence.min,y_sequence.max + (y_sequence.max-y_sequence.min)/(y_sequence.count-1),(y_sequence.max-y_sequence.min)/(y_sequence.count-1))", "as": "y" }, {"type": "flatten", "fields": ["y"]}, { "type": "formula", "expr": "equation_id === 1 ?10*sin(sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)))/sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)): equation_id === 2 ? datum.x*pow(datum.y,3)-datum.y*pow(datum.x,3): equation_id === 3 ? sqrt(pow(datum.x,2)+pow(datum.y,2)) : equation_id === 4 ? sqrt(0.08- pow(sqrt(pow(datum.x,2) + pow(datum.y,2)) - 0.7,2))||0: sqrt(1- (pow(datum.x,2)+pow(datum.y,2)))||0", "as": "z" } ] }, { "name":"volcano", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/volcano.json" }, { "name":"volcano_source", "values":[], "transform": [ { "type":"sequence", "start":0, "stop":{"signal":"data('volcano')[0].height"}, "as":"y" }, { "type":"formula", "expr": "sequence(0,data('volcano')[0].width,1)", "as":"x" }, { "type":"flatten", "fields":["x"] }, { "type":"formula", "expr": "data('volcano')[0].values[data('volcano')[0].width*datum.y+datum.x]", "as":"z" } ] }, { "name":"weather_seattle_source", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/seattle-weather-hourly-normals.csv", "format":{"type":"csv","parse":{"temperature":"number", "date":"date"}}, "transform": [ { "type":"formula", "expr": "hours(datum.date)", "as":"hour" }, { "type":"formula", "expr": "timeFormat(datum.date, '%m/%d')", "as":"day" }, { "type":"project", "fields":["day","hour","temperature"], "as":["x","y","z"] } ] }, { "name":"id_source", "source":"volcano_source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] }, { "name": "axes", "values": [{}], "transform": [ { "type": "formula", "expr": "{x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[0])}", "as": "root" }, { "type": "formula", "expr": "{x:q.w * datum.root.x + q.y*datum.root.z- q.z * datum.root.y, y:q.w * datum.root.y - q.x * datum.root.z + q.z*datum.root.x, z:q.w * datum.root.z + q.x*datum.root.y - q.y * datum.root.x, w: -q.x * datum.root.x - q.y * datum.root.y - q.z * datum.root.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_root" }, { "type": "formula", "expr": "[{label:'x', x:scale('x',size_x-1),y:range('y')[0],z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('x')[0])},{label:'y', x:range('x')[0],y:scale('y',size_y-1),z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('y')[0])},{label:ticks?'z ['+format(domain('z')[0],'.1~f')+', '+format(domain('z')[1],'.1~f')+']':'z', x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[1]), 'isNumber':true}]", "as": "axis" }, {"type": "flatten", "fields": ["axis"]}, { "type": "formula", "expr": "{x:q.w * datum.axis.x + q.y*datum.axis.z- q.z * datum.axis.y, y:q.w * datum.axis.y - q.x * datum.axis.z + q.z*datum.axis.x, z:q.w * datum.axis.z + q.x*datum.axis.y - q.y * datum.axis.x, w: -q.x * datum.axis.x - q.y * datum.axis.y - q.z * datum.axis.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_axis" } ] }, { "name":"x_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_x+size_x/(ticks_count+1)), size_x/(ticks_count+1))", "as":"x_tick" }, { "type": "flatten", "fields":["x_tick"] }, { "type": "formula", "expr": "round(max(0,datum.x_tick-1))", "as":"x_tick" }, { "type":"formula", "expr": "domain('dx')[datum.x_tick]", "as":"label" }, { "type":"formula", "expr":"{x:scale('x',datum.x_tick),y:1.2*scale('y',size_y-1),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y","projection.x2","projection.y2"], "as":["label","x","y","x2","y2"] } ] }, { "name":"y_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_y+size_y/(ticks_count+1)), size_y/(ticks_count+1))", "as":"y_tick" }, { "type": "flatten", "fields":["y_tick"] }, { "type": "formula", "expr": "round(max(0,datum.y_tick-1))", "as":"y_tick" }, { "type":"formula", "expr": "domain('dy')[datum.y_tick]", "as":"label" }, { "type":"formula", "expr":"{x:1.2*scale('x',size_x-1),y:scale('y',datum.y_tick),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y"], "as":["label","x","y"] } ] } ], "marks":[ { "type": "rect", "encode": { "enter": {}, "update": { "fill": {"signal": "theme === 'dark'?'black':'white'"}, "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "width": {"signal": "width"}, "height": {"signal": "height"} } } }, { "name": "axes_m", "type": "rule", "from": {"data": "axes"}, "encode": { "enter": {"strokewidth": {"value": 1}}, "update": { "opacity": {"signal": "axes?1:0"}, "stroke": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "x": {"field": "p_root.x", "offset": {"signal": "center.x"}}, "y": {"field": "p_root.y", "offset": {"signal": "center.y"}}, "x2": {"field": "p_axis.x", "offset": {"signal": "center.x"}}, "y2": {"field": "p_axis.y", "offset": {"signal": "center.y"}} } } }, { "type": "text", "interactive":false, "from": {"data": "axes_m"}, "encode": { "enter": { "text": {"field": "datum.axis.label"}, "align": {"value": "center"}, "baseline":{"value": "bottom"} }, "update": { "opacity": {"signal": "axes?1:0"}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"field": "x2"}, "yc": {"field": "y2", "offset": -5} } } }, { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } }, { "type": "text", "interactive":false, "encode": { "enter": { "align": {"value": "center"}, "baseline":{"value":"middle"} }, "update": { "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"signal": "width/2"}, "yc": {"signal": "height*0.95"}, "text": { "signal": "'id: '+ matrix_values.id+', x: '+matrix_values.x+', y: '+matrix_values.y+', z: '+matrix_values.z" }, "opacity": {"signal": "!is_dragging && isValid(matrix_values.x)?1:0"} } } }, { "type": "text", "interactive":false, "encode": { "enter": {"x": {"value": 15}}, "update": { "y": {"signal": "height*0.1"}, "fill": [{"test":"theme === 'dark'","value":"lightgrey"},{"value":"black"}], "text": { "signal": "'Matrix size: '+size_x+'X'+size_y+'('+size_x*size_y+')'" } } } }, { "type":"text", "interactive":false, "from":{"data":"x_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "baseline":{"signal":"phi>90?'bottom':'top'"}, "text":{"field":"label"}, "opacity":[{"test":"ticks && (phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } }, { "type":"text", "interactive":false, "from":{"data":"y_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "text":{"field":"label"}, "baseline":{"signal":"phi>90?'bottom':'top'"}, "opacity":[{"test":"ticks &&(phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } } ] })51:T6129,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width":500, "height":500, "background":{"signal":"theme === 'dark'?'black':'white'"}, "title": { "text": "Seattle Anual Temperatures 3D Heatmap", "color": {"signal": "theme === 'dark' ? 'lightgrey':'black'"}, "dy": 25 }, "signals": [ {"name": "x_sequence", "value": {"min": -1, "max": 1, "count": 40}}, {"name": "y_sequence", "value": {"min": -1, "max": 1, "count": 40}}, { "name": "scheme", "value": "viridis", "bind": { "input": "select", "options": [ "viridis", "blueorange", "darkgold", "darkblue", "darkgreen", "darkmulti", "purplegreen", "spectral" ] } }, { "name": "theme", "value": "dark", "bind": {"input": "select", "options": ["dark", "light"]} }, { "name": "theta", "value": 15, "bind": {"input": "range", "min": -45, "max": 135, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "phi", "value": 50, "bind": {"input": "range", "min": 0, "max": 180, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name":"expand", "value":0.6,"bind":{"input":"range", "min":0, "max":1, "step":0.1}, "on":[ {"events":{"signal": "equation_id"},"update":"equation_id === 4 ?0.3:equation_id===5?0.5:0.6", "force": true} ] }, { "name": "scale", "value": 1.1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10" } ] }, {"name": "axes", "value": true, "bind": {"input": "checkbox"}}, {"name": "fill", "value": true, "bind": {"input": "checkbox"}}, { "name":"grid_color", "value":"scheme", "bind":{"input": "select","options":["scheme", "darkgrey", "lightgrey"],"name":"grid color"} }, { "name": "equation", "value": "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "bind": { "input": "select", "options": [ "10*sin(sqrt(x²+y²))/sqrt(x²+y²)", "x*y³ - y*x³", "sqrt(x²+y²)", "half tore", "half sphere" ] } }, { "name":"ticks", "value":true, "bind":{"input": "checkbox"} } , { "name":"ticks_count", "value":3, "bind":{"input": "range", "min": 0,"max":5, "step": 1, "name":"ticks count"} }, { "name":"perspective", "value":0.15, "bind":{"input":"range", "min": 0, "max": 0.3, "step": 0.01} }, { "name":"size_x","init":"length(domain('dx'))" }, { "name":"size_y","init":"length(domain('dy'))" }, { "name": "equation_id", "init":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)", "on": [{"events":{"signal":"equation"},"update":"equation === '10*sin(sqrt(x²+y²))/sqrt(x²+y²)' ? 1:(equation === 'x*y³ - y*x³' ? 2 : equation === 'sqrt(x²+y²)' ? 3 : equation === 'half tore' ? 4: 5)"}] }, { "name":"size", "update":"(1-perspective)*scale*min(width,height)/2" }, { "name": "center", "init":"{x:width/2, y:height/2}" }, { "name": "angle_HOR", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "theta + ((event.movementX < 0) ^ (phi > 180) ? 5 : (event.movementX > 0) ^(phi > 180) ? -5 : 0)" } ] }, {"name": "validAngle_HOR", "update": "max(min(angle_HOR,135),-45)"}, { "name": "angle_VER", "on": [ { "events": "view:mousemove[event.buttons === 1]", "update": "phi + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, {"name": "validAngle_VER", "update": "max(min(angle_VER,180),0)"}, { "name": "qrAngle_HOR", "init": "PI*(theta)/360", "on": [{"events": {"signal": "-theta"}, "update": "PI*(theta)/360"}] }, { "name": "qrAngle_VER", "init": "PI*(phi)/360", "on": [{"events": {"signal": "phi"}, "update": "PI*(phi)/360"}] }, {"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": "matrix_values", "init":"{}", "on": [ { "events": "path:mouseover", "update": "{'x':isNumber(datum.data.x) ? format(datum.data.x,'.2~f'):datum.data.x,'y':isNumber(datum.data.y) ? format(datum.data.y,'.2~f'):datum.data.y,'z':format(datum.data.z,'.2~f'), id:datum.id, color:fill?scale('color',datum.avg_z):background}" }, {"events": "path:mouseout", "update": "{}"} ] }, { "name":"contrast", "update":"isValid(matrix_values.color)?contrast(matrix_values.color,'#ffeb3b'):0" }, { "name": "is_dragging", "update": "false", "on": [ {"events": "view:mousedown[event.buttons === 1]", "update": "true"}, { "events": "view:mouseup, view:mousemove[event.buttons !== 1]", "update": "false" } ] } ], "scales": [ { "name":"dx", "type":"ordinal", "domain":{"data":"id_source", "field":"x", "sort":true} }, { "name":"dy", "type":"ordinal", "domain":{"data":"id_source", "field":"y", "sort":true} }, { "name":"x", "type":"point", "domain":{"data":"matrix", "field":"ix"}, "range":[-1,1] }, { "name":"y", "type":"point", "domain":{"data":"matrix", "field":"iy"}, "range":[-1,1] }, { "name":"z", "type":"linear", "zero":false, "domain":{"data":"matrix", "field":"z"}, "range":[{"signal": "-expand"},{"signal": "expand"}] }, { "name":"color", "type":"linear", "domain":{"data":"matrix","field":"z"}, "range":{"scheme":{"signal":"scheme"}} } ], "data":[ { "name":"source", "values":[], "transform": [ { "type": "sequence", "start": {"signal": "x_sequence.min"}, "stop": { "signal": "x_sequence.max+(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "step": { "signal": "(x_sequence.max-x_sequence.min)/(x_sequence.count-1)" }, "as": "x" }, { "type": "formula", "expr": "sequence(y_sequence.min,y_sequence.max + (y_sequence.max-y_sequence.min)/(y_sequence.count-1),(y_sequence.max-y_sequence.min)/(y_sequence.count-1))", "as": "y" }, {"type": "flatten", "fields": ["y"]}, { "type": "formula", "expr": "equation_id === 1 ?10*sin(sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)))/sqrt(pow(10*datum.x,2)+pow(10*datum.y,2)): equation_id === 2 ? datum.x*pow(datum.y,3)-datum.y*pow(datum.x,3): equation_id === 3 ? sqrt(pow(datum.x,2)+pow(datum.y,2)) : equation_id === 4 ? sqrt(0.08- pow(sqrt(pow(datum.x,2) + pow(datum.y,2)) - 0.7,2))||0: sqrt(1- (pow(datum.x,2)+pow(datum.y,2)))||0", "as": "z" } ] }, { "name":"volcano", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/volcano.json" }, { "name":"volcano_source", "values":[], "transform": [ { "type":"sequence", "start":0, "stop":{"signal":"data('volcano')[0].height"}, "as":"y" }, { "type":"formula", "expr": "sequence(0,data('volcano')[0].width,1)", "as":"x" }, { "type":"flatten", "fields":["x"] }, { "type":"formula", "expr": "data('volcano')[0].values[data('volcano')[0].width*datum.y+datum.x]", "as":"z" } ] }, { "name":"weather_seattle_source", "url":"https://raw.githubusercontent.com/vega/vega/master/docs/data/seattle-weather-hourly-normals.csv", "format":{"type":"csv","parse":{"temperature":"number", "date":"date"}}, "transform": [ { "type":"formula", "expr": "hours(datum.date)", "as":"hour" }, { "type":"formula", "expr": "timeFormat(datum.date, '%m/%d')", "as":"day" }, { "type":"project", "fields":["day","hour","temperature"], "as":["x","y","z"] } ] }, { "name":"id_source", "source":"weather_seattle_source", "transform": [ { "type":"formula", "expr":"datum.x+'.'+datum.y", "as":"id" }, { "type":"aggregate", "groupby":["id","x","y"], "fields":["z"], "ops":["mean"], "as":["z"] }, { "type":"formula", "expr":"isValid(datum.z)?datum.z:null", "as":"z" } ] }, { "name":"matrix", "values":[{}], "transform": [ { "type":"formula", "expr":"domain('dx')", "as":"x" }, { "type":"formula", "expr":"sequence(0,size_x,1)", "as":"ix" }, { "type":"flatten", "fields":["ix","x"] }, { "type":"formula", "expr":"sequence(0,size_y,1)", "as":"iy" }, { "type":"formula", "expr": "domain('dy')", "as":"y" }, { "type":"flatten", "fields":["iy","y"] }, { "type":"formula", "expr": "datum.x+'.'+datum.y", "as":"id" }, { "type":"lookup", "key": "id", "from":"id_source", "fields":["id"], "values":["z"], "as":["z"] }, { "type":"formula", "expr":"{x:datum.x, y:datum.y, z:datum.z}", "as":"data" }, { "type":"formula", "expr": "datum.ix+'.'+datum.iy", "as":"id" } ] }, { "name":"projections", "source":"matrix", "transform": [ { "type": "formula", "expr": "{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}", "as": "point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z), z:datum.q2.z*size/2}", "as":"projection" }, { "type":"project", "fields":["id","ix","iy", "data", "projection"], "as":["id","ix","iy", "data","projection"] } ] }, { "name":"paths", "source":"projections", "transform": [ { "type":"filter", "expr": "datum.ix < size_x -1 && datum.iy < size_y -1" }, { "type":"formula", "expr":"[datum.ix+'.'+datum.iy, (datum.ix+1)+'.'+datum.iy,(datum.ix+1)+'.'+(datum.iy+1),datum.ix+'.'+(datum.iy+1)]", "as":"point" }, { "type":"flatten", "fields":["point"] }, { "type":"lookup", "key":"id", "from": "projections", "fields":["point"], "values":["projection","data"] }, { "type":"filter", "expr":"isValid(datum.data.z)" }, { "type":"formula", "expr": "datum.projection.x+','+datum.projection.y", "as":"point" }, { "type":"aggregate", "groupby":["id"], "fields":["id", "projection.z", "data.z","id"], "ops":["values","mean", "mean","count"], "as":["points", "avg_pz", "avg_z", "count"] }, { "type":"formula", "expr": "(datum.count>0?'M'+datum.points[0].point:'')+(datum.count>1?' L'+datum.points[1].point:'')+(datum.count>2?' L'+datum.points[2].point:'')+(datum.count>3?' L'+datum.points[3].point:'')+'z'", "as":"path" }, { "type":"project", "fields":["id","points[0].data","path","avg_pz","avg_z"], "as":["id","data","path","avg_pz","avg_z"] } ] }, { "name": "axes", "values": [{}], "transform": [ { "type": "formula", "expr": "{x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[0])}", "as": "root" }, { "type": "formula", "expr": "{x:q.w * datum.root.x + q.y*datum.root.z- q.z * datum.root.y, y:q.w * datum.root.y - q.x * datum.root.z + q.z*datum.root.x, z:q.w * datum.root.z + q.x*datum.root.y - q.y * datum.root.x, w: -q.x * datum.root.x - q.y * datum.root.y - q.z * datum.root.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_root" }, { "type": "formula", "expr": "[{label:'x', x:scale('x',size_x-1),y:range('y')[0],z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('x')[0])},{label:'y', x:range('x')[0],y:scale('y',size_y-1),z:scale('z',domain('z')[0]), 'isNumber':isNumber(domain('y')[0])},{label:ticks?'z ['+format(domain('z')[0],'.1~f')+', '+format(domain('z')[1],'.1~f')+']':'z', x:range('x')[0],y:range('y')[0],z:scale('z',domain('z')[1]), 'isNumber':true}]", "as": "axis" }, {"type": "flatten", "fields": ["axis"]}, { "type": "formula", "expr": "{x:q.w * datum.axis.x + q.y*datum.axis.z- q.z * datum.axis.y, y:q.w * datum.axis.y - q.x * datum.axis.z + q.z*datum.axis.x, z:q.w * datum.axis.z + q.x*datum.axis.y - q.y * datum.axis.x, w: -q.x * datum.axis.x - q.y * datum.axis.y - q.z * datum.axis.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": "pq2" }, { "type": "formula", "expr": "{x:(datum.pq2.x)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z), y:(datum.pq2.y)*size/2*(1+perspective)/(1 - perspective*datum.pq2.z)}", "as": "p_axis" } ] }, { "name":"x_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_x+size_x/(ticks_count+1)), size_x/(ticks_count+1))", "as":"x_tick" }, { "type": "flatten", "fields":["x_tick"] }, { "type": "formula", "expr": "round(max(0,datum.x_tick-1))", "as":"x_tick" }, { "type":"formula", "expr": "domain('dx')[datum.x_tick]", "as":"label" }, { "type":"formula", "expr":"{x:scale('x',datum.x_tick),y:1.2*scale('y',size_y-1),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y","projection.x2","projection.y2"], "as":["label","x","y","x2","y2"] } ] }, { "name":"y_ticks", "values":[{}], "transform": [ { "type":"formula", "expr": "sequence(0,(size_y+size_y/(ticks_count+1)), size_y/(ticks_count+1))", "as":"y_tick" }, { "type": "flatten", "fields":["y_tick"] }, { "type": "formula", "expr": "round(max(0,datum.y_tick-1))", "as":"y_tick" }, { "type":"formula", "expr": "domain('dy')[datum.y_tick]", "as":"label" }, { "type":"formula", "expr":"{x:1.2*scale('x',size_x-1),y:scale('y',datum.y_tick),z:scale('z',domain('z')[0]), label:isNumber(datum.label)?format(datum.label,'.1~f'):datum.label}", "as":"point" }, { "type": "formula", "expr": "{x:q.w * datum.point.x + q.y*datum.point.z- q.z * datum.point.y, y:q.w * datum.point.y - q.x * datum.point.z + q.z*datum.point.x, z:q.w * datum.point.z + q.x*datum.point.y - q.y * datum.point.x, w: -q.x * datum.point.x - q.y * datum.point.y - q.z * datum.point.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":"{x:datum.q2.x*size/2*(1+perspective)/(1 - perspective*datum.q2.z), y:datum.q2.y*size/2*(1+perspective)/(1 - perspective*datum.q2.z)}", "as":"projection" }, { "type":"project", "fields":["point.label","projection.x","projection.y"], "as":["label","x","y"] } ] } ], "marks":[ { "type": "rect", "encode": { "enter": {}, "update": { "fill": {"signal": "theme === 'dark'?'black':'white'"}, "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "width": {"signal": "width"}, "height": {"signal": "height"} } } }, { "name": "axes_m", "type": "rule", "from": {"data": "axes"}, "encode": { "enter": {"strokewidth": {"value": 1}}, "update": { "opacity": {"signal": "axes?1:0"}, "stroke": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "x": {"field": "p_root.x", "offset": {"signal": "center.x"}}, "y": {"field": "p_root.y", "offset": {"signal": "center.y"}}, "x2": {"field": "p_axis.x", "offset": {"signal": "center.x"}}, "y2": {"field": "p_axis.y", "offset": {"signal": "center.y"}} } } }, { "type": "text", "interactive":false, "from": {"data": "axes_m"}, "encode": { "enter": { "text": {"field": "datum.axis.label"}, "align": {"value": "center"}, "baseline":{"value": "bottom"} }, "update": { "opacity": {"signal": "axes?1:0"}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"field": "x2"}, "yc": {"field": "y2", "offset": -5} } } }, { "sort":{"field":"datum.avg_pz"}, "type":"path", "from":{"data":"paths"}, "encode": { "update":{ "cursor": [ {"test": "is_dragging", "value": "grabbing"}, {"value": "pointer"} ], "fill":[{"test":"!is_dragging && (matrix_values.id === datum.id)","signal":"contrast<1.45?'#2a9df4':'#ffeb3b'"},{"test":"fill","field":"avg_z", "scale":"color"},{"value":"transparent"}], "stroke":[{"test":"grid_color === 'scheme'","field":"avg_z","scale":"color"},{"signal":"grid_color"}], "strokeWidth":[{"test":"grid_color === 'scheme'","value":1},{"value":0.3}], "x": {"signal": "center.x"}, "y": {"signal": "center.y"}, "path":{"field":"path"} } } }, { "type": "text", "interactive":false, "encode": { "enter": { "align": {"value": "center"}, "baseline":{"value":"middle"} }, "update": { "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}], "xc": {"signal": "width/2"}, "yc": {"signal": "height*0.95"}, "text": { "signal": "'id: '+ matrix_values.id+', x: '+matrix_values.x+', y: '+matrix_values.y+', z: '+matrix_values.z" }, "opacity": {"signal": "!is_dragging && isValid(matrix_values.x)?1:0"} } } }, { "type": "text", "interactive":false, "encode": { "enter": {"x": {"value": 15}}, "update": { "y": {"signal": "height*0.1"}, "fill": [{"test":"theme === 'dark'","value":"lightgrey"},{"value":"black"}], "text": { "signal": "'Matrix size: '+size_x+'X'+size_y+'('+size_x*size_y+')'" } } } }, { "type":"text", "interactive":false, "from":{"data":"x_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "baseline":{"signal":"phi>90?'bottom':'top'"}, "text":{"field":"label"}, "opacity":[{"test":"ticks && (phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } }, { "type":"text", "interactive":false, "from":{"data":"y_ticks"}, "encode": { "enter":{ "align":{"value":"center"} }, "update":{ "text":{"field":"label"}, "baseline":{"signal":"phi>90?'bottom':'top'"}, "opacity":[{"test":"ticks &&(phi<=75 || phi>=115)", "value": 1},{"value":0}], "x":{"field":"x", "offset":{"signal": "center.x"}}, "y":{"field":"y", "offset":{"signal": "center.y"}}, "fill": [{"test":"theme === 'dark'", "value":"lightgrey"},{"value":"black"}] } } } ] })52:[] 45:{"id":"1866a2f73530b557","slug":"creating-a-3d-matrix-visualization-using-vega","title":"Creating a 3D Matrix visualization using Vega","thumbnail":"a2eb8fd64c1aea87a361225aaba35c8648f084cf0b4f5b3dec21231a5c9fe89b","access_level":"public","create_time":"$D2021-10-29T10:16:21.833Z","update_time":"$D2021-10-31T07:40:03.771Z","view_time":null,"first_public_time":"$D2021-10-29T18:12:52.825Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"63c82b4833acbe6a","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":"starter_2024","bio":"","following":false},"version":190,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bed77b1e09ef1d5b","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bed77b1e09ef1d5b","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Creating a 3D Matrix visualization using Vega","cells":[{"id":0,"value":"# Creating a 3D Matrix visualization using Vega","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"## Introduction\n[Vega](https://vega.github.io/vega/) is a visualization grammar allowing to create any representation in a declarative way using .json format. Even it doesn't have any 3D engine, we can create it using formulas as experimented [here](https://observablehq.com/@mathiastiberghien/how-to-create-a-3d-engine-from-scratch-using-vega). We will try in this paper to build a general visualization that is able to render any 3D datasets, meaning that it contains at least 3 fields: `x`, `y` and `z`, `x` and `y` being considered as dimensions an can be of any type, and `z` being a numerical value.\n\n## A Sample 3D data set\nLet's start with an simple data set that generalizes the input source:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"source = (\n {\n \"name\":\"source\",\n \"values\":[\n {\n \"x\":\"A\",\n \"y\":1,\n \"z\":42\n },\n {\n \"x\":\"C\",\n \"y\":2,\n \"z\":61\n },\n {\n \"x\":\"B\",\n \"y\":3,\n \"z\":64\n },\n {\n \"x\":\"A\",\n \"y\":2,\n \"z\":50\n },\n {\n \"x\":\"A\",\n \"y\":3,\n \"z\":21\n },\n {\n \"x\":\"C\",\n \"y\":1,\n \"z\":50\n },\n {\n \"x\":\"B\",\n \"y\":1\n },\n {\n \"x\":\"B\",\n \"y\":2,\n \"z\":27\n },\n {\n \"x\":\"C\",\n \"y\":2,\n \"z\":48\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"scales=([\n {\n \"name\":\"dx\",\n \"type\": \"ordinal\",\n \"domain\":{\"data\": \"source\", \"field\":\"x\", \"sort\":true}\n },\n {\n \"name\":\"dy\",\n \"type\": \"ordinal\",\n \"domain\":{\"data\": \"source\", \"field\":\"y\", \"sort\":true}\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Then we can store the size of `x` and `y` using signals:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"signals=([\n {\n \"name\":\"size_x\",\n \"init\":\"length(domain('dx'))\"\n },\n {\n \"name\":\"size_y\",\n \"init\":\"length(domain('dx'))\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"We will now create an intermediary table, that will add an id as the concatenation of the `x` value and the `y` value. We also want to create the z value when it doesn't exist, and calculate the mean of the value when there are duplicates:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"id_source=(\n {\n \"name\":\"id_source\",\n \"source\":\"source\",\n \"transform\": [\n {\n \"type\":\"formula\",\n \"expr\":\"datum.x+'.'+datum.y\",\n \"as\":\"id\"\n },\n {\n \"type\":\"aggregate\",\n \"groupby\":[\"id\",\"x\",\"y\"],\n \"fields\":[\"z\"],\n \"ops\":[\"mean\"],\n \"as\":[\"z\"]\n },\n {\n \"type\":\"formula\",\n \"expr\":\"isValid(datum.z)?datum.z:null\",\n \"as\":\"z\"\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"We are now ready to build a matrix. We are using `size_x` and `size_y` to build a grid and the lookup transformation into the `id_source` table to retrieve each value (when there is one) for each cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"The matrix use the domain values of `x` and `y` which are sorted by the scales `dx` and `dy`. We created indexes `ix` and `iy` representing the location of a cell in the matrix. Then the lookup transform try to retrieve the z value associated with a couple `x`/`y`. The `id` field is recreated using `ix` and `iy` which will allow to retrieve a value by its position into the grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"## Projecting the data into a two dimensional space\n\nWe have now to project our 3D matrix into a two dimensional space. We will first create scales and signals to be able to map matrix cells values to a location on the screen:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"projection_signals=([\n {\n \"name\": \"scale\",\n \"value\": 1,\n \"bind\": {\"input\": \"range\", \"min\": 0, \"max\": 2, \"step\": 0.1},\n \"on\": [\n {\n \"events\": \"view:mousewheel\",\n \"update\": \"round(10*max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1))))/10\"\n }\n ]\n },\n {\n \"name\":\"expand\", \"value\":0.6,\"bind\":{\"input\":\"range\", \"min\":0, \"max\":1, \"step\":0.1}\n },\n {\n \"name\":\"size\",\n \"update\":\"scale*min(width,height)/2\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"projection_scales =([{\n \"name\":\"x\",\n \"type\":\"point\",\n \"domain\":{\"data\":\"matrix\", \"field\":\"ix\"},\n \"range\":[-1,1]\n },\n {\n \"name\":\"y\",\n \"type\":\"point\",\n \"domain\":{\"data\":\"matrix\", \"field\":\"iy\"},\n \"range\":[-1,1]\n },\n {\n \"name\":\"z\",\n \"type\":\"linear\",\n \"zero\":false,\n \"domain\":{\"data\":\"matrix\", \"field\":\"z\"},\n \"range\":[{\"signal\": \"-expand\"},{\"signal\": \"expand\"}]\n }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"We add some signal to deal with the `scale` (a factor), and the `size` (a pixel size based on the size of the visualization and the scale) of the visualization. We also add an `expand` parameter that will allows to scale the z range. The scales `x` and `y` are using ranges [-1,1] to transform the values in a normalized domain. The scale `z` have the [-expand,expand] range.\nAs a first step, we will not consider 3D projections and ignore the z value and create a data table that projects the cell indices into a pixel scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"projection_table=({\n \"name\":\"projections\",\n \"source\":\"matrix\",\n \"transform\": [\n {\n \"type\": \"formula\",\n \"expr\": \"{x:scale('x',datum.ix),y:scale('y',datum.iy),z:isValid(datum.data.z)?scale('z',datum.data.z):0}\",\n \"as\": \"point\"\n },\n {\n \"type\":\"formula\",\n \"expr\":\"{x:datum.point.x*size/2, y:datum.point.y*size/2}\",\n \"as\":\"projection\"\n },\n {\n \"type\":\"project\",\n \"fields\":[\"id\",\"ix\",\"iy\", \"data\", \"projection\"],\n \"as\":[\"id\",\"ix\",\"iy\", \"data\",\"projection\"]\n }\n ]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"We can now test to represents the data matrix using `symbol` marks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"marks = ([\n {\n \"type\":\"symbol\",\n \"from\": {\"data\":\"projections\"},\n \"encode\": {\n \"update\":\n {\n \"x\":{\"field\":\"projection.x\", \"offset\":{\"signal\": \"center.x\"}},\n \"y\":{\"field\":\"projection.y\", \"offset\":{\"signal\":\"center.y\"}}\n }\n }\n }\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"Changing the scale changes the size of the grid. We used a signal `center` representing the center the visualization. An offset is applied to the symbols to translate our projection to the center of the screen. Note that all the transformations (here you only have the scale) will apply to the center of the visualization: this is because we used a range symmetric to zero for the scale `x` , `y` and `z`.\n\n## Drawing the grid\n\nWe have now represented our matrix, but we want to draw the grid. we can define our grid by a collection of (size_x-1)x(size_y-1) shapes containing the points `[(ix,iy),(ix+1,iy),(ix+1,iy+1),(ix,iy+1)]`. We will then create a table representing svg paths of the projected points. We can take the mean of these \ndots to estimate the average z value for that shape:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"we can now draw these generated paths. Note that in each shape we filter the points with no valid value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"We have added a `color` scale based on the `matrix` z values and using a continuous color scheme defined in a `scheme` signal. We can see that the missing values in B-1 and C-3 are not rendered and that the tooltip shows data of the first available point in each shape.\n\n## Adding a 3D engine\n\nWe are now ready to use our [previous experiments](https://observablehq.com/@mathiastiberghien/how-to-create-a-3d-engine-from-scratch-using-vega) to add a 3D engine based on quaternions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Note that we just added a bunch of signals dealing with rotations and quaternions, and modify the `projections` table to a calculate the projections. If you modify the `expand` property, you can increase/decrease the z scale. The data represented is not really interesting so let's build some data set based on mathemical functions that will have a better look:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"Wow: way better with just a little change. We replace the `source` table with an empty table and some transform that will create a matrix using `sequence_x` and `sequence_y` signals that defines ranges of values and count of cells plus another transform that will calculate a z value based on x and y. We created a signal `equation` containing a list of formulas and the transform just apply the formula. You can write now your own mathematics functions and look how they render.\n\n## Adding axes and ticks\n\nAdding some other tables and signals will add axes and ticks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"As we wanted to test the representation of measured data we also tested the [volcano](https://vega.github.io/vega/examples/volcano-contours/) and the [weather-seattle](https://vega.github.io/vega/examples/heatmap/) sources taken from [Vega examples](https://vega.github.io/vega/examples/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"Note that we only added two datasources in the spec using [volcano](https://github.com/vega/vega/blob/master/docs/data/volcano.json) and [weather-seattle](https://github.com/vega/vega/blob/master/docs/data/seattle-weather-hourly-normals.csv) from [Vega docs](https://github.com/vega/vega/tree/master/docs/data) renaming the fields to x,y and z.\n\n## Representing data using notebooks\n\n[Altair](https://altair-viz.github.io/) allows to render vega spec in notebooks. You can use this spec as a generic 3D matrix renderer. You'll find how to that [here](https://colab.research.google.com/drive/1DZJm3KfgyhqCtybQ6euUcVEHKW7KYdEv?usp=sharing).\n\nHave fun!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 46:"$45:body"