Skip to content

Instantly share code, notes, and snippets.

@supereggbert

supereggbert/index.html

Last active October 15, 2023 23:19
Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save supereggbert/aff58196188816576af0 to your computer and use it in GitHub Desktop.
Save supereggbert/aff58196188816576af0 to your computer and use it in GitHub Desktop.
Download ZIP
3D Surface Plot in D3.js
Raw
index.html
<!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>
Raw
surface3d.js
(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;
};
})();
@fred3m
Copy link

fred3m commented Feb 24, 2015

Great Gist! What is the license?

@hahnjo
Copy link

hahnjo commented Apr 7, 2015

Would also like to use the JavaScript part...

@gooddayss
Copy link

Great!
Do not have a license?
Here is Company in Korea.
We Need It and We just use freeware.
Please fast answer.

@zled
Copy link

zled commented Jul 17, 2015

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

@zled
Copy link

zled commented Jul 17, 2015

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

@lukeo357
Copy link

This is really amazing and beautiful coding. SVG and Js are really becoming very powerful!

@angelcasm
Copy link

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?

@sscotti
Copy link

sscotti commented Oct 18, 2016

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.

@ncheng87
Copy link

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