Last active
October 15, 2023 23:19
-
-
Save supereggbert/aff58196188816576af0 to your computer and use it in GitHub Desktop.
3D Surface Plot in D3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body{ | |
| font-family: sans; | |
| padding: 10px; | |
| } | |
| svg path{ | |
| stroke: #000; | |
| stroke-width: 1px; | |
| stroke: rgba(0,0,0,0.2); | |
| } | |
| svg{ | |
| border: 1px solid #DED8BF; | |
| background-color: #f4f4d9; | |
| width: 700px; | |
| height: 400px; | |
| } | |
| h1{ | |
| font-weight: normal; | |
| margin: 0; | |
| padding-left: 5px; | |
| color: #53483e; | |
| } | |
| p{ | |
| margin: 0; | |
| margin-bottom: 10px; | |
| padding-left: 5px; | |
| color: #917e6b; | |
| } | |
| ul{ | |
| width: 200px; | |
| float: left; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| padding-right: 10px; | |
| } | |
| li{ | |
| cursor: pointer; | |
| background-color: #c8ad93; | |
| padding: 10px; | |
| margin: 2px; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>D3.js Surface Plots</h1> | |
| <p>Drag graph to change view</p> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="surface3d.js"></script> | |
| <script> | |
| var yaw=0.5,pitch=0.5, width=700, height=400, drag=false; | |
| function dataFromFormular(func){ | |
| var output=[]; | |
| for(var x=-20;x<20;x++){ | |
| var f0=[]; | |
| output.push(f0); | |
| for(var y=-20;y<20;y++){ | |
| f0.push(func(x,y)); | |
| } | |
| } | |
| return output; | |
| } | |
| var surfaces=[ | |
| { | |
| name: 'Dataset 1', | |
| data: dataFromFormular(function(x,y){ | |
| return Math.sin(Math.sqrt(x*x+y*y)/5*Math.PI)*50; | |
| }) | |
| }, | |
| { | |
| name: 'Dataset 2', | |
| data: dataFromFormular(function(x,y){ | |
| return Math.cos(x/15*Math.PI)*Math.cos(y/15*Math.PI)*60+Math.cos(x/8*Math.PI)*Math.cos(y/10*Math.PI)*40; | |
| }) | |
| }, | |
| { | |
| name: 'Dataset 3', | |
| data: dataFromFormular(function(x,y){ | |
| return -(Math.cos(Math.sqrt(x*x+y*y)/6*Math.PI)+1)*300/(Math.pow(x*x+y*y+1,0.3)+1)+50; | |
| }) | |
| } | |
| ]; | |
| var selected=surfaces[0]; | |
| var ul=d3.select('body') | |
| .append('ul'); | |
| var svg=d3.select('body') | |
| .append('svg') | |
| .attr('height',height) | |
| .attr('width',width); | |
| var group = svg.append("g"); | |
| var md=group.data([surfaces[0].data]) | |
| .surface3D(width,height) | |
| .surfaceHeight(function(d){ | |
| return d; | |
| }).surfaceColor(function(d){ | |
| var c=d3.hsl((d+100), 0.6, 0.5).rgb(); | |
| return "rgb("+parseInt(c.r)+","+parseInt(c.g)+","+parseInt(c.b)+")"; | |
| }); | |
| ul.selectAll('li') | |
| .data(surfaces) | |
| .enter().append('li') | |
| .html(function(d){ | |
| return d.name | |
| }).on('mousedown',function(){ | |
| md.data([d3.select(this).datum().data]).surface3D() | |
| .transition().duration(500) | |
| .surfaceHeight(function(d){ | |
| return d; | |
| }).surfaceColor(function(d){ | |
| var c=d3.hsl((d+100), 0.6, 0.5).rgb(); | |
| return "rgb("+parseInt(c.r)+","+parseInt(c.g)+","+parseInt(c.b)+")"; | |
| }); | |
| }); | |
| svg.on("mousedown",function(){ | |
| drag=[d3.mouse(this),yaw,pitch]; | |
| }).on("mouseup",function(){ | |
| drag=false; | |
| }).on("mousemove",function(){ | |
| if(drag){ | |
| var mouse=d3.mouse(this); | |
| yaw=drag[1]-(mouse[0]-drag[0][0])/50; | |
| pitch=drag[2]+(mouse[1]-drag[0][1])/50; | |
| pitch=Math.max(-Math.PI/2,Math.min(Math.PI/2,pitch)); | |
| md.turntable(yaw,pitch); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var Surface=function(node){ | |
| var heightFunction,colorFunction,timer,timer,transformPrecalc=[]; | |
| var displayWidth=300, displayHeight=300, zoom=1; | |
| var trans; | |
| this.setZoom=function(zoomLevel){ | |
| zoom=zoomLevel; | |
| if(timer) clearTimeout(timer); | |
| timer=setTimeout(renderSurface); | |
| }; | |
| var getHeights=function(){ | |
| var data=node.datum(); | |
| var output=[]; | |
| var xlength=data.length; | |
| var ylength=data[0].length; | |
| for(var x=0;x<xlength;x++){ | |
| output.push(t=[]); | |
| for(var y=0;y<ylength;y++){ | |
| var value=heightFunction(data[x][y],x,y); | |
| t.push(value); | |
| } | |
| } | |
| return output; | |
| }; | |
| var transformPoint=function(point){ | |
| var x=transformPrecalc[0]*point[0]+transformPrecalc[1]*point[1]+transformPrecalc[2]*point[2]; | |
| var y=transformPrecalc[3]*point[0]+transformPrecalc[4]*point[1]+transformPrecalc[5]*point[2]; | |
| var z=transformPrecalc[6]*point[0]+transformPrecalc[7]*point[1]+transformPrecalc[8]*point[2]; | |
| return [x,y,z]; | |
| }; | |
| var getTransformedData=function(){ | |
| var data=node.datum(); | |
| if(!heightFunction) return [[]]; | |
| var t, output=[]; | |
| var heights=getHeights(); | |
| var xlength=data.length; | |
| var ylength=data[0].length; | |
| for(var x=0;x<xlength;x++){ | |
| output.push(t=[]); | |
| for(var y=0;y<ylength;y++){ | |
| t.push(transformPoint([(x-xlength/2)/(xlength*1.41)*displayWidth*zoom, heights[x][y]*zoom, (y-ylength/2)/(ylength*1.41)*displayWidth*zoom])); | |
| } | |
| } | |
| return output; | |
| }; | |
| var renderSurface=function(){ | |
| var originalData=node.datum(); | |
| var data=getTransformedData(); | |
| var xlength=data.length; | |
| var ylength=data[0].length; | |
| var d0=[]; | |
| var idx=0; | |
| for(var x=0;x<xlength-1;x++){ | |
| for(var y=0;y<ylength-1;y++){ | |
| var depth=data[x][y][2]+data[x+1][y][2]+data[x+1][y+1][2]+data[x][y+1][2]; | |
| d0.push({ | |
| path: | |
| 'M'+(data[x][y][0]+displayWidth/2).toFixed(10)+','+(data[x][y][1]+displayHeight/2).toFixed(10)+ | |
| 'L'+(data[x+1][y][0]+displayWidth/2).toFixed(10)+','+(data[x+1][y][1]+displayHeight/2).toFixed(10)+ | |
| 'L'+(data[x+1][y+1][0]+displayWidth/2).toFixed(10)+','+(data[x+1][y+1][1]+displayHeight/2).toFixed(10)+ | |
| 'L'+(data[x][y+1][0]+displayWidth/2).toFixed(10)+','+(data[x][y+1][1]+displayHeight/2).toFixed(10)+'Z', | |
| depth: depth, data: originalData[x][y] | |
| }); | |
| } | |
| } | |
| d0.sort(function(a, b){return b.depth-a.depth}); | |
| var dr=node.selectAll('path').data(d0); | |
| dr.enter().append("path"); | |
| if(trans){ | |
| dr=dr.transition().delay(trans.delay()).duration(trans.duration()); | |
| } | |
| dr.attr("d",function(d){return d.path;}); | |
| if(colorFunction){ | |
| dr.attr("fill",function(d){return colorFunction(d.data)}); | |
| } | |
| trans=false; | |
| }; | |
| this.renderSurface=renderSurface; | |
| this.setTurtable=function(yaw, pitch){ | |
| var cosA=Math.cos(pitch); | |
| var sinA=Math.sin(pitch); | |
| var cosB=Math.cos(yaw); | |
| var sinB=Math.sin(yaw); | |
| transformPrecalc[0]=cosB; | |
| transformPrecalc[1]=0; | |
| transformPrecalc[2]=sinB; | |
| transformPrecalc[3]=sinA*sinB; | |
| transformPrecalc[4]=cosA; | |
| transformPrecalc[5]=-sinA*cosB; | |
| transformPrecalc[6]=-sinB*cosA; | |
| transformPrecalc[7]=sinA; | |
| transformPrecalc[8]=cosA*cosB; | |
| if(timer) clearTimeout(timer); | |
| timer=setTimeout(renderSurface); | |
| return this; | |
| }; | |
| this.setTurtable(0.5,0.5); | |
| this.surfaceColor=function(callback){ | |
| colorFunction=callback; | |
| if(timer) clearTimeout(timer); | |
| timer=setTimeout(renderSurface); | |
| return this; | |
| }; | |
| this.surfaceHeight=function(callback){ | |
| heightFunction=callback; | |
| if(timer) clearTimeout(timer); | |
| timer=setTimeout(renderSurface); | |
| return this; | |
| }; | |
| this.transition=function(){ | |
| var transition=d3.selection.prototype.transition.bind(node)(); | |
| colourFunction=null; | |
| heightFunction=null; | |
| transition.surfaceHeight=this.surfaceHeight; | |
| transition.surfaceColor=this.surfaceColor; | |
| trans=transition; | |
| return transition; | |
| }; | |
| this.setHeight=function(height){ | |
| if(height) displayHeight=height; | |
| }; | |
| this.setWidth=function(width){ | |
| if(width) displayWidth=width; | |
| }; | |
| }; | |
| d3.selection.prototype.surface3D=function(width,height){ | |
| if(!this.node().__surface__) this.node().__surface__=new Surface(this); | |
| var surface=this.node().__surface__; | |
| this.turntable=surface.setTurtable; | |
| this.surfaceColor=surface.surfaceColor; | |
| this.surfaceHeight=surface.surfaceHeight; | |
| this.zoom=surface.setZoom; | |
| surface.setHeight(height); | |
| surface.setWidth(width); | |
| this.transition=surface.transition.bind(surface); | |
| return this; | |
| }; | |
| })(); |
You are really great!
Short and effective code. I like it.
I work as an IT manager and programmer in an Italy Government paying agency of agricultural aids.
I used this code for plotting the graph of a collection of 3d DEM (digital elevation model) points of a land region.
I am new to d3.js
It would be good a commented version of your code or a short text learning documentation for people like me and others on the internet.
Im my case i have to graph points from a sperimental collection and not from formula. So i added a small piece of code for inserting my points.
var oArray = [
{"x":0,"y":0,"z":1.2},
{"x":0,"y":1,"z":2.2},
{"x":0,"y":2,"z":0.5}
{"x":1,"y":0,"z":1.7},
{"x":1,"y":1,"z":3.2},
{"x":1,"y":2,"z":11.4}
];
function dataFromArray(objArray) {
var output = [], xPrev = 0, p = [];
for (var i = 0; i < objArray.length; i++) {
if (objArray[i].x != xPrev) {
if (p != []) output[xPrev] = p;
p = [];
xPrev = objArray[i].x;
}
p[objArray[i].y] = 1 * objArray[i].z;
}
return output;
}
......
var surfaces = [
{
name: '3D pacel GRAPH',
data: dataFromArray(oArray)
}
];
I have seen that you need a completely filled rectangle of data so i made this code for filling all the extents of my poligon with points.
// -- filling al the DEM points bounding box
var aData = oArray; -- test array
// get max. x and y and min. z coords in the dataset
var k = 0, max = 0; zMin=10000, zMax=-10000; zAvg=0;
for (var k = 0; k < aData.length; k++) {
zAvg+=aData[k].zNorm;
if (aData[k].xNorm > max) max = aData[k].xNorm;
if (aData[k].yNorm > max) max = aData[k].yNorm;
if (aData[k].zNorm < zMin) zMin = aData[k].zNorm;
if (aData[k].zNorm > zMax) zMax = aData[k].zNorm;
}
zAvg=zAvg/aData.length;
var aDataValid = [];
(function () {
// adding all grid's missing points setting z widh average z
var k, kk, kkk, xPrev = -1, yPrev = -1, quit = 0;
for (k = 0; k < aData.length; k++) {
// -- terminaste ie debugger setting quit=1 in the console
if (quit == 1) return;
// -- adding points with x between last inserted and actual
for (kk = xPrev + 1; kk < aData[k].xNorm; kk++) {
for (kkk = 0; kkk < max + 1; kkk++) {
aDataValid.push({ "x": kk, "y": kkk, "z": zAvg });
}
}
// -- adding points with actual x and y between last inserted and actual y
for (kk = yPrev + 1; kk < aData[k].yNorm; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zAvg });
}
// -- adding actual point from dataset
aDataValid.push({"x": aData[k].xNorm,"y": aData[k].yNorm, "z": aData[k].zNorm});
// -- inserimento dei punti con x compreso fra x attuale e x successivo oppure fra x attuale e max
// -- adding points with x between actual x and next x or between actual x and max
if (k < aData.length - 1) {
if (aData[k + 1].xNorm > aData[k].xNorm) {
if (aData[k].yNorm < max - 1) {
for (kk = aData[k].yNorm + 1; kk < max + 1; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zAvg });
}
} else {
for (kk = aData[k].xNorm + 1; kk < aData[k + 1].xNorm; kk++) {
for (kkk = 0; kkk < max + 1; kkk++) {
aDataValid.push({ "x": kk, "y": kkk, "z": zAvg });
}
}
}
yPrev = -1;
} else {
yPrev = aData[k].yNorm;
}
xPrev = aData[k].xNorm;
} else {
for (kk = aData[k].yNorm + 1; kk < max + 1; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zMin });
}
}
}
})();
Using this two pieces of code i can use the software with my array of data from GIS database
Correted the text for markdown (excuse me)
You are really great!
Short and effective code. I like it.
I work as an IT manager and programmer in an Italy Government paying agency of agricultural aids.
I used this code for plotting the graph of a collection of 3d DEM (digital elevation model) points of a land region.
I am new to d3.js
It would be good a commented version of your code or a short text learning documentation for people like me and others on the internet.
Im my case i have to graph points from a sperimental collection and not from formula. So i added a small piece of code for inserting my points.
var oArray = [
{"x":0,"y":0,"z":1.2},
{"x":0,"y":1,"z":2.2},
{"x":0,"y":2,"z":0.5}
{"x":1,"y":0,"z":1.7},
{"x":1,"y":1,"z":3.2},
{"x":1,"y":2,"z":11.4}
];
function dataFromArray(objArray) {
var output = [], xPrev = 0, p = [];
for (var i = 0; i < objArray.length; i++) {
if (objArray[i].x != xPrev) {
if (p != []) output[xPrev] = p;
p = [];
xPrev = objArray[i].x;
}
p[objArray[i].y] = 1 * objArray[i].z;
}
return output;
}
......
var surfaces = [
{
name: '3D pacel GRAPH',
data: dataFromArray(oArray)
}
];I have seen that you need a completely filled rectangle of data so i made this code for filling all the extents of my poligon with points.
// -- filling al the DEM points bounding box
var aData = oArray; -- test array
// get max. x and y and min. z coords in the dataset
var k = 0, max = 0; zMin=10000, zMax=-10000; zAvg=0;
for (var k = 0; k < aData.length; k++) {
zAvg+=aData[k].zNorm;
if (aData[k].xNorm > max) max = aData[k].xNorm;
if (aData[k].yNorm > max) max = aData[k].yNorm;
if (aData[k].zNorm < zMin) zMin = aData[k].zNorm;
if (aData[k].zNorm > zMax) zMax = aData[k].zNorm;
}
zAvg=zAvg/aData.length;
var aDataValid = [];
(function () {
// adding all grid's missing points setting z widh average z
var k, kk, kkk, xPrev = -1, yPrev = -1, quit = 0;
for (k = 0; k < aData.length; k++) {
// -- terminate ie debugger setting quit=1 in the console
if (quit == 1) return;
// -- adding points with x between last inserted and actual
for (kk = xPrev + 1; kk < aData[k].xNorm; kk++) {
for (kkk = 0; kkk < max + 1; kkk++) {
aDataValid.push({ "x": kk, "y": kkk, "z": zAvg });
}
}
// -- adding points with actual x and y between last inserted and actual y
for (kk = yPrev + 1; kk < aData[k].yNorm; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zAvg });
}
// -- adding actual point from dataset
aDataValid.push({"x": aData[k].xNorm,"y": aData[k].yNorm, "z": aData[k].zNorm});
// -- inserimento dei punti con x compreso fra x attuale e x successivo oppure fra x attuale e max
// -- adding points with x between actual x and next x or between actual x and max
if (k < aData.length - 1) {
if (aData[k + 1].xNorm > aData[k].xNorm) {
if (aData[k].yNorm < max - 1) {
for (kk = aData[k].yNorm + 1; kk < max + 1; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zAvg });
}
} else {
for (kk = aData[k].xNorm + 1; kk < aData[k + 1].xNorm; kk++) {
for (kkk = 0; kkk < max + 1; kkk++) {
aDataValid.push({ "x": kk, "y": kkk, "z": zAvg });
}
}
}
yPrev = -1;
} else {
yPrev = aData[k].yNorm;
}
xPrev = aData[k].xNorm;
} else {
for (kk = aData[k].yNorm + 1; kk < max + 1; kk++) {
aDataValid.push({ "x": aData[k].xNorm, "y": kk, "z": zMin });
}
}
}
})();Using this two pieces of code i can use the software with my array of data from GIS database
This is really amazing and beautiful coding. SVG and Js are really becoming very powerful!
Man you can help me? i need a graphic like this, but the graphic can have a cartesian linea z, y, and z, show the value of the points?
Cool. I have the 3dsurface plot. Would like to add x, y and z axes to show coordinates, maybe can figure that out on my own, but if you already have something like that, would appreciate it.
Good stuff! thanks for sharing this. just don't know where to get the dataset 1,2,3? Will you be able to provide that? Thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great!
Do not have a license?
Here is Company in Korea.
We Need It and We just use freeware.
Please fast answer.