├── src ├── core.js ├── outro.js ├── const.js ├── intro.js ├── modules │ ├── scale │ │ ├── _scale.js │ │ └── rbg.js │ ├── color.js │ ├── seismic.js │ ├── log.js │ ├── canvas.js │ ├── log_line.js │ ├── scatterplot.js │ ├── horizon.js │ ├── log_vd.js │ ├── handle.js │ ├── wiggle.js │ └── plot.js └── init.js ├── .gitignore ├── README.md ├── .jshintrc ├── bower.json ├── package.json ├── LICENSE ├── Gruntfile.js └── dist ├── g3.min.js └── g3.js /src/core.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/outro.js: -------------------------------------------------------------------------------- 1 | } (window)); 2 | -------------------------------------------------------------------------------- /src/const.js: -------------------------------------------------------------------------------- 1 | var DEBUG = false; 2 | -------------------------------------------------------------------------------- /src/intro.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | ;(function (window) { 3 | -------------------------------------------------------------------------------- /src/modules/scale/_scale.js: -------------------------------------------------------------------------------- 1 | 2 | g3.scale = {}; 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | .DS_Store 3 | node_modules 4 | bower_components 5 | -------------------------------------------------------------------------------- /src/init.js: -------------------------------------------------------------------------------- 1 | function defineg3() { 2 | var g3 = {}; 3 | return g3; 4 | } 5 | if(typeof(g3) === 'undefined') { 6 | window.g3 = defineg3(); 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # g3.js 2 | 3 | Coming soon... A geoscience plotting library, based on d3.js. 4 | 5 | Demo app: [Visualizr](https://github.com/agile-geoscience/visualizr) 6 | 7 | Built by 8 | 9 | * Justin Heisler 10 | * Ben Bougher 11 | 12 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "define": true, 4 | "DEBUG": true 5 | }, 6 | 7 | "asi": false, 8 | "boss": true, 9 | "browser": true, 10 | "curly": true, 11 | "eqeqeq": true, 12 | "eqnull": true, 13 | "immed": true, 14 | "lastsemic": true, 15 | "latedef": true, 16 | "laxbreak": true, 17 | "laxcomma": true, 18 | "newcap": true, 19 | "noarg": true, 20 | "nomen": false, 21 | "plusplus": false, 22 | "sub": true, 23 | "undef": true, 24 | "white": false 25 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "g3", 3 | "version": "0.0.1", 4 | "homepage": "https://github.com/agile-geoscience/g3", 5 | "description": "Geophysics D3 Library", 6 | "main": "./dist/library.min.js", 7 | "authors": [ 8 | "justinkheisler" 9 | ], 10 | "license": "BSD", 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "d3": "~3.5.6", 20 | "jquery": "~2.1.4" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/modules/color.js: -------------------------------------------------------------------------------- 1 | 2 | g3.colorScale = { 3 | red_white_black: d3.scale.linear() 4 | .domain([0, 1]) 5 | .range([d3.rgb(255, 0, 0), d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)]), 6 | red_white_blue: d3.scale.linear() 7 | .domain([0, 1]) 8 | .range([d3.rgb(255, 0, 0), d3.rgb(255, 255, 255), d3.rgb(0, 0, 255)]), 9 | greyscale: d3.scale.linear() 10 | .domain([0, 1]) 11 | .range([d3.rgb(0, 0, 0), d3.rgb(127.5, 127.5, 127.5), d3.rgb(255, 255, 255)]), 12 | seismic: d3.scale.linear() 13 | .domain([0, 1]) 14 | .range([d3.rgb(0, 0, 76.5), d3.rgb(253, 253, 1.0), d3.rgb(127.5, 0, 0)]) 15 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "g3", 3 | "version": "0.0.1", 4 | "description": "Geophysics D3 Library", 5 | "main": "Gruntfile.js", 6 | "directories": { 7 | "doc": "doc", 8 | "test": "test" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/agile-geoscience/g3.git" 13 | }, 14 | "devDependencies": { 15 | "grunt": "~0.4.0", 16 | "grunt-contrib-jshint": "~0.1.1", 17 | "grunt-contrib-qunit": "~0.1.1", 18 | "grunt-contrib-concat": "~0.1.3", 19 | "grunt-contrib-uglify": "~0.1.2" 20 | }, 21 | "author": "justinkheisler", 22 | "license": "BSD", 23 | "bugs": { 24 | "url": "https://github.com/agile-geoscience/g3/issues" 25 | }, 26 | "homepage": "https://github.com/agile-geoscience/g3#readme" 27 | } 28 | -------------------------------------------------------------------------------- /src/modules/scale/rbg.js: -------------------------------------------------------------------------------- 1 | 2 | g3.scale.rgb = function(){ 3 | return new rgb(); 4 | }; 5 | 6 | var rgb = function(){ 7 | var _domain = [[0, 1], [0, 1], [0, 1]], 8 | _range = [[0, 255], [0, 255], [0, 255]]; 9 | 10 | function rgbScale(r, g, b){ 11 | var rScale = d3.scale.linear().domain(_domain[0]).range(_range[0]); 12 | var gScale = d3.scale.linear().domain(_domain[1]).range(_range[1]); 13 | var bScale = d3.scale.linear().domain(_domain[2]).range(_range[2]); 14 | return d3.rgb(rScale(r), gScale(g), bScale(b)); 15 | } 16 | 17 | rgbScale.domain = function(domain){ 18 | if(domain === undefined){ return _domain; } 19 | _domain = domain; 20 | return rgbScale; 21 | }; 22 | 23 | rgbScale.range = function(range){ 24 | if(range === undefined){ return _range; } 25 | _range = range; 26 | return rgbScale; 27 | } 28 | return rgbScale; 29 | }; 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Agile Geoscience 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 7 | 8 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 9 | 10 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 11 | 12 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 13 | 14 | -------------------------------------------------------------------------------- /src/modules/seismic.js: -------------------------------------------------------------------------------- 1 | 2 | // Attach seismic creation function to g3 3 | g3.seismic = function(plot, data){ 4 | return new seismic(plot, data); 5 | }; 6 | 7 | // Constructor 8 | // Only set variables that are set by items passed in, otherwise set using prototype 9 | var seismic = function seismic(plot, data){ 10 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | this._data = data; 13 | this._plot = plot; 14 | return this; 15 | }; 16 | 17 | // Set remaining variables 18 | seismic.prototype._max = 1; 19 | seismic.prototype._gain = 1; 20 | seismic.prototype._duration = 5; 21 | 22 | // Setters 23 | seismic.prototype.nDColorMap = function(nDColorMap){ 24 | if(nDColorMap === undefined){ return this._nDColorMap; } 25 | this._nDColorMap = nDColorMap; 26 | return this; 27 | }; 28 | 29 | seismic.prototype.duration = function(duration){ 30 | if(duration === undefined){ return this._duration; } 31 | this._duration = duration; 32 | return this; 33 | }; 34 | 35 | seismic.prototype.gain = function(gain){ 36 | if(gain === undefined){ return this._gain; } 37 | this._gain = gain; 38 | return this; 39 | }; 40 | 41 | seismic.prototype.max = function(max){ 42 | if(max === undefined){ return this._max; } 43 | this._max = max; 44 | return this; 45 | }; 46 | 47 | // Draw method 48 | seismic.prototype.draw = function(){ 49 | this._canvas = g3.canvas(this._plot, this._data) 50 | .gain(this._gain) 51 | .nDColorMap(this._nDColorMap) 52 | .draw(); 53 | return this; 54 | }; 55 | 56 | seismic.prototype.reDraw = function(data){ 57 | this._canvas.gain(this._gain) 58 | .nDColorMap(this._nDColorMap) 59 | .reDraw(data); 60 | }; -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*global module:false*/ 2 | module.exports = function(grunt) { 3 | 4 | // Helper methods 5 | function sub (str) { 6 | return str.replace(/%s/g, LIBRARY_NAME); 7 | } 8 | 9 | function wrapModules (head, tail) { 10 | return head.concat(MODULE_LIST).concat(tail); 11 | } 12 | 13 | var LIBRARY_NAME = 'g3'; 14 | 15 | var MODULE_LIST = [ 16 | sub('src/modules/**/*.js') 17 | ]; 18 | 19 | var DIST_HEAD_LIST = [ 20 | sub('src/intro.js'), 21 | sub('src/init.js'), 22 | sub('src/const.js'), 23 | sub('src/core.js') 24 | ]; 25 | 26 | // This is the same as DIST_HEAD_LIST, just without *.const.js (which is just 27 | // there UglifyJS conditional compilation). 28 | var DEV_HEAD_LIST = [ 29 | sub('src/intro.js'), 30 | sub('src/init.js'), 31 | sub('src/core.js') 32 | ]; 33 | 34 | var TAIL_LIST = [ 35 | sub('src/outro.js') 36 | ]; 37 | 38 | // Gets inserted at the top of the generated files in dist/. 39 | var BANNER = [ 40 | '/*! <%= pkg.name %> - v<%= pkg.version %> - ', 41 | '<%= grunt.template.today("yyyy-mm-dd") %> - <%= pkg.author %> */\n' 42 | ].join(''); 43 | 44 | grunt.loadNpmTasks('grunt-contrib-jshint'); 45 | grunt.loadNpmTasks('grunt-contrib-qunit'); 46 | grunt.loadNpmTasks('grunt-contrib-concat'); 47 | grunt.loadNpmTasks('grunt-contrib-uglify'); 48 | 49 | grunt.initConfig({ 50 | pkg: grunt.file.readJSON('package.json'), 51 | concat: { 52 | dist: { 53 | options: { 54 | banner: BANNER 55 | }, 56 | src: wrapModules(DIST_HEAD_LIST, TAIL_LIST), 57 | dest: sub('dist/%s.js') 58 | }, 59 | dev: { 60 | options: { 61 | banner: BANNER 62 | }, 63 | src: wrapModules(DEV_HEAD_LIST, TAIL_LIST), 64 | dest: sub('dist/%s.js') 65 | } 66 | }, 67 | uglify: { 68 | dist: { 69 | files: (function () { 70 | // Using an IIFE so that the destination property name can be 71 | // created dynamically with sub(). 72 | var obj = {}; 73 | obj[sub('dist/%s.min.js')] = [sub('dist/%s.js')]; 74 | return obj; 75 | } ()) 76 | }, 77 | options: { 78 | banner: BANNER 79 | } 80 | }, 81 | qunit: { 82 | files: ['test/qunit*.html'] 83 | }, 84 | jshint: { 85 | all_files: [ 86 | 'grunt.js', 87 | sub('src/%s.!(intro|outro|const)*.js') 88 | ], 89 | options: { 90 | jshintrc: '.jshintrc' 91 | } 92 | } 93 | }); 94 | 95 | grunt.registerTask('default', [ 96 | 'jshint', 97 | 'build', 98 | 'qunit' 99 | ]); 100 | grunt.registerTask('build', [ 101 | 'concat:dist', 102 | 'uglify:dist', 103 | 'concat:dev' 104 | ]); 105 | }; -------------------------------------------------------------------------------- /src/modules/log.js: -------------------------------------------------------------------------------- 1 | // Attach canvas creation function to g3 2 | g3.log = function(plot, data){ 3 | return new log(plot, data); 4 | }; 5 | 6 | // Constructor 7 | // Only set variables that are set by items passed in, otherwise set using prototype 8 | var log = function log(plot, data){ 9 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 10 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 11 | this._data = data; 12 | this._plot = plot; 13 | this._xMin = 0; 14 | this._yMin = 0; 15 | return this; 16 | }; 17 | 18 | // Set remaining variables 19 | log.prototype._xInt = 1; 20 | log.prototype._yInt = 1; 21 | log.prototype._color = "blue"; 22 | log.prototype._duration = 5; 23 | log.prototype._strokeWidth = 0.25; 24 | 25 | // Setters 26 | log.prototype.duration = function(duration){ 27 | if(duration === undefined){ return this._duration; } 28 | this._duration = duration; 29 | return this; 30 | }; 31 | 32 | log.prototype.xTrans = function(xMin){ 33 | if(xMin === undefined){ return this._xMin; } 34 | this._xMin = xMin; 35 | return this; 36 | }; 37 | 38 | log.prototype.xMult = function(xInt){ 39 | if(xInt === undefined){ return this._xInt; } 40 | this._xInt = xInt; 41 | return this; 42 | }; 43 | 44 | log.prototype.yTrans = function(yMin){ 45 | if(yMin === undefined){ return this._yMin; } 46 | this._yMin = yMin; 47 | return this; 48 | }; 49 | 50 | log.prototype.yMult = function(yInt){ 51 | if(yInt === undefined){ return this._yInt; } 52 | this._yInt = yInt; 53 | return this; 54 | }; 55 | 56 | log.prototype.color = function(color){ 57 | if(color === undefined){ return this._color; } 58 | this._color = color; 59 | return this; 60 | }; 61 | 62 | log.prototype.strokeWidth = function(strokeWidth){ 63 | if(strokeWidth === undefined){ return this._strokeWidth; } 64 | this._strokeWidth = strokeWidth; 65 | return this; 66 | }; 67 | 68 | log.prototype.draw = function(){ 69 | var lineFunc = this.lineFunc(); 70 | this._svg = this._plot._svg.append('path') 71 | .datum(this._data) 72 | .attr('d', lineFunc) 73 | .attr('stroke', this._color) 74 | .attr('stroke-width', this._strokeWidth) 75 | .attr('fill', 'none'); 76 | return this; 77 | }; 78 | 79 | log.prototype.reDraw = function(data){ 80 | var lineFunc = this.lineFunc(); 81 | this._svg.transition() 82 | .duration(this._duration) 83 | .attr('d', lineFunc(data)) 84 | .ease('linear'); 85 | return this; 86 | }; 87 | 88 | log.prototype.lineFunc = function(){ 89 | var plot = this._plot, 90 | yInt = this._yInt, 91 | yMin = this._yMin, 92 | xInt = this._xInt, 93 | xMin = this._xMin, 94 | interpolate = this._interpolate; 95 | 96 | return d3.svg.line() 97 | .x(function (d) { 98 | return plot._xScale(d * xInt + xMin); 99 | }) 100 | .y(function (d, i){ 101 | return plot._yScale(i * yInt + yMin); 102 | }) 103 | .interpolate(interpolate); 104 | }; -------------------------------------------------------------------------------- /src/modules/canvas.js: -------------------------------------------------------------------------------- 1 | 2 | // Attach canvas creation function to g3 3 | g3.canvas = function(plot, data){ 4 | return new canvas(plot, data); 5 | } 6 | 7 | // Constructor 8 | // Only set variables that are set by items passed in, otherwise set using prototype 9 | var canvas = function canvas(plot, data){ 10 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | this._data = data; 13 | this._plot = plot; 14 | var padding = $(this._plot._elem).css('padding-left'); 15 | padding = Number(padding.replace('px', '')); 16 | this._canvas = d3.select(this._plot._elem) 17 | .append('canvas') 18 | .attr('width', this._data[0].length) 19 | .attr('height', this._data[0][0].length) 20 | .style('width', this._plot._width + 'px') 21 | .style('height', this._plot._height + 'px') 22 | .style('opacity', this._opacity) 23 | .style('top', this._plot._margin.top + 'px') 24 | .style('left', this._plot._margin.left + padding + 'px'); 25 | return this; 26 | }; 27 | 28 | canvas.prototype._gain = 1; 29 | 30 | canvas.prototype.opacity = function(opacity){ 31 | if(opacity === undefined){ return this._opacity; } 32 | this._opacity = opacity; 33 | this._canvas.style('opacity', opacity); 34 | return this; 35 | }; 36 | 37 | canvas.prototype.gain = function(gain){ 38 | if(gain === undefined){ return this._gain; } 39 | this._gain = gain; 40 | return this; 41 | }; 42 | 43 | canvas.prototype.nDColorMap = function(nDColorMap){ 44 | if(nDColorMap === undefined){ return this._nDColorMap; } 45 | this._nDColorMap = nDColorMap; 46 | return this; 47 | }; 48 | 49 | canvas.prototype.draw = function(){ 50 | this._context = this._canvas.node().getContext('2d'); 51 | this.drawImage(); 52 | return this; 53 | }; 54 | 55 | canvas.prototype.reDraw = function(data){ 56 | this._context.clearRect(0, 0, this._data[0].length, this._data[0][0].length); 57 | this._canvas 58 | .attr('width', data[0].length) 59 | .attr('height', data[0][0].length); 60 | this._data = data; 61 | this.drawImage(); 62 | return this; 63 | }; 64 | 65 | canvas.prototype.drawImage = function(){ 66 | var x = this._data[0].length, 67 | y = this._data[0][0].length; 68 | this._image = this._context.createImageData(x,y); 69 | 70 | if(this._data.length != this._nDColorMap.length){ 71 | alert("An equal number of data attributes and color bars is required"); 72 | return; 73 | } 74 | 75 | var r, g, b; 76 | for(var i = 0, p = -1; i < y; ++ i){ 77 | for(var j = 0; j < x; ++j){ 78 | r = 0, g = 0, b = 0; 79 | for(var k = 0; k < this._data.length; k++){ 80 | var d = d3.rgb(this._nDColorMap[k](this._data[k][j][i])); 81 | r = r + (d.r / 255); 82 | g = g + (d.g / 255); 83 | b = b + (d.b / 255); 84 | } 85 | this._image.data[++p] = r * 255; 86 | this._image.data[++p] = g * 255; 87 | this._image.data[++p] = b * 255; 88 | this._image.data[++p] = 255; 89 | } 90 | } 91 | this._context.putImageData(this._image, 0, 0); 92 | 93 | return this; 94 | }; -------------------------------------------------------------------------------- /src/modules/log_line.js: -------------------------------------------------------------------------------- 1 | 2 | // // Attach line creation function to g3.log 3 | // g3.log.line = function(plot, data){ 4 | // return new line(plot, data); 5 | // }; 6 | 7 | // // Constructor 8 | // // Only set variables that are set by items passed in, otherwise set using prototype 9 | // var line = function line(plot, data){ 10 | // if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | // if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | // this._data = data; 13 | // this._plot = plot; 14 | // this._xTrans = 0; 15 | // this._yTrans = 0; 16 | // return this; 17 | // }; 18 | 19 | // // Set remaining variables 20 | // line.prototype._xTrans = 1; 21 | // line.prototype._yTrans = 1; 22 | // line.prototype._color = "blue"; 23 | // line.prototype._duration = 5; 24 | // line.prototype._strokeWidth = 0.25; 25 | 26 | // // Setters 27 | // line.prototype.duration = function(duration){ 28 | // if(duration === undefined){ return this._duration; } 29 | // this._duration = duration; 30 | // return this; 31 | // }; 32 | 33 | // line.prototype.xTrans = function(xTrans){ 34 | // if(xTrans === undefined){ return this._xTrans; } 35 | // this._xTrans = xTrans; 36 | // return this; 37 | // }; 38 | 39 | // line.prototype.xMult = function(xMult){ 40 | // if(xMult === undefined){ return this._xMult; } 41 | // this._xMult = xMult; 42 | // return this; 43 | // }; 44 | 45 | // line.prototype.yTrans = function(yTrans){ 46 | // if(yTrans === undefined){ return this._yTrans; } 47 | // this._yTrans = yTrans; 48 | // return this; 49 | // }; 50 | 51 | // line.prototype.yMult = function(yMult){ 52 | // if(yMult === undefined){ return this._yMult; } 53 | // this._yMult = yMult; 54 | // return this; 55 | // }; 56 | 57 | // line.prototype.color = function(color){ 58 | // if(color === undefined){ return this._color; } 59 | // this._color = color; 60 | // return this; 61 | // }; 62 | 63 | // line.prototype.strokeWidth = function(strokeWidth){ 64 | // if(strokeWidth === undefined){ return this._strokeWidth; } 65 | // this._strokeWidth = strokeWidth; 66 | // return this; 67 | // }; 68 | 69 | // line.prototype.draw = function(){ 70 | // var lineFunc = this.lineFunc(); 71 | // this._svg = this._plot._svg.append('path') 72 | // .datum(this._data) 73 | // .attr('d', lineFunc) 74 | // .attr('stroke', this._color) 75 | // .attr('stroke-width', this._strokeWidth) 76 | // .attr('fill', 'none'); 77 | // return this; 78 | // }; 79 | 80 | // line.prototype.reDraw = function(data){ 81 | // var lineFunc = this.lineFunc(); 82 | // this._svg.transition() 83 | // .duration(this._duration) 84 | // .attr('d', lineFunc(data)) 85 | // .ease('linear'); 86 | // return this; 87 | // }; 88 | 89 | // line.prototype.lineFunc = function(){ 90 | // var plot = this._plot, 91 | // yMult = this._yMult, 92 | // yTrans = this._yTrans, 93 | // xMult = this._xMult, 94 | // xTrans = this._xTrans, 95 | // interpolate = this._interpolate; 96 | 97 | // return d3.svg.line() 98 | // .x(function (d) { 99 | // return plot._xScale(d * xMult + xTrans); 100 | // }) 101 | // .y(function (d, i){ 102 | // return plot._yScale(i * yMult + yTrans); 103 | // }) 104 | // .interpolate(interpolate); 105 | // }; -------------------------------------------------------------------------------- /src/modules/scatterplot.js: -------------------------------------------------------------------------------- 1 | 2 | // Attach canvas creation function to g3 3 | g3.scatter = function(plot, data){ 4 | return new scatter(plot, data); 5 | }; 6 | 7 | // Constructor 8 | // Only set variables that are set by items passed in, otherwise set using prototype 9 | var scatter = function scatter(plot, data){ 10 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | this._data = data; 13 | this._plot = plot; 14 | 15 | this._colorScale = d3.scale.linear() 16 | .domain([d3.min(this._data), d3.max(this._data)]) 17 | .range([d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255)]); 18 | 19 | this._radiusScale = d3.scale.linear() 20 | .domain([d3.min(this._data), d3.max(this._data)]) 21 | .range([1, 5]); 22 | return this; 23 | }; 24 | 25 | // Set remaining variables 26 | scatter.prototype._xMult = 1; 27 | scatter.prototype._yMult = 1; 28 | scatter.prototype._xTrans = 0; 29 | scatter.prototype._yTrans = 0; 30 | 31 | scatter.prototype.xMult = function(xMult){ 32 | if(xMult === undefined){ return this._xMult; } 33 | this._xMult = xMult; 34 | return this; 35 | }; 36 | 37 | scatter.prototype.yMult = function(yMult){ 38 | if(yMult === undefined){ return this._yMult; } 39 | this._yMult = yMult; 40 | return this; 41 | }; 42 | 43 | scatter.prototype.xTrans = function(xTrans){ 44 | if(xTrans === undefined){ return this._xTrans; } 45 | this._xTrans = xTrans; 46 | return this; 47 | }; 48 | 49 | scatter.prototype.yTrans = function(yTrans){ 50 | if(yTrans === undefined){ return this._yTrans; } 51 | this._yTrans = yTrans; 52 | return this; 53 | }; 54 | 55 | scatter.prototype.colorScale = function(colorScale){ 56 | if(colorScale === undefined){ return this._colorScale; } 57 | this._colorScale = colorScale; 58 | return this; 59 | }; 60 | 61 | scatter.prototype.radiusScale = function(radiusScale){ 62 | if(radiusScale === undefined){ return this._radiusScale ; } 63 | this._radiusScale = radiusScale; 64 | return this; 65 | }; 66 | 67 | scatter.prototype.draw = function(){ 68 | var radius = this._radiusScale, 69 | xMult = this._xMult, 70 | yMult = this._yMult, 71 | xTrans = this._xTrans, 72 | yTrans = this._yTrans, 73 | colorScale = this._colorScale, 74 | xScale = this._plot._xScale, 75 | yScale = this._plot._yScale; 76 | 77 | this._plot._svg.selectAll('.scatter') 78 | .data(this._data) 79 | .enter().append("circle") 80 | .attr('class', 'scatter') 81 | .attr('r', function(d) { return radius(d); }) 82 | .attr('cx', function(d) { return xScale(d * xMult + xTrans); }) 83 | .attr('cy', function(d, i) { return yScale(i * yMult + yTrans); }) 84 | .style('stroke', 'black') 85 | .style('fill', function(d) { return colorScale(d); }); 86 | return this; 87 | }; 88 | 89 | scatter.prototype.reDraw = function(data){ 90 | var radius = this._radiusScale, 91 | xMult = this._xMult, 92 | yMult = this._yMult, 93 | xTrans = this._xTrans, 94 | yTrans = this._yTrans, 95 | colorScale = this._colorScale, 96 | xScale = this._plot._xScale, 97 | yScale = this._plot._yScale; 98 | 99 | this._data = data; 100 | this._plot._svg.selectAll('.scatter') 101 | .data(data) 102 | .transition() 103 | .duration(500) 104 | .attr('r', function(d) { return radius(d)}) 105 | .attr('cx', function(d) { return xScale(d * xMult + xTrans); }) 106 | .attr('cy', function(d, i) { return yScale(i * yMult + yTrans); }) 107 | .style('fill', function(d) { return colorScale(d); }); 108 | return this; 109 | }; -------------------------------------------------------------------------------- /src/modules/horizon.js: -------------------------------------------------------------------------------- 1 | // Attach horizon creation function to g3 2 | g3.horizon = function(plot, data){ 3 | return new horizon(plot, data); 4 | }; 5 | 6 | // Constructor 7 | // Only set variables that are set by items passed in, otherwise set using prototype 8 | var horizon = function horizon(plot, data){ 9 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 10 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 11 | this._data = data; 12 | this._plot = plot; 13 | this._xMin = plot._xDomain[0]; 14 | this._yMin = plot._yDomain[0]; 15 | return this; 16 | }; 17 | 18 | // Set remaining variables 19 | horizon.prototype._xInt = 1; 20 | horizon.prototype._yInt = 1; 21 | horizon.prototype._duration = 5; 22 | horizon.prototype._gain = 1; 23 | horizon.prototype._interpolate = 'basis'; 24 | horizon.prototype._color = 'green'; 25 | horizon.prototype._strokeWidth = 1.5; 26 | horizon.prototype._opacity = 1; 27 | 28 | // Horizon Setting functions 29 | horizon.prototype.interpolate = function(interpolate){ 30 | if(interpolate === undefined){ return this._interpolate; } 31 | this._interpolate = interpolate; 32 | return this; 33 | }; 34 | 35 | horizon.prototype.xMin = function(xMin){ 36 | if(xMin === undefined){ return this._xMin; } 37 | this._xMin = xMin; 38 | return this; 39 | }; 40 | 41 | horizon.prototype.yMin = function(yMin){ 42 | if(yMin === undefined){ return this._yMin; } 43 | this._yMin = yMin; 44 | return this; 45 | }; 46 | 47 | horizon.prototype.xInt = function(xInt){ 48 | if(xInt === undefined){ return this._xInt; } 49 | this._xInt = xInt; 50 | return this; 51 | }; 52 | 53 | horizon.prototype.yInt = function(yInt){ 54 | if(yInt === undefined){ return this._yInt; } 55 | this._yInt = yInt; 56 | return this; 57 | }; 58 | 59 | horizon.prototype.duration = function(duration){ 60 | if(duration === undefined){ return this._duration; } 61 | this._duration = duration; 62 | return this; 63 | }; 64 | 65 | horizon.prototype.gain = function(gain){ 66 | if(gain === undefined){ return this._gain; } 67 | this._gain = gain; 68 | return this; 69 | }; 70 | 71 | horizon.prototype.color = function(color){ 72 | if(color === undefined){ return this._color; } 73 | this._color = color; 74 | return this; 75 | }; 76 | 77 | horizon.prototype.strokeWidth = function(strokeWidth){ 78 | if(strokeWidth === undefined){ return this._strokeWidth; } 79 | this._strokeWidth = strokeWidth; 80 | return this; 81 | }; 82 | 83 | horizon.prototype.opacity = function(opacity){ 84 | if(opacity === undefined){ return this._opacity; } 85 | this._opacity = opacity; 86 | return this; 87 | }; 88 | 89 | horizon.prototype.cursor = function(cursor){ 90 | if(cursor === undefined){ return this_cursor; } 91 | this._cursor = cursor; 92 | return this; 93 | }; 94 | 95 | horizon.prototype.lineFunc = function(){ 96 | var plot = this._plot, 97 | xMin = this._xMin, 98 | gain = this._gain, 99 | interpolate = this._interpolate; 100 | 101 | var lineFunc = d3.svg.line() 102 | .x(function (d, i){ 103 | return plot._xScale(i + xMin); 104 | }) 105 | .y( function (d) { 106 | return plot._yScale(d * gain); 107 | }) 108 | .interpolate(interpolate); 109 | 110 | return lineFunc; 111 | }; 112 | 113 | // Horizon Drawing functions 114 | horizon.prototype.draw = function() { 115 | var lineFunc = this.lineFunc(); 116 | this._svg = this._plot._svg.append('path') 117 | .attr('d', lineFunc(this._data)) 118 | .attr('stroke', this._color) 119 | .attr('stroke-width', this._strokeWidth) 120 | .style('opacity', this._opacity) 121 | .attr('fill', 'none'); 122 | 123 | if(this._cursor){ 124 | this._svg.style('cursor', this._cursor); 125 | } 126 | 127 | return this; 128 | }; 129 | 130 | horizon.prototype.reDraw = function(data){ 131 | var lineFunc = this.lineFunc(); 132 | 133 | this._svg.transition() 134 | .duration(this._duration) 135 | .attr('d', lineFunc(data)); 136 | return this; 137 | }; -------------------------------------------------------------------------------- /src/modules/log_vd.js: -------------------------------------------------------------------------------- 1 | 2 | // // Attach vd creation function to g3.log 3 | // g3.log.vd = function(plot, data, data1){ 4 | // return new vd(plot, data); 5 | // }; 6 | 7 | // // Constructor 8 | // // Only set variables that are set by items passed in, otherwise set using prototype 9 | // var vd = function vd(plot, data, data1){ 10 | // if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | // if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | // this._data = data; 13 | // if(!data1){ this._data1 = data; } 14 | // this._plot = plot; 15 | // this._xTrans = 0; 16 | // this._yTrans = 0; 17 | // return this; 18 | // }; 19 | 20 | // // Set remaining variables 21 | // vd.prototype._xMult = 1; 22 | // vd.prototype._yMult = 1; 23 | // vd.prototype._duration = 5; 24 | // vd.prototype._strokeWidth = 0.25; 25 | // vd.prototype._barHeight = this._plot._height / (this._data1.length - 2); 26 | // vd.prototype._max = d3.max(this._data1); 27 | 28 | // // Default Color Scale 29 | // if(vd._colorScale === undefined){ 30 | // vd.prototype._colorScale = function(){ 31 | // return d3.scale.linear() 32 | // .domain([-this._max, 0, this._max]) 33 | // .range(['#FF0000', '#FFFFFF', '#0000FF']); 34 | // }; 35 | // } 36 | 37 | // // Setters 38 | // vd.prototype.duration = function(duration){ 39 | // if(duration === undefined){ return this._duration; } 40 | // this._duration = duration; 41 | // return this; 42 | // }; 43 | 44 | // vd.prototype.xTrans = function(xTrans){ 45 | // if(xTrans === undefined){ return this._xTrans; } 46 | // this._xTrans = xTrans; 47 | // return this; 48 | // }; 49 | 50 | // vd.prototype.xMult = function(xMult){ 51 | // if(xMult === undefined){ return this._xMult; } 52 | // this._xMult = xMult; 53 | // return this; 54 | // }; 55 | 56 | // vd.prototype.yTrans = function(yTrans){ 57 | // if(yTrans === undefined){ return this._yTrans; } 58 | // this._yTrans = yTrans; 59 | // return this; 60 | // }; 61 | 62 | // vd.prototype.yMult = function(yMult){ 63 | // if(yMult === undefined){ return this._yMult; } 64 | // this._yMult = yMult; 65 | // return this; 66 | // }; 67 | 68 | // vd.prototype.colorScale = function(color){ 69 | // if(color === undefined){ return this._color; } 70 | // this._color = color; 71 | // return this; 72 | // }; 73 | 74 | // vd.prototype.strokeWidth = function(strokeWidth){ 75 | // if(strokeWidth === undefined){ return this._strokeWidth; } 76 | // this._strokeWidth = strokeWidth; 77 | // return this; 78 | // }; 79 | 80 | // vd.prototype.barHeight = function(barHeight){ 81 | // if(barHeight === undefined){ return this._barHeight; } 82 | // this._barHeight = barHeight; 83 | // return this; 84 | // }; 85 | 86 | // vd.prototype.draw = function(){ 87 | // var barHeight = 600 / (posdata.length - 2); 88 | // var bar = logPlot._svg.selectAll("rect") 89 | // .data(posdata.slice(0, posdata.length - 1)) 90 | // .enter().append("rect") 91 | // .attr("transform", function(d, i) { return "translate(0," + (logPlot._yScale(i)) + ")"; }) 92 | // .attr("width", function(d) { return logPlot._width; }) 93 | // .attr("height", barHeight) 94 | // .attr('fill', function(d){ return colorScale(d);}); 95 | 96 | // var area = d3.svg.area() 97 | // .x(function(d) { return logPlot._xScale(d); }) 98 | // .x1(logPlot._width) 99 | // .y1(logPlot._height) 100 | // .y(function(d, i) { return logPlot._yScale(i); }); 101 | 102 | // logPlot._svg.append("path") 103 | // .datum(arr2) 104 | // .attr('transform', function(d, i) { return "translate(0," + logPlot._yScale(i) + ")";}) 105 | // .attr("class", "area") 106 | // .attr("stroke", "black") 107 | // .attr("stroke-width", 0.5) 108 | // .attr("fill", 'white') 109 | // .attr("d", area); 110 | // return this; 111 | // }; 112 | 113 | // vd.prototype.reDraw = function(data){ 114 | // return this; 115 | // }; -------------------------------------------------------------------------------- /src/modules/handle.js: -------------------------------------------------------------------------------- 1 | 2 | g3.handle = {}; 3 | 4 | g3.handle.line = function(plot, x, y, x2, y2){ 5 | return new line(plot, x, y, x2, y2); 6 | }; 7 | 8 | // Constructor 9 | // Only set variables that are set by items passed in, otherwise set using prototype 10 | var line = function line(plot, x, y, x2, y2){ 11 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | this._plot = plot; 13 | this._x = x; 14 | this._y = y; 15 | 16 | if(x2 === undefined){ 17 | this._x2 = x; 18 | } else { 19 | this._x2 = x2; 20 | } 21 | 22 | if(y2 === undefined){ 23 | this._y2 = y; 24 | } else { 25 | this._y2 = y2; 26 | } 27 | return this; 28 | }; 29 | 30 | line.prototype._strokeWidth = 30; 31 | line.prototype._stroke = "black"; 32 | line.prototype._cursor = "pointer"; 33 | line.prototype._opacity = 0; 34 | line.prototype._duration = 5; 35 | 36 | line.prototype.class = function(cl){ 37 | if(cl === undefined){ return this._class; } 38 | this._class = cl; 39 | return this; 40 | }; 41 | 42 | line.prototype.strokeWidth = function(strokeWidth){ 43 | if(strokeWidth === undefined){ return this._strokeWidth; } 44 | this._strokeWidth = strokeWidth; 45 | return this; 46 | }; 47 | 48 | line.prototype.stroke = function(color){ 49 | if(color === undefined){ return this._color; } 50 | this._color = color; 51 | return this; 52 | }; 53 | 54 | line.prototype.cursor = function(cursor){ 55 | if(cursor === undefined){ return this._cursor; } 56 | this._cursor = cursor; 57 | return this; 58 | }; 59 | 60 | line.prototype.opacity = function(opacity){ 61 | if(opacity === undefined){ return this._opacity; } 62 | this._opacity = opacity; 63 | return this; 64 | }; 65 | 66 | line.prototype.line = function(line){ 67 | if(line === undefined){ return this._line; } 68 | this._line = line; 69 | return this; 70 | }; 71 | 72 | line.prototype.draw = function(){ 73 | this._line = this._plot._svg.append('line') 74 | .attr('class', this._class) 75 | .style('stroke-width', this._strokeWidth) 76 | .style('stroke', this._stroke) 77 | .style('cursor', this._cursor) 78 | .style('opacity', this._opacity) 79 | .attr('x1', this._plot._xScale(this._x)) 80 | .attr('y1', this._plot._yScale(this._y)) 81 | .attr('x2', this._plot._xScale(this._x2)) 82 | .attr('y2', this._plot._yScale(this._y2)); 83 | return this; 84 | }; 85 | 86 | line.prototype.reDraw = function(x, y, x2, y2){ 87 | this._line 88 | .transition() 89 | .duration(this._duration) 90 | .attr('x1', this._plot._xScale(x)) 91 | .attr('y1', this._plot._yScale(y)) 92 | .attr('x2', this._plot._xScale(x2)) 93 | .attr('y2', this._plot._yScale(y2)); 94 | return this; 95 | }; 96 | 97 | 98 | 99 | 100 | // handle.circle code 101 | // var drag = d3.behavior.drag() // capture mouse drag event 102 | // .on('drag', oGCirRedraw); 103 | 104 | // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)]; 105 | // $scope.oGCir = $scope.oGPlot.svg.append('circle') 106 | // .attr("class", "ogcir") 107 | // .attr("r", 5) 108 | // .attr("cx", position[0]) 109 | // .attr("cy", position[1]) 110 | // .style("opacity", 0.5) 111 | // .call(drag); 112 | 113 | // $(".ogcir").mouseup(function(e){ 114 | // e.preventDefault(); 115 | // $scope.update_data(); 116 | // }); 117 | // } else { 118 | // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)]; 119 | // $scope.oGCir 120 | // .attr("cx", position[0]) 121 | // .attr("cy", position[1]); 122 | 123 | 124 | // function oGCirRedraw(){ 125 | // var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x)); 126 | // var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y)); 127 | 128 | // // Check to make sure we are within the boundaries 129 | // if(x < 0){ 130 | // x = 0; 131 | // } else if(x > $scope.data.offset_gather.length - 1) { 132 | // x = $scope.data.offset_gather.length - 1; 133 | // } 134 | 135 | // if(y < 0){ 136 | // y = 0; 137 | // } else if(y > $scope.data.seismic[0].length - 1){ 138 | // y = $scope.data.seismic[0].length - 1; 139 | // } 140 | 141 | // $scope.offsetStr = x.toString(); 142 | // $scope.twtStr = y.toString(); 143 | // $scope.changeOffsetStr(); 144 | // $scope.changeTWTStr(); 145 | // $scope.wGCir 146 | // .attr("cy", $scope.wGPlot.yScale($scope.twt)); 147 | // $scope.vDCir 148 | // .attr("cy", $scope.vDPlot.yScale($scope.twt)); 149 | // $scope.oGCir 150 | // .attr("cx", $scope.oGPlot.xScale($scope.offset)) 151 | // .attr("cy", $scope.oGPlot.yScale($scope.twt)); 152 | // }; 153 | 154 | // Register mouseup trigger for wgcir 155 | // $(".wgcir").mouseup(function(e){ 156 | // e.preventDefault(); 157 | // $scope.update_data(); 158 | // }); -------------------------------------------------------------------------------- /src/modules/wiggle.js: -------------------------------------------------------------------------------- 1 | 2 | // Attach horizon creation function to g3 3 | g3.wiggle = function(plot, data){ 4 | return new wiggle(plot, data); 5 | }; 6 | 7 | // Constructor 8 | // Only set variables that are set by items passed in, otherwise set using prototype 9 | var wiggle = function wiggle(plot, data){ 10 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 11 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 12 | this._data = data; 13 | this._plot = plot; 14 | this._xTrans = plot._xDomain[0]; 15 | this._yTrans = plot._yDomain[0]; 16 | this._rand = Math.floor((Math.random() * 100) + 100); 17 | this._offsets = plot._offsets; 18 | return this; 19 | }; 20 | 21 | // Set defaults 22 | wiggle.prototype._skip = 0; 23 | wiggle.prototype._xMult = 1; 24 | wiggle.prototype._yMult = 1; 25 | wiggle.prototype._duration = 5; 26 | wiggle.prototype._sampleRate = 1; 27 | wiggle.prototype._strokeWidth = 0.5; 28 | wiggle.prototype._color = 'black'; 29 | wiggle.prototype._fillColor = 'black'; 30 | wiggle.prototype._opacity = 0.4; 31 | 32 | wiggle.prototype.offsets = function(offsets) { 33 | if(offsets === undefined) {return this._offsets;} 34 | // check that offsets match the data 35 | if(this._data.length === offsets.length) {this._offsets = offsets;} 36 | else {console.log('**warning** number of offsets must match number of traces. `offsets` not set.');} 37 | return this; 38 | } 39 | 40 | wiggle.prototype.skip = function(skip){ 41 | if(skip === undefined){ return this._skip; } 42 | this._skip = skip; 43 | return this; 44 | }; 45 | 46 | wiggle.prototype.xTrans = function(xTrans){ 47 | if(xTrans === undefined){ return this._xTrans; } 48 | this._xTrans = xTrans; 49 | return this; 50 | }; 51 | 52 | wiggle.prototype.yTrans = function(yTrans){ 53 | if(yTrans === undefined){ return this._yTrans; } 54 | this._yTrans = yTrans; 55 | return this; 56 | }; 57 | 58 | wiggle.prototype.xMult = function(xMult){ 59 | if(xMult === undefined){ return this._xMult; } 60 | this._xMult = xMult; 61 | return this; 62 | }; 63 | 64 | wiggle.prototype.yMult = function(yMult){ 65 | if(yMult === undefined){ return this._yMult; } 66 | this._yMult = yMult; 67 | return this; 68 | }; 69 | 70 | wiggle.prototype.fillColor = function(color){ 71 | if(color === undefined){ return this._fillColor; } 72 | this._fillColor = color; 73 | return this; 74 | }; 75 | 76 | wiggle.prototype.color = function(color){ 77 | if(color === undefined){ return this._color; } 78 | this._color = color; 79 | return this; 80 | }; 81 | 82 | wiggle.prototype.strokeWidth = function(strokeWidth){ 83 | if(strokeWidth === undefined){ return this._strokeWidth; } 84 | this._strokeWidth = strokeWidth; 85 | return this; 86 | }; 87 | 88 | wiggle.prototype.sampleRate = function(sampleRate){ 89 | if(sampleRate === undefined){ return this._sampleRate; } 90 | this._sampleRate = sampleRate; 91 | return this; 92 | }; 93 | 94 | wiggle.prototype.duration = function(duration){ 95 | if(duration === undefined){ return this._duration; } 96 | this._duration = duration; 97 | return this; 98 | }; 99 | 100 | wiggle.prototype.opacity = function(opacity){ 101 | if(opacity === undefined){ return this._opacity; } 102 | this._opacity = opacity; 103 | return this; 104 | }; 105 | 106 | wiggle.prototype.lineFunc = function(k){ 107 | var plot = this._plot, 108 | xMult = this._xMult, 109 | xTrans = this._xTrans, 110 | sampleRate = this._sampleRate, 111 | yMult = this._yMult, 112 | yTrans = this._yTrans; 113 | var offset = this._offsets === undefined ? xTrans * k : this._offsets[k]; 114 | console.log('linefunc', offset) 115 | 116 | return d3.svg.area() 117 | .x(function (d) { 118 | return plot._xScale(d * xMult + offset); 119 | }) 120 | .y(function (d, i){ 121 | return plot._yScale(i * yMult / sampleRate + yTrans / sampleRate); 122 | }) 123 | .interpolate('basis'); 124 | }; 125 | 126 | wiggle.prototype.areaFunc = function(k, mean){ 127 | var plot = this._plot, 128 | xMult = this._xMult, 129 | xTrans = this._xTrans, 130 | sampleRate = this._sampleRate, 131 | yTrans = this._yTrans, 132 | yMult = this._yMult; 133 | var offset = this._offsets === undefined ? xTrans * k : this._offsets[k]; 134 | 135 | return d3.svg.area() 136 | .x(function (d, i) { 137 | return plot._xScale(mean * xMult + offset);// * sampleRate); 138 | }) 139 | .y(function (d, i){ 140 | return plot._yScale(i * yMult / sampleRate + yTrans/sampleRate); 141 | }) 142 | .interpolate('basis'); 143 | }; 144 | 145 | wiggle.prototype.draw = function() { 146 | for(var k = this._data.length - 1; k >= 0; k--){ 147 | if(this._skip === 0 || k % this._skip === 0){ 148 | var mean = d3.mean(this._data[k]); 149 | 150 | // Line function 151 | var line = this.lineFunc(k); 152 | var area = this.areaFunc(k, mean); 153 | 154 | this._plot._svg.datum(this._data[k]); 155 | 156 | this._plot._svg.append('clipPath') 157 | .attr('id', 'clip-below' + this._rand + k) 158 | .append('path') 159 | .attr('d', area.x0(this._plot._width)); 160 | 161 | var plot = this._plot, 162 | xMult = this._xMult, 163 | xTrans = this._xTrans, 164 | sampleRate = this._sampleRate; 165 | var offset = this._offsets === undefined ? xTrans * k : this._offsets[k]; 166 | this._plot._svg.append('path') 167 | .attr('id', 'area-below' + k) 168 | .attr('clip-path', 'url(#clip-below' + this._rand + k) 169 | .attr('fill', this._fillColor) 170 | .style('opacity', this._opacity) 171 | .attr('d', area.x0(function (d, i){ 172 | return plot._xScale(d * xMult + offset);// * sampleRate); 173 | })); 174 | 175 | this._plot._svg.append('path') 176 | .attr('class', 'line' + k) 177 | .attr('d', line(this._data[k])) 178 | .attr('stroke', this._color) 179 | .attr('stroke-width', this._strokeWidth) 180 | .attr('fill', 'none'); 181 | } 182 | } 183 | return this; 184 | }; 185 | 186 | wiggle.prototype.reDraw = function(data, xDomain, yDomain){ 187 | 188 | // Redraw the Axis 189 | this._plot._xScale.domain(xDomain); 190 | this._plot._yScale.domain(yDomain); 191 | 192 | this._plot._svg.select('.x.axis') 193 | .transition() 194 | .duration(this._duration) 195 | .call(this._plot._xAxis) 196 | .selectAll("text"); 197 | 198 | this._plot._svg.select('.y.axis') 199 | .transition() 200 | .duration(this._duration) 201 | .call(this._plot._yAxis); 202 | 203 | for(var k = data.length - 1; k >= 0; k--){ 204 | if(this._skip === 0 || k % this._skip === 0){ 205 | var mean = d3.mean(data[k]); 206 | 207 | this._plot._svg.select("#clip-below" + this._rand + k) 208 | .remove() 209 | 210 | var line = this.lineFunc(k); 211 | var area = this.areaFunc(k, mean); 212 | 213 | this._plot._svg.select(".line" + k) 214 | .transition() 215 | .duration(this._duration) 216 | .attr('d', line(data[k])) 217 | .ease("linear"); 218 | 219 | this._plot._svg.datum(data[k]); 220 | 221 | this._plot._svg.append('clipPath') 222 | .attr('id', 'clip-below' + this._rand + k) 223 | .append('path') 224 | .attr('d', area.x0(this._plot._width)); 225 | 226 | var plot = this._plot, 227 | xMult = this._xMult, 228 | xTrans = this._xTrans, 229 | sampleRate = this._sampleRate; 230 | var offset = this._offsets === undefined ? xTrans * k : this._offsets[k]; 231 | 232 | this._plot._svg.select("#area-below" + k) 233 | .attr('clip-path', 'url(#clip-below' + this._rand + k) 234 | .transition() 235 | .duration(this._duration) 236 | .attr('d', area.x0(function (d, i){ 237 | return plot._xScale(d * xMult + offset);// * sampleRate); 238 | })) 239 | .ease('linear'); 240 | } 241 | } 242 | return this; 243 | }; 244 | -------------------------------------------------------------------------------- /src/modules/plot.js: -------------------------------------------------------------------------------- 1 | // Attach horizon creation function to g3 2 | g3.plot = function(elem){ 3 | return new plot(elem); 4 | }; 5 | 6 | // Constructor 7 | // Only variables that are by items passed in, otherwise using prototype 8 | var plot = function plot(elem){ 9 | if(!elem){ return 'Param: elem is missing. A div to attach to is required'; } 10 | this._elem = elem; 11 | this._margin = {top: 30, right: 30, bottom: 30, left: 30}; 12 | this._width = $(this._elem).width() - this._margin.left - this._margin.right; 13 | return this; 14 | }; 15 | 16 | // Defaults 17 | plot.prototype._height = 800; 18 | // plot.prototype._margin = {top: 30, right: 30} 19 | plot.prototype._xDomain = [0,0]; 20 | plot.prototype._yDomain = [0,0]; 21 | plot.prototype._xAxisVisible = true; 22 | plot.prototype._yAxisVisible = true; 23 | plot.prototype._x2AxisVisible = true; 24 | plot.prototype._y2AxisVisible = true; 25 | plot.prototype._xOrient = 'top'; 26 | plot.prototype._x2Orient = 'bottom'; 27 | plot.prototype._yOrient = 'left'; 28 | plot.prototype._y2Orient = 'right'; 29 | plot.prototype._duration = 5; 30 | 31 | // Setters 32 | plot.prototype.duration = function(duration){ 33 | if(duration === undefined){ return this._duration; } 34 | this._duration = duration; 35 | return this; 36 | }; 37 | 38 | plot.prototype.margin = function(top, right, bottom, left){ 39 | if(top === undefined){ return this._margin; } 40 | this._margin = {top: top, right: right, bottom: bottom, left: left}; 41 | return this; 42 | }; 43 | 44 | plot.prototype.width = function(width){ 45 | if(width === undefined){ return this._width; } 46 | this._width = width; 47 | return this; 48 | }; 49 | 50 | plot.prototype.height = function(height){ 51 | if(height === undefined){ return this._height; } 52 | this._height = height; 53 | return this; 54 | }; 55 | 56 | plot.prototype.xDomain = function(domain){ 57 | if(domain === undefined){ return this._xDomain; } 58 | this._xDomain = domain; 59 | return this; 60 | }; 61 | 62 | plot.prototype.yDomain = function(domain){ 63 | if(domain === undefined){ return this._yDomain; } 64 | this._yDomain = domain; 65 | return this; 66 | }; 67 | 68 | plot.prototype.y2Domain = function(domain){ 69 | if(domain === undefined){ return this._y2Domain; } 70 | this._x2Domain = domain; 71 | return this; 72 | }; 73 | 74 | plot.prototype.y2Domain = function(domain){ 75 | if(domain === undefined){ return this._y2Domain; } 76 | this._y2Domain = domain; 77 | return this; 78 | }; 79 | 80 | plot.prototype.toggleXAxis = function(bool){ 81 | if(bool === undefined){ return this._xAxisVisible; } 82 | this._xAxisVisible = bool; 83 | return this; 84 | }; 85 | 86 | plot.prototype.toggleX2Axis = function(bool){ 87 | if(bool === undefined){ return this._x2AxisVisible; } 88 | this._x2AxisVisible = bool; 89 | return this; 90 | }; 91 | 92 | plot.prototype.toggleYAxis = function(bool){ 93 | if(bool === undefined){ return this._yAxisVisible; } 94 | this._yAxisVisible = bool; 95 | return this; 96 | }; 97 | 98 | plot.prototype.toggleY2Axis = function(bool){ 99 | if(bool === undefined){ return this._y2AxisVisible; } 100 | this._y2AxisVisible = bool; 101 | return this; 102 | }; 103 | 104 | plot.prototype.xTicks = function(ticks){ 105 | if(ticks === undefined){ return this._xTicks; } 106 | this._xTicks = ticks; 107 | return this; 108 | }; 109 | 110 | plot.prototype.yTicks = function(ticks){ 111 | if(ticks === undefined){ return this._yTicks; } 112 | this._yTicks = ticks; 113 | return this; 114 | }; 115 | 116 | plot.prototype.x2Ticks = function(ticks){ 117 | if(ticks === undefined){ return this._x2Ticks; } 118 | this._x2Ticks = ticks; 119 | return this; 120 | }; 121 | 122 | plot.prototype.y2Ticks = function(ticks){ 123 | if(ticks === undefined){ return this._y2Ticks; } 124 | this._y2Ticks = ticks; 125 | return this; 126 | }; 127 | 128 | plot.prototype.xTitle = function(title){ 129 | if(title === undefined){ return this._yTitle; } 130 | this._xTitle = title; 131 | return this; 132 | }; 133 | 134 | plot.prototype.yTitle = function(title){ 135 | if(title === undefined){ return this._yTitle; } 136 | this._yTitle = title; 137 | return this; 138 | }; 139 | 140 | plot.prototype.y2Title = function(title){ 141 | if(title === undefined){ return this._y2Title; } 142 | this._y2Title = title; 143 | return this; 144 | }; 145 | 146 | plot.prototype.x2Title = function(title){ 147 | if(title === undefined){ return this._x2Title; } 148 | this._x2Title = title; 149 | return this; 150 | }; 151 | 152 | plot.prototype.xOrient = function(orient){ 153 | if(orient === undefined){ return this._xOrient; } 154 | this._xOrient = orient; 155 | return this; 156 | }; 157 | 158 | plot.prototype.x2Orient = function(orient){ 159 | if(orient === undefined){ return this._x2Orient; } 160 | this._x2Orient = orient; 161 | return this; 162 | }; 163 | 164 | plot.prototype.yOrient = function(orient){ 165 | if(orient === undefined){ return this._yOrient; } 166 | this._yOrient = orient; 167 | return this; 168 | }; 169 | 170 | plot.prototype.y2Orient = function(orient){ 171 | if(orient === undefined){ return this._y2Orient; } 172 | this._y2Orient = orient; 173 | return this; 174 | }; 175 | 176 | plot.prototype.xTickFormat = function(format){ 177 | if(format === undefined){ return this._xTickFormat; } 178 | this._xTickFormat = format; 179 | return this; 180 | }; 181 | 182 | plot.prototype.yTickFormat = function(format){ 183 | if(format === undefined){ return this._yTickFormat; } 184 | this._yTickFormat = format; 185 | return this; 186 | }; 187 | 188 | plot.prototype.x2TickFormat = function(format){ 189 | if(format === undefined){ return this._x2TickFormat; } 190 | this._x2TickFormat = format; 191 | return this; 192 | }; 193 | 194 | plot.prototype.y2TickFormat = function(format){ 195 | if(format === undefined){ return this._y2TickFormat; } 196 | this._y2TickFormat = format; 197 | return this; 198 | }; 199 | 200 | plot.prototype.xScale = function(scale){ 201 | if(scale === undefined){ return this._xScale; } 202 | this._xScale = scale; 203 | return this; 204 | }; 205 | 206 | plot.prototype.x2Scale = function(scale){ 207 | if(scale === undefined){ return this._x2Scale; } 208 | this._x2Scale = scale; 209 | return this; 210 | }; 211 | 212 | plot.prototype.yScale = function(scale){ 213 | if(scale === undefined){ return this._yScale; } 214 | this._yScale = scale; 215 | return this; 216 | }; 217 | 218 | plot.prototype.y2Scale = function(scale){ 219 | if(scale === undefined){ return this._y2Scale; } 220 | this._y2Scale = scale; 221 | return this; 222 | }; 223 | 224 | plot.prototype.svg = function(svg){ 225 | if(svg === undefined){ return this._svg; } 226 | this._svg = svg; 227 | return this; 228 | }; 229 | 230 | plot.prototype.createSVG = function(){ 231 | // Append svg object to dom element 232 | return d3.select(this._elem).append('svg') 233 | .attr('class', 'log_plot') 234 | .attr('width', this._width + this._margin.right + this._margin.left) 235 | .attr('height', this._height + this._margin.bottom + this._margin.top) 236 | .append('g') 237 | .attr('height', this.height) 238 | .attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')'); 239 | }; 240 | 241 | plot.prototype.setScales = function(){ 242 | this._xScale = d3.scale.linear() 243 | .domain(this._xDomain) 244 | .range([0, this._width]); 245 | 246 | this._yScale = d3.scale.linear() 247 | .domain(this._yDomain) 248 | .range([0, this._height]); 249 | 250 | if(this._x2Domain === undefined){ 251 | this._x2Domain = this._xDomain; 252 | } 253 | this._x2Scale = d3.scale.linear() 254 | .domain(this._x2Domain) 255 | .range([0, this._width]); 256 | 257 | if(this._y2Domain === undefined){ 258 | this._y2Domain = this._yDomain; 259 | } 260 | this._y2Scale = d3.scale.linear() 261 | .domain(this._y2Domain) 262 | .range([0, this._height]); 263 | }; 264 | 265 | plot.prototype.createAxis = function(scale, innerTickSize, orient, ticks){ 266 | return d3.svg.axis() 267 | .scale(scale) 268 | .innerTickSize(innerTickSize) 269 | .outerTickSize(3) 270 | .tickPadding(5) 271 | .orient(orient) 272 | .ticks(ticks); 273 | }; 274 | 275 | plot.prototype.setAxis = function(){ 276 | if(this._xAxisVisible){ 277 | this._xAxis = this.createAxis(this._xScale, -this._height, this._xOrient, this._xTicks); 278 | this._xAxis.tickFormat(this._xTickFormat); 279 | this._svg.append('g') 280 | .attr('class', 'x axis') 281 | .call(this._xAxis); 282 | } 283 | if(this._yAxisVisible){ 284 | this._yAxis = this.createAxis(this._yScale, -this._width, this._yOrient, this._yTicks); 285 | this._yAxis.tickFormat(this._yTickFormat); 286 | this._svg.append('g') 287 | .attr('class', 'y axis') 288 | .call(this._yAxis); 289 | } 290 | if(this._x2AxisVisible){ 291 | this._x2Axis = this.createAxis(this._x2Scale, -this._height, this._x2Orient, this._x2Ticks); 292 | this._x2Axis.tickFormat(this._x2TickFormat); 293 | this._svg.append('g') 294 | .attr('class', 'x2 axis') 295 | .attr("transform", "translate(" + "0," + this._height + ")") 296 | .call(this._x2Axis); 297 | } 298 | if(this._y2AxisVisible){ 299 | this._y2Axis = this.createAxis(this._y2Scale, -this._width, this._y2Orient, this._y2Ticks); 300 | this._y2Axis.tickFormat(this._y2TickFormat); 301 | this._svg.append('g') 302 | .attr('class', 'y2 axis') 303 | .attr("transform", "translate(" + this._width + ",0)") 304 | .call(this._y2Axis); 305 | } 306 | }; 307 | 308 | plot.prototype.setTitles = function(){ 309 | if(this._xTitle){ 310 | if(this._xTickFormat === ""){ 311 | var margin = -10; 312 | } else { 313 | var margin = -30; 314 | } 315 | this._svg.append("text") 316 | .attr("x", (this._width) / 2) 317 | .attr("y", margin) 318 | .style("text-anchor", "middle") 319 | .style("font-size", 12) 320 | .text(this._xTitle); 321 | } 322 | 323 | if(this._yTitle){ 324 | if(this._yTickFormat === ""){ 325 | var yMargin = -10; 326 | } else { 327 | var yMargin = -40; 328 | } 329 | 330 | this._svg.append("text") 331 | .attr("transform", "rotate(-90)") 332 | .attr("y", yMargin) 333 | .attr("dy", "1em") 334 | .style("text-anchor", "end") 335 | .style("font-size", 12) 336 | .text(this._yTitle); 337 | } 338 | 339 | if(this._x2Title){ 340 | if(this._x2TickFormat === ""){ 341 | var margin = 10; 342 | } else { 343 | var margin = 30; 344 | } 345 | 346 | this._svg.append("text") 347 | .attr("transform", "translate(" + "0," + this._height + ")") 348 | .attr("x", (this._width) / 2) 349 | .attr("y", margin) 350 | .style("text-anchor", "middle") 351 | .style("font-size", 12) 352 | .text(this._x2Title); 353 | } 354 | 355 | if(this._y2Title){ 356 | if(this._yTickFormat === ""){ 357 | var yMargin = -10; 358 | } else { 359 | var yMargin = -40; 360 | } 361 | 362 | this._svg.append("text") 363 | .attr("transform", "translate(" + "0," + this._height + ")") 364 | .attr("y", yMargin) 365 | .attr("dy", "1em") 366 | .style("text-anchor", "end") 367 | .style("font-size", 12) 368 | .text(this._y2Title); 369 | } 370 | }; 371 | 372 | plot.prototype.draw = function() { 373 | this.setScales(); 374 | this._svg = this.createSVG(); 375 | this.setAxis(); 376 | this.setTitles(); 377 | return this; 378 | }; 379 | 380 | plot.prototype.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){ 381 | if(xDomain){ 382 | this._xScale.domain(xDomain); 383 | this._svg.select('.x.axis') 384 | .transition() 385 | .duration(this._duration) 386 | .call(this._xAxis) 387 | .ease('linear'); 388 | } 389 | 390 | if(yDomain){ 391 | this._yScale.domain(yDomain); 392 | this._svg.select('.y.axis') 393 | .transition() 394 | .duration(this._duration) 395 | .call(this._yAxis) 396 | .ease('linear'); 397 | } 398 | 399 | if(x2Domain === undefined){ 400 | x2Domain = xDomain; 401 | } 402 | if(x2Domain){ 403 | this._x2Scale.domain(x2Domain); 404 | this._svg.select('.x2.axis') 405 | .transition() 406 | .duration(this._duration) 407 | .call(this._x2Axis) 408 | .ease('linear'); 409 | } 410 | 411 | if(y2Domain === undefined){ 412 | y2Domain = yDomain; 413 | } 414 | if(y2Domain){ 415 | this._y2Scale.domain(y2Domain); 416 | this._svg.select('.y2.axis') 417 | .transition() 418 | .duration(this._duration) 419 | .call(this._y2Axis) 420 | .ease('linear'); 421 | } 422 | }; -------------------------------------------------------------------------------- /dist/g3.min.js: -------------------------------------------------------------------------------- 1 | /*! g3 - v0.0.1 - 2015-11-01 - justinkheisler */ 2 | "use strict";(function(t){function i(){var t={};return t}"undefined"==typeof g3&&(t.g3=i()),g3.canvas=function(t,i){return new r(t,i)};var r=function r(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";this._data=i,this._plot=t;var r=$(this._plot._elem).css("padding-left");return r=Number(r.replace("px","")),this._canvas=d3.select(this._plot._elem).append("canvas").attr("width",this._data[0].length).attr("height",this._data[0][0].length).style("width",this._plot._width+"px").style("height",this._plot._height+"px").style("opacity",this._opacity).style("top",this._plot._margin.top+"px").style("left",this._plot._margin.left+r+"px"),this};r.prototype._gain=1,r.prototype.opacity=function(t){return void 0===t?this._opacity:(this._opacity=t,this._canvas.style("opacity",t),this)},r.prototype.gain=function(t){return void 0===t?this._gain:(this._gain=t,this)},r.prototype.nDColorMap=function(t){return void 0===t?this._nDColorMap:(this._nDColorMap=t,this)},r.prototype.draw=function(){return this._context=this._canvas.node().getContext("2d"),this.drawImage(),this},r.prototype.reDraw=function(t){return this._context.clearRect(0,0,this._data[0].length,this._data[0][0].length),this._canvas.attr("width",t[0].length).attr("height",t[0][0].length),this._data=t,this.drawImage(),this},r.prototype.drawImage=function(){var t=this._data[0].length,i=this._data[0][0].length;if(this._image=this._context.createImageData(t,i),this._data.length!=this._nDColorMap.length)return alert("An equal number of data attributes and color bars is required"),void 0;for(var r,s,o,e=0,n=-1;i>e;++e)for(var a=0;t>a;++a){r=0,s=0,o=0;for(var h=0;this._data.length>h;h++){var _=d3.rgb(this._nDColorMap[h](this._data[h][a][e]));r+=_.r/255,s+=_.g/255,o+=_.b/255}this._image.data[++n]=255*r,this._image.data[++n]=255*s,this._image.data[++n]=255*o,this._image.data[++n]=255}return this._context.putImageData(this._image,0,0),this},g3.colorScale={red_white_black:d3.scale.linear().domain([0,1]).range([d3.rgb(255,0,0),d3.rgb(255,255,255),d3.rgb(0,0,0)]),red_white_blue:d3.scale.linear().domain([0,1]).range([d3.rgb(255,0,0),d3.rgb(255,255,255),d3.rgb(0,0,255)]),greyscale:d3.scale.linear().domain([0,1]).range([d3.rgb(0,0,0),d3.rgb(127.5,127.5,127.5),d3.rgb(255,255,255)]),seismic:d3.scale.linear().domain([0,1]).range([d3.rgb(0,0,76.5),d3.rgb(253,253,1),d3.rgb(127.5,0,0)])},g3.handle={},g3.handle.line=function(t,i,r,o,e){return new s(t,i,r,o,e)};var s=function s(t,i,r,s,o){return t?(this._plot=t,this._x=i,this._y=r,this._x2=void 0===s?i:s,this._y2=void 0===o?r:o,this):"Param: plot is missing, a div to attach the svg is required"};s.prototype._strokeWidth=30,s.prototype._stroke="black",s.prototype._cursor="pointer",s.prototype._opacity=0,s.prototype._duration=5,s.prototype.class=function(t){return void 0===t?this._class:(this._class=t,this)},s.prototype.strokeWidth=function(t){return void 0===t?this._strokeWidth:(this._strokeWidth=t,this)},s.prototype.stroke=function(t){return void 0===t?this._color:(this._color=t,this)},s.prototype.cursor=function(t){return void 0===t?this._cursor:(this._cursor=t,this)},s.prototype.opacity=function(t){return void 0===t?this._opacity:(this._opacity=t,this)},s.prototype.line=function(t){return void 0===t?this._line:(this._line=t,this)},s.prototype.draw=function(){return this._line=this._plot._svg.append("line").attr("class",this._class).style("stroke-width",this._strokeWidth).style("stroke",this._stroke).style("cursor",this._cursor).style("opacity",this._opacity).attr("x1",this._plot._xScale(this._x)).attr("y1",this._plot._yScale(this._y)).attr("x2",this._plot._xScale(this._x2)).attr("y2",this._plot._yScale(this._y2)),this},s.prototype.reDraw=function(t,i,r,s){return this._line.transition().duration(this._duration).attr("x1",this._plot._xScale(t)).attr("y1",this._plot._yScale(i)).attr("x2",this._plot._xScale(r)).attr("y2",this._plot._yScale(s)),this},g3.horizon=function(t,i){return new o(t,i)};var o=function o(t,i){return i&&$.isArray(i)?t?(this._data=i,this._plot=t,this._xMin=t._xDomain[0],this._yMin=t._yDomain[0],this):"Param: plot is missing, a div to attach the svg is required":"Param: data is missing, An array required"};o.prototype._xInt=1,o.prototype._yInt=1,o.prototype._duration=5,o.prototype._gain=1,o.prototype._interpolate="basis",o.prototype._color="green",o.prototype._strokeWidth=1.5,o.prototype._opacity=1,o.prototype.interpolate=function(t){return void 0===t?this._interpolate:(this._interpolate=t,this)},o.prototype.xMin=function(t){return void 0===t?this._xMin:(this._xMin=t,this)},o.prototype.yMin=function(t){return void 0===t?this._yMin:(this._yMin=t,this)},o.prototype.xInt=function(t){return void 0===t?this._xInt:(this._xInt=t,this)},o.prototype.yInt=function(t){return void 0===t?this._yInt:(this._yInt=t,this)},o.prototype.duration=function(t){return void 0===t?this._duration:(this._duration=t,this)},o.prototype.gain=function(t){return void 0===t?this._gain:(this._gain=t,this)},o.prototype.color=function(t){return void 0===t?this._color:(this._color=t,this)},o.prototype.strokeWidth=function(t){return void 0===t?this._strokeWidth:(this._strokeWidth=t,this)},o.prototype.opacity=function(t){return void 0===t?this._opacity:(this._opacity=t,this)},o.prototype.cursor=function(t){return void 0===t?this_cursor:(this._cursor=t,this)},o.prototype.lineFunc=function(){var t=this._plot,i=this._xMin,r=this._gain,s=this._interpolate,o=d3.svg.line().x(function(r,s){return t._xScale(s+i)}).y(function(i){return t._yScale(i*r)}).interpolate(s);return o},o.prototype.draw=function(){var t=this.lineFunc();return this._svg=this._plot._svg.append("path").attr("d",t(this._data)).attr("stroke",this._color).attr("stroke-width",this._strokeWidth).style("opacity",this._opacity).attr("fill","none"),this._cursor&&this._svg.style("cursor",this._cursor),this},o.prototype.reDraw=function(t){var i=this.lineFunc();return this._svg.transition().duration(this._duration).attr("d",i(t)),this},g3.log=function(t,i){return new e(t,i)};var e=function e(t,i){return i&&$.isArray(i)?t?(this._data=i,this._plot=t,this._xMin=0,this._yMin=0,this):"Param: plot is missing, a div to attach the svg is required":"Param: data is missing, An array required"};e.prototype._xInt=1,e.prototype._yInt=1,e.prototype._color="blue",e.prototype._duration=5,e.prototype._strokeWidth=.25,e.prototype.duration=function(t){return void 0===t?this._duration:(this._duration=t,this)},e.prototype.xTrans=function(t){return void 0===t?this._xMin:(this._xMin=t,this)},e.prototype.xMult=function(t){return void 0===t?this._xInt:(this._xInt=t,this)},e.prototype.yTrans=function(t){return void 0===t?this._yMin:(this._yMin=t,this)},e.prototype.yMult=function(t){return void 0===t?this._yInt:(this._yInt=t,this)},e.prototype.color=function(t){return void 0===t?this._color:(this._color=t,this)},e.prototype.strokeWidth=function(t){return void 0===t?this._strokeWidth:(this._strokeWidth=t,this)},e.prototype.draw=function(){var t=this.lineFunc();return this._svg=this._plot._svg.append("path").datum(this._data).attr("d",t).attr("stroke",this._color).attr("stroke-width",this._strokeWidth).attr("fill","none"),this},e.prototype.reDraw=function(t){var i=this.lineFunc();return this._svg.transition().duration(this._duration).attr("d",i(t)).ease("linear"),this},e.prototype.lineFunc=function(){var t=this._plot,i=this._yInt,r=this._yMin,s=this._xInt,o=this._xMin,e=this._interpolate;return d3.svg.line().x(function(i){return t._xScale(i*s+o)}).y(function(s,o){return t._yScale(o*i+r)}).interpolate(e)},g3.plot=function(t){return new n(t)};var n=function n(t){return t?(this._elem=t,this._margin={top:30,right:30,bottom:30,left:30},this._width=$(this._elem).width()-this._margin.left-this._margin.right,this):"Param: elem is missing. A div to attach to is required"};n.prototype._height=800,n.prototype._xDomain=[0,0],n.prototype._yDomain=[0,0],n.prototype._xAxisVisible=!0,n.prototype._yAxisVisible=!0,n.prototype._x2AxisVisible=!0,n.prototype._y2AxisVisible=!0,n.prototype._xOrient="top",n.prototype._x2Orient="bottom",n.prototype._yOrient="left",n.prototype._y2Orient="right",n.prototype._duration=5,n.prototype.duration=function(t){return void 0===t?this._duration:(this._duration=t,this)},n.prototype.margin=function(t,i,r,s){return void 0===t?this._margin:(this._margin={top:t,right:i,bottom:r,left:s},this)},n.prototype.width=function(t){return void 0===t?this._width:(this._width=t,this)},n.prototype.height=function(t){return void 0===t?this._height:(this._height=t,this)},n.prototype.xDomain=function(t){return void 0===t?this._xDomain:(this._xDomain=t,this)},n.prototype.yDomain=function(t){return void 0===t?this._yDomain:(this._yDomain=t,this)},n.prototype.y2Domain=function(t){return void 0===t?this._y2Domain:(this._x2Domain=t,this)},n.prototype.y2Domain=function(t){return void 0===t?this._y2Domain:(this._y2Domain=t,this)},n.prototype.toggleXAxis=function(t){return void 0===t?this._xAxisVisible:(this._xAxisVisible=t,this)},n.prototype.toggleX2Axis=function(t){return void 0===t?this._x2AxisVisible:(this._x2AxisVisible=t,this)},n.prototype.toggleYAxis=function(t){return void 0===t?this._yAxisVisible:(this._yAxisVisible=t,this)},n.prototype.toggleY2Axis=function(t){return void 0===t?this._y2AxisVisible:(this._y2AxisVisible=t,this)},n.prototype.xTicks=function(t){return void 0===t?this._xTicks:(this._xTicks=t,this)},n.prototype.yTicks=function(t){return void 0===t?this._yTicks:(this._yTicks=t,this)},n.prototype.x2Ticks=function(t){return void 0===t?this._x2Ticks:(this._x2Ticks=t,this)},n.prototype.y2Ticks=function(t){return void 0===t?this._y2Ticks:(this._y2Ticks=t,this)},n.prototype.xTitle=function(t){return void 0===t?this._yTitle:(this._xTitle=t,this)},n.prototype.yTitle=function(t){return void 0===t?this._yTitle:(this._yTitle=t,this)},n.prototype.y2Title=function(t){return void 0===t?this._y2Title:(this._y2Title=t,this)},n.prototype.x2Title=function(t){return void 0===t?this._x2Title:(this._x2Title=t,this)},n.prototype.xOrient=function(t){return void 0===t?this._xOrient:(this._xOrient=t,this)},n.prototype.x2Orient=function(t){return void 0===t?this._x2Orient:(this._x2Orient=t,this)},n.prototype.yOrient=function(t){return void 0===t?this._yOrient:(this._yOrient=t,this)},n.prototype.y2Orient=function(t){return void 0===t?this._y2Orient:(this._y2Orient=t,this)},n.prototype.xTickFormat=function(t){return void 0===t?this._xTickFormat:(this._xTickFormat=t,this)},n.prototype.yTickFormat=function(t){return void 0===t?this._yTickFormat:(this._yTickFormat=t,this)},n.prototype.x2TickFormat=function(t){return void 0===t?this._x2TickFormat:(this._x2TickFormat=t,this)},n.prototype.y2TickFormat=function(t){return void 0===t?this._y2TickFormat:(this._y2TickFormat=t,this)},n.prototype.xScale=function(t){return void 0===t?this._xScale:(this._xScale=t,this)},n.prototype.x2Scale=function(t){return void 0===t?this._x2Scale:(this._x2Scale=t,this)},n.prototype.yScale=function(t){return void 0===t?this._yScale:(this._yScale=t,this)},n.prototype.y2Scale=function(t){return void 0===t?this._y2Scale:(this._y2Scale=t,this)},n.prototype.svg=function(t){return void 0===t?this._svg:(this._svg=t,this)},n.prototype.createSVG=function(){return d3.select(this._elem).append("svg").attr("class","log_plot").attr("width",this._width+this._margin.right+this._margin.left).attr("height",this._height+this._margin.bottom+this._margin.top).append("g").attr("height",this.height).attr("transform","translate("+this._margin.left+","+this._margin.top+")")},n.prototype.setScales=function(){this._xScale=d3.scale.linear().domain(this._xDomain).range([0,this._width]),this._yScale=d3.scale.linear().domain(this._yDomain).range([0,this._height]),void 0===this._x2Domain&&(this._x2Domain=this._xDomain),this._x2Scale=d3.scale.linear().domain(this._x2Domain).range([0,this._width]),void 0===this._y2Domain&&(this._y2Domain=this._yDomain),this._y2Scale=d3.scale.linear().domain(this._y2Domain).range([0,this._height])},n.prototype.createAxis=function(t,i,r,s){return d3.svg.axis().scale(t).innerTickSize(i).outerTickSize(3).tickPadding(5).orient(r).ticks(s)},n.prototype.setAxis=function(){this._xAxisVisible&&(this._xAxis=this.createAxis(this._xScale,-this._height,this._xOrient,this._xTicks),this._xAxis.tickFormat(this._xTickFormat),this._svg.append("g").attr("class","x axis").call(this._xAxis)),this._yAxisVisible&&(this._yAxis=this.createAxis(this._yScale,-this._width,this._yOrient,this._yTicks),this._yAxis.tickFormat(this._yTickFormat),this._svg.append("g").attr("class","y axis").call(this._yAxis)),this._x2AxisVisible&&(this._x2Axis=this.createAxis(this._x2Scale,-this._height,this._x2Orient,this._x2Ticks),this._x2Axis.tickFormat(this._x2TickFormat),this._svg.append("g").attr("class","x2 axis").attr("transform","translate(0,"+this._height+")").call(this._x2Axis)),this._y2AxisVisible&&(this._y2Axis=this.createAxis(this._y2Scale,-this._width,this._y2Orient,this._y2Ticks),this._y2Axis.tickFormat(this._y2TickFormat),this._svg.append("g").attr("class","y2 axis").attr("transform","translate("+this._width+",0)").call(this._y2Axis))},n.prototype.setTitles=function(){if(this._xTitle){if(""===this._xTickFormat)var t=-10;else var t=-30;this._svg.append("text").attr("x",this._width/2).attr("y",t).style("text-anchor","middle").style("font-size",12).text(this._xTitle)}if(this._yTitle){if(""===this._yTickFormat)var i=-10;else var i=-40;this._svg.append("text").attr("transform","rotate(-90)").attr("y",i).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this._yTitle)}if(this._x2Title){if(""===this._x2TickFormat)var t=10;else var t=30;this._svg.append("text").attr("transform","translate(0,"+this._height+")").attr("x",this._width/2).attr("y",t).style("text-anchor","middle").style("font-size",12).text(this._x2Title)}if(this._y2Title){if(""===this._yTickFormat)var i=-10;else var i=-40;this._svg.append("text").attr("transform","translate(0,"+this._height+")").attr("y",i).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this._y2Title)}},n.prototype.draw=function(){return this.setScales(),this._svg=this.createSVG(),this.setAxis(),this.setTitles(),this},n.prototype.reDraw=function(t,i,r,s){t&&(this._xScale.domain(t),this._svg.select(".x.axis").transition().duration(this._duration).call(this._xAxis).ease("linear")),i&&(this._yScale.domain(i),this._svg.select(".y.axis").transition().duration(this._duration).call(this._yAxis).ease("linear")),void 0===r&&(r=t),r&&(this._x2Scale.domain(r),this._svg.select(".x2.axis").transition().duration(this._duration).call(this._x2Axis).ease("linear")),void 0===s&&(s=i),s&&(this._y2Scale.domain(s),this._svg.select(".y2.axis").transition().duration(this._duration).call(this._y2Axis).ease("linear"))},g3.scale={},g3.scale.rgb=function(){return new a};var a=function(){function t(t,s,o){var e=d3.scale.linear().domain(i[0]).range(r[0]),n=d3.scale.linear().domain(i[1]).range(r[1]),a=d3.scale.linear().domain(i[2]).range(r[2]);return d3.rgb(e(t),n(s),a(o))}var i=[[0,1],[0,1],[0,1]],r=[[0,255],[0,255],[0,255]];return t.domain=function(r){return void 0===r?i:(i=r,t)},t.range=function(i){return void 0===i?r:(r=i,t)},t};g3.scatter=function(t,i){return new h(t,i)};var h=function h(t,i){return i&&$.isArray(i)?t?(this._data=i,this._plot=t,this._colorScale=d3.scale.linear().domain([d3.min(this._data),d3.max(this._data)]).range([d3.rgb(255,0,0),d3.rgb(0,255,0),d3.rgb(0,0,255)]),this._radiusScale=d3.scale.linear().domain([d3.min(this._data),d3.max(this._data)]).range([1,5]),this):"Param: plot is missing, a div to attach the svg is required":"Param: data is missing, An array required"};h.prototype._xMult=1,h.prototype._yMult=1,h.prototype._xTrans=0,h.prototype._yTrans=0,h.prototype.xMult=function(t){return void 0===t?this._xMult:(this._xMult=t,this)},h.prototype.yMult=function(t){return void 0===t?this._yMult:(this._yMult=t,this)},h.prototype.xTrans=function(t){return void 0===t?this._xTrans:(this._xTrans=t,this)},h.prototype.yTrans=function(t){return void 0===t?this._yTrans:(this._yTrans=t,this)},h.prototype.colorScale=function(t){return void 0===t?this._colorScale:(this._colorScale=t,this)},h.prototype.radiusScale=function(t){return void 0===t?this._radiusScale:(this._radiusScale=t,this)},h.prototype.draw=function(){var t=this._radiusScale,i=this._xMult,r=this._yMult,s=this._xTrans,o=this._yTrans,e=this._colorScale,n=this._plot._xScale,a=this._plot._yScale;return this._plot._svg.selectAll(".scatter").data(this._data).enter().append("circle").attr("class","scatter").attr("r",function(i){return t(i)}).attr("cx",function(t){return n(t*i+s)}).attr("cy",function(t,i){return a(i*r+o)}).style("stroke","black").style("fill",function(t){return e(t)}),this},h.prototype.reDraw=function(t){var i=this._radiusScale,r=this._xMult,s=this._yMult,o=this._xTrans,e=this._yTrans,n=this._colorScale,a=this._plot._xScale,h=this._plot._yScale;return this._data=t,this._plot._svg.selectAll(".scatter").data(t).transition().duration(500).attr("r",function(t){return i(t)}).attr("cx",function(t){return a(t*r+o)}).attr("cy",function(t,i){return h(i*s+e)}).style("fill",function(t){return n(t)}),this},g3.seismic=function(t,i){return new _(t,i)};var _=function _(t,i){return i&&$.isArray(i)?t?(this._data=i,this._plot=t,this):"Param: plot is missing, a div to attach the svg is required":"Param: data is missing, An array required"};_.prototype._max=1,_.prototype._gain=1,_.prototype._duration=5,_.prototype.nDColorMap=function(t){return void 0===t?this._nDColorMap:(this._nDColorMap=t,this)},_.prototype.duration=function(t){return void 0===t?this._duration:(this._duration=t,this)},_.prototype.gain=function(t){return void 0===t?this._gain:(this._gain=t,this)},_.prototype.max=function(t){return void 0===t?this._max:(this._max=t,this)},_.prototype.draw=function(){return this._canvas=g3.canvas(this._plot,this._data).gain(this._gain).nDColorMap(this._nDColorMap).draw(),this},_.prototype.reDraw=function(t){this._canvas.gain(this._gain).nDColorMap(this._nDColorMap).reDraw(t)},g3.wiggle=function(t,i){return new p(t,i)};var p=function p(t,i){return i&&$.isArray(i)?t?(this._data=i,this._plot=t,this._xTrans=t._xDomain[0],this._yTrans=t._yDomain[0],this._rand=Math.floor(100*Math.random()+100),this):"Param: plot is missing, a div to attach the svg is required":"Param: data is missing, An array required"};p.prototype._skip=0,p.prototype._xMult=1,p.prototype._yMult=1,p.prototype._duration=5,p.prototype._sampleRate=1,p.prototype._strokeWidth=.5,p.prototype._color="black",p.prototype._fillColor="black",p.prototype._opacity=.4,p.prototype.skip=function(t){return void 0===t?this._skip:(this._skip=t,this)},p.prototype.xTrans=function(t){return void 0===t?this._xTrans:(this._xTrans=t,this)},p.prototype.yTrans=function(t){return void 0===t?this._yTrans:(this._yTrans=t,this)},p.prototype.xMult=function(t){return void 0===t?this._xMult:(this._xMult=t,this)},p.prototype.yMult=function(t){return void 0===t?this._yMult:(this._yMult=t,this)},p.prototype.fillColor=function(t){return void 0===t?this._fillColor:(this._fillColor=t,this)},p.prototype.color=function(t){return void 0===t?this._color:(this._color=t,this)},p.prototype.strokeWidth=function(t){return void 0===t?this._strokeWidth:(this._strokeWidth=t,this)},p.prototype.sampleRate=function(t){return void 0===t?this._sampleRate:(this._sampleRate=t,this)},p.prototype.duration=function(t){return void 0===t?this._duration:(this._duration=t,this)},p.prototype.opacity=function(t){return void 0===t?this._opacity:(this._opacity=t,this)},p.prototype.lineFunc=function(t){var i=this._plot,r=this._xMult,s=this._xTrans,o=this._sampleRate,e=this._yMult,n=this._yTrans;return d3.svg.area().x(function(e){return i._xScale(e*r+s+t*o)}).y(function(t,r){return i._yScale(r*e+n)}).interpolate("basis")},p.prototype.areaFunc=function(t,i){var r=this._plot,s=this._xMult,o=this._xTrans,e=this._sampleRate,n=this._yTrans,a=this._yMult;return d3.svg.area().x(function(){return r._xScale(i*s+o+t*e)}).y(function(t,i){return r._yScale(i*a+n)}).interpolate("basis")},p.prototype.draw=function(){for(var t=this._data.length-1;t>=0;t--)if(0===this._skip||0===t%this._skip){var i=d3.mean(this._data[t]),r=this.lineFunc(t),s=this.areaFunc(t,i);this._plot._svg.datum(this._data[t]),this._plot._svg.append("clipPath").attr("id","clip-below"+this._rand+t).append("path").attr("d",s.x0(this._plot._width));var o=this._plot,e=this._xMult,n=this._xTrans,a=this._sampleRate;this._plot._svg.append("path").attr("id","area-below"+t).attr("clip-path","url(#clip-below"+this._rand+t).attr("fill",this._fillColor).style("opacity",this._opacity).attr("d",s.x0(function(i){return o._xScale(i*e+n+t*a)})),this._plot._svg.append("path").attr("class","line"+t).attr("d",r(this._data[t])).attr("stroke",this._color).attr("stroke-width",this._strokeWidth).attr("fill","none")}return this},p.prototype.reDraw=function(t,i,r){this._plot._xScale.domain(i),this._plot._yScale.domain(r),this._plot._svg.select(".x.axis").transition().duration(this._duration).call(this._plot._xAxis).selectAll("text"),this._plot._svg.select(".y.axis").transition().duration(this._duration).call(this._plot._yAxis);for(var s=t.length-1;s>=0;s--)if(0===this._skip||0===s%this._skip){var o=d3.mean(t[s]);this._plot._svg.select("#clip-below"+this._rand+s).remove();var e=this.lineFunc(s),n=this.areaFunc(s,o);this._plot._svg.select(".line"+s).transition().duration(this._duration).attr("d",e(t[s])).ease("linear"),this._plot._svg.datum(t[s]),this._plot._svg.append("clipPath").attr("id","clip-below"+this._rand+s).append("path").attr("d",n.x0(this._plot._width));var a=this._plot,h=this._xMult,_=this._xTrans,p=this._sampleRate;this._plot._svg.select("#area-below"+s).attr("clip-path","url(#clip-below"+this._rand+s).transition().duration(this._duration).attr("d",n.x0(function(t){return a._xScale(t*h+_+s*p)})).ease("linear")}return this}})(window); -------------------------------------------------------------------------------- /dist/g3.js: -------------------------------------------------------------------------------- 1 | /*! g3 - v0.0.1 - 2015-11-01 - justinkheisler */ 2 | 'use strict'; 3 | ;(function (window) { 4 | 5 | function defineg3() { 6 | var g3 = {}; 7 | return g3; 8 | } 9 | if(typeof(g3) === 'undefined') { 10 | window.g3 = defineg3(); 11 | } 12 | 13 | var DEBUG = false; 14 | 15 | 16 | 17 | // Attach canvas creation function to g3 18 | g3.canvas = function(plot, data){ 19 | return new canvas(plot, data); 20 | } 21 | 22 | // Constructor 23 | // Only set variables that are set by items passed in, otherwise set using prototype 24 | var canvas = function canvas(plot, data){ 25 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 26 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 27 | this._data = data; 28 | this._plot = plot; 29 | var padding = $(this._plot._elem).css('padding-left'); 30 | padding = Number(padding.replace('px', '')); 31 | this._canvas = d3.select(this._plot._elem) 32 | .append('canvas') 33 | .attr('width', this._data[0].length) 34 | .attr('height', this._data[0][0].length) 35 | .style('width', this._plot._width + 'px') 36 | .style('height', this._plot._height + 'px') 37 | .style('opacity', this._opacity) 38 | .style('top', this._plot._margin.top + 'px') 39 | .style('left', this._plot._margin.left + padding + 'px'); 40 | return this; 41 | }; 42 | 43 | canvas.prototype._gain = 1; 44 | 45 | canvas.prototype.opacity = function(opacity){ 46 | if(opacity === undefined){ return this._opacity; } 47 | this._opacity = opacity; 48 | this._canvas.style('opacity', opacity); 49 | return this; 50 | }; 51 | 52 | canvas.prototype.gain = function(gain){ 53 | if(gain === undefined){ return this._gain; } 54 | this._gain = gain; 55 | return this; 56 | }; 57 | 58 | canvas.prototype.nDColorMap = function(nDColorMap){ 59 | if(nDColorMap === undefined){ return this._nDColorMap; } 60 | this._nDColorMap = nDColorMap; 61 | return this; 62 | }; 63 | 64 | canvas.prototype.draw = function(){ 65 | this._context = this._canvas.node().getContext('2d'); 66 | this.drawImage(); 67 | return this; 68 | }; 69 | 70 | canvas.prototype.reDraw = function(data){ 71 | this._context.clearRect(0, 0, this._data[0].length, this._data[0][0].length); 72 | this._canvas 73 | .attr('width', data[0].length) 74 | .attr('height', data[0][0].length); 75 | this._data = data; 76 | this.drawImage(); 77 | return this; 78 | }; 79 | 80 | canvas.prototype.drawImage = function(){ 81 | var x = this._data[0].length, 82 | y = this._data[0][0].length; 83 | this._image = this._context.createImageData(x,y); 84 | 85 | if(this._data.length != this._nDColorMap.length){ 86 | alert("An equal number of data attributes and color bars is required"); 87 | return; 88 | } 89 | 90 | var r, g, b; 91 | for(var i = 0, p = -1; i < y; ++ i){ 92 | for(var j = 0; j < x; ++j){ 93 | r = 0, g = 0, b = 0; 94 | for(var k = 0; k < this._data.length; k++){ 95 | var d = d3.rgb(this._nDColorMap[k](this._data[k][j][i])); 96 | r = r + (d.r / 255); 97 | g = g + (d.g / 255); 98 | b = b + (d.b / 255); 99 | } 100 | this._image.data[++p] = r * 255; 101 | this._image.data[++p] = g * 255; 102 | this._image.data[++p] = b * 255; 103 | this._image.data[++p] = 255; 104 | } 105 | } 106 | this._context.putImageData(this._image, 0, 0); 107 | 108 | return this; 109 | }; 110 | 111 | g3.colorScale = { 112 | red_white_black: d3.scale.linear() 113 | .domain([0, 1]) 114 | .range([d3.rgb(255, 0, 0), d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)]), 115 | red_white_blue: d3.scale.linear() 116 | .domain([0, 1]) 117 | .range([d3.rgb(255, 0, 0), d3.rgb(255, 255, 255), d3.rgb(0, 0, 255)]), 118 | greyscale: d3.scale.linear() 119 | .domain([0, 1]) 120 | .range([d3.rgb(0, 0, 0), d3.rgb(127.5, 127.5, 127.5), d3.rgb(255, 255, 255)]), 121 | seismic: d3.scale.linear() 122 | .domain([0, 1]) 123 | .range([d3.rgb(0, 0, 76.5), d3.rgb(253, 253, 1.0), d3.rgb(127.5, 0, 0)]) 124 | }; 125 | 126 | g3.handle = {}; 127 | 128 | g3.handle.line = function(plot, x, y, x2, y2){ 129 | return new line(plot, x, y, x2, y2); 130 | }; 131 | 132 | // Constructor 133 | // Only set variables that are set by items passed in, otherwise set using prototype 134 | var line = function line(plot, x, y, x2, y2){ 135 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 136 | this._plot = plot; 137 | this._x = x; 138 | this._y = y; 139 | 140 | if(x2 === undefined){ 141 | this._x2 = x; 142 | } else { 143 | this._x2 = x2; 144 | } 145 | 146 | if(y2 === undefined){ 147 | this._y2 = y; 148 | } else { 149 | this._y2 = y2; 150 | } 151 | return this; 152 | }; 153 | 154 | line.prototype._strokeWidth = 30; 155 | line.prototype._stroke = "black"; 156 | line.prototype._cursor = "pointer"; 157 | line.prototype._opacity = 0; 158 | line.prototype._duration = 5; 159 | 160 | line.prototype.class = function(cl){ 161 | if(cl === undefined){ return this._class; } 162 | this._class = cl; 163 | return this; 164 | }; 165 | 166 | line.prototype.strokeWidth = function(strokeWidth){ 167 | if(strokeWidth === undefined){ return this._strokeWidth; } 168 | this._strokeWidth = strokeWidth; 169 | return this; 170 | }; 171 | 172 | line.prototype.stroke = function(color){ 173 | if(color === undefined){ return this._color; } 174 | this._color = color; 175 | return this; 176 | }; 177 | 178 | line.prototype.cursor = function(cursor){ 179 | if(cursor === undefined){ return this._cursor; } 180 | this._cursor = cursor; 181 | return this; 182 | }; 183 | 184 | line.prototype.opacity = function(opacity){ 185 | if(opacity === undefined){ return this._opacity; } 186 | this._opacity = opacity; 187 | return this; 188 | }; 189 | 190 | line.prototype.line = function(line){ 191 | if(line === undefined){ return this._line; } 192 | this._line = line; 193 | return this; 194 | }; 195 | 196 | line.prototype.draw = function(){ 197 | this._line = this._plot._svg.append('line') 198 | .attr('class', this._class) 199 | .style('stroke-width', this._strokeWidth) 200 | .style('stroke', this._stroke) 201 | .style('cursor', this._cursor) 202 | .style('opacity', this._opacity) 203 | .attr('x1', this._plot._xScale(this._x)) 204 | .attr('y1', this._plot._yScale(this._y)) 205 | .attr('x2', this._plot._xScale(this._x2)) 206 | .attr('y2', this._plot._yScale(this._y2)); 207 | return this; 208 | }; 209 | 210 | line.prototype.reDraw = function(x, y, x2, y2){ 211 | this._line 212 | .transition() 213 | .duration(this._duration) 214 | .attr('x1', this._plot._xScale(x)) 215 | .attr('y1', this._plot._yScale(y)) 216 | .attr('x2', this._plot._xScale(x2)) 217 | .attr('y2', this._plot._yScale(y2)); 218 | return this; 219 | }; 220 | 221 | 222 | 223 | 224 | // handle.circle code 225 | // var drag = d3.behavior.drag() // capture mouse drag event 226 | // .on('drag', oGCirRedraw); 227 | 228 | // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)]; 229 | // $scope.oGCir = $scope.oGPlot.svg.append('circle') 230 | // .attr("class", "ogcir") 231 | // .attr("r", 5) 232 | // .attr("cx", position[0]) 233 | // .attr("cy", position[1]) 234 | // .style("opacity", 0.5) 235 | // .call(drag); 236 | 237 | // $(".ogcir").mouseup(function(e){ 238 | // e.preventDefault(); 239 | // $scope.update_data(); 240 | // }); 241 | // } else { 242 | // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)]; 243 | // $scope.oGCir 244 | // .attr("cx", position[0]) 245 | // .attr("cy", position[1]); 246 | 247 | 248 | // function oGCirRedraw(){ 249 | // var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x)); 250 | // var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y)); 251 | 252 | // // Check to make sure we are within the boundaries 253 | // if(x < 0){ 254 | // x = 0; 255 | // } else if(x > $scope.data.offset_gather.length - 1) { 256 | // x = $scope.data.offset_gather.length - 1; 257 | // } 258 | 259 | // if(y < 0){ 260 | // y = 0; 261 | // } else if(y > $scope.data.seismic[0].length - 1){ 262 | // y = $scope.data.seismic[0].length - 1; 263 | // } 264 | 265 | // $scope.offsetStr = x.toString(); 266 | // $scope.twtStr = y.toString(); 267 | // $scope.changeOffsetStr(); 268 | // $scope.changeTWTStr(); 269 | // $scope.wGCir 270 | // .attr("cy", $scope.wGPlot.yScale($scope.twt)); 271 | // $scope.vDCir 272 | // .attr("cy", $scope.vDPlot.yScale($scope.twt)); 273 | // $scope.oGCir 274 | // .attr("cx", $scope.oGPlot.xScale($scope.offset)) 275 | // .attr("cy", $scope.oGPlot.yScale($scope.twt)); 276 | // }; 277 | 278 | // Register mouseup trigger for wgcir 279 | // $(".wgcir").mouseup(function(e){ 280 | // e.preventDefault(); 281 | // $scope.update_data(); 282 | // }); 283 | // Attach horizon creation function to g3 284 | g3.horizon = function(plot, data){ 285 | return new horizon(plot, data); 286 | }; 287 | 288 | // Constructor 289 | // Only set variables that are set by items passed in, otherwise set using prototype 290 | var horizon = function horizon(plot, data){ 291 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 292 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 293 | this._data = data; 294 | this._plot = plot; 295 | this._xMin = plot._xDomain[0]; 296 | this._yMin = plot._yDomain[0]; 297 | return this; 298 | }; 299 | 300 | // Set remaining variables 301 | horizon.prototype._xInt = 1; 302 | horizon.prototype._yInt = 1; 303 | horizon.prototype._duration = 5; 304 | horizon.prototype._gain = 1; 305 | horizon.prototype._interpolate = 'basis'; 306 | horizon.prototype._color = 'green'; 307 | horizon.prototype._strokeWidth = 1.5; 308 | horizon.prototype._opacity = 1; 309 | 310 | // Horizon Setting functions 311 | horizon.prototype.interpolate = function(interpolate){ 312 | if(interpolate === undefined){ return this._interpolate; } 313 | this._interpolate = interpolate; 314 | return this; 315 | }; 316 | 317 | horizon.prototype.xMin = function(xMin){ 318 | if(xMin === undefined){ return this._xMin; } 319 | this._xMin = xMin; 320 | return this; 321 | }; 322 | 323 | horizon.prototype.yMin = function(yMin){ 324 | if(yMin === undefined){ return this._yMin; } 325 | this._yMin = yMin; 326 | return this; 327 | }; 328 | 329 | horizon.prototype.xInt = function(xInt){ 330 | if(xInt === undefined){ return this._xInt; } 331 | this._xInt = xInt; 332 | return this; 333 | }; 334 | 335 | horizon.prototype.yInt = function(yInt){ 336 | if(yInt === undefined){ return this._yInt; } 337 | this._yInt = yInt; 338 | return this; 339 | }; 340 | 341 | horizon.prototype.duration = function(duration){ 342 | if(duration === undefined){ return this._duration; } 343 | this._duration = duration; 344 | return this; 345 | }; 346 | 347 | horizon.prototype.gain = function(gain){ 348 | if(gain === undefined){ return this._gain; } 349 | this._gain = gain; 350 | return this; 351 | }; 352 | 353 | horizon.prototype.color = function(color){ 354 | if(color === undefined){ return this._color; } 355 | this._color = color; 356 | return this; 357 | }; 358 | 359 | horizon.prototype.strokeWidth = function(strokeWidth){ 360 | if(strokeWidth === undefined){ return this._strokeWidth; } 361 | this._strokeWidth = strokeWidth; 362 | return this; 363 | }; 364 | 365 | horizon.prototype.opacity = function(opacity){ 366 | if(opacity === undefined){ return this._opacity; } 367 | this._opacity = opacity; 368 | return this; 369 | }; 370 | 371 | horizon.prototype.cursor = function(cursor){ 372 | if(cursor === undefined){ return this_cursor; } 373 | this._cursor = cursor; 374 | return this; 375 | }; 376 | 377 | horizon.prototype.lineFunc = function(){ 378 | var plot = this._plot, 379 | xMin = this._xMin, 380 | gain = this._gain, 381 | interpolate = this._interpolate; 382 | 383 | var lineFunc = d3.svg.line() 384 | .x(function (d, i){ 385 | return plot._xScale(i + xMin); 386 | }) 387 | .y( function (d) { 388 | return plot._yScale(d * gain); 389 | }) 390 | .interpolate(interpolate); 391 | 392 | return lineFunc; 393 | }; 394 | 395 | // Horizon Drawing functions 396 | horizon.prototype.draw = function() { 397 | var lineFunc = this.lineFunc(); 398 | this._svg = this._plot._svg.append('path') 399 | .attr('d', lineFunc(this._data)) 400 | .attr('stroke', this._color) 401 | .attr('stroke-width', this._strokeWidth) 402 | .style('opacity', this._opacity) 403 | .attr('fill', 'none'); 404 | 405 | if(this._cursor){ 406 | this._svg.style('cursor', this._cursor); 407 | } 408 | 409 | return this; 410 | }; 411 | 412 | horizon.prototype.reDraw = function(data){ 413 | var lineFunc = this.lineFunc(); 414 | 415 | this._svg.transition() 416 | .duration(this._duration) 417 | .attr('d', lineFunc(data)); 418 | return this; 419 | }; 420 | // Attach canvas creation function to g3 421 | g3.log = function(plot, data){ 422 | return new log(plot, data); 423 | }; 424 | 425 | // Constructor 426 | // Only set variables that are set by items passed in, otherwise set using prototype 427 | var log = function log(plot, data){ 428 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 429 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 430 | this._data = data; 431 | this._plot = plot; 432 | this._xMin = 0; 433 | this._yMin = 0; 434 | return this; 435 | }; 436 | 437 | // Set remaining variables 438 | log.prototype._xInt = 1; 439 | log.prototype._yInt = 1; 440 | log.prototype._color = "blue"; 441 | log.prototype._duration = 5; 442 | log.prototype._strokeWidth = 0.25; 443 | 444 | // Setters 445 | log.prototype.duration = function(duration){ 446 | if(duration === undefined){ return this._duration; } 447 | this._duration = duration; 448 | return this; 449 | }; 450 | 451 | log.prototype.xTrans = function(xMin){ 452 | if(xMin === undefined){ return this._xMin; } 453 | this._xMin = xMin; 454 | return this; 455 | }; 456 | 457 | log.prototype.xMult = function(xInt){ 458 | if(xInt === undefined){ return this._xInt; } 459 | this._xInt = xInt; 460 | return this; 461 | }; 462 | 463 | log.prototype.yTrans = function(yMin){ 464 | if(yMin === undefined){ return this._yMin; } 465 | this._yMin = yMin; 466 | return this; 467 | }; 468 | 469 | log.prototype.yMult = function(yInt){ 470 | if(yInt === undefined){ return this._yInt; } 471 | this._yInt = yInt; 472 | return this; 473 | }; 474 | 475 | log.prototype.color = function(color){ 476 | if(color === undefined){ return this._color; } 477 | this._color = color; 478 | return this; 479 | }; 480 | 481 | log.prototype.strokeWidth = function(strokeWidth){ 482 | if(strokeWidth === undefined){ return this._strokeWidth; } 483 | this._strokeWidth = strokeWidth; 484 | return this; 485 | }; 486 | 487 | log.prototype.draw = function(){ 488 | var lineFunc = this.lineFunc(); 489 | this._svg = this._plot._svg.append('path') 490 | .datum(this._data) 491 | .attr('d', lineFunc) 492 | .attr('stroke', this._color) 493 | .attr('stroke-width', this._strokeWidth) 494 | .attr('fill', 'none'); 495 | return this; 496 | }; 497 | 498 | log.prototype.reDraw = function(data){ 499 | var lineFunc = this.lineFunc(); 500 | this._svg.transition() 501 | .duration(this._duration) 502 | .attr('d', lineFunc(data)) 503 | .ease('linear'); 504 | return this; 505 | }; 506 | 507 | log.prototype.lineFunc = function(){ 508 | var plot = this._plot, 509 | yInt = this._yInt, 510 | yMin = this._yMin, 511 | xInt = this._xInt, 512 | xMin = this._xMin, 513 | interpolate = this._interpolate; 514 | 515 | return d3.svg.line() 516 | .x(function (d) { 517 | return plot._xScale(d * xInt + xMin); 518 | }) 519 | .y(function (d, i){ 520 | return plot._yScale(i * yInt + yMin); 521 | }) 522 | .interpolate(interpolate); 523 | }; 524 | 525 | // // Attach line creation function to g3.log 526 | // g3.log.line = function(plot, data){ 527 | // return new line(plot, data); 528 | // }; 529 | 530 | // // Constructor 531 | // // Only set variables that are set by items passed in, otherwise set using prototype 532 | // var line = function line(plot, data){ 533 | // if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 534 | // if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 535 | // this._data = data; 536 | // this._plot = plot; 537 | // this._xTrans = 0; 538 | // this._yTrans = 0; 539 | // return this; 540 | // }; 541 | 542 | // // Set remaining variables 543 | // line.prototype._xTrans = 1; 544 | // line.prototype._yTrans = 1; 545 | // line.prototype._color = "blue"; 546 | // line.prototype._duration = 5; 547 | // line.prototype._strokeWidth = 0.25; 548 | 549 | // // Setters 550 | // line.prototype.duration = function(duration){ 551 | // if(duration === undefined){ return this._duration; } 552 | // this._duration = duration; 553 | // return this; 554 | // }; 555 | 556 | // line.prototype.xTrans = function(xTrans){ 557 | // if(xTrans === undefined){ return this._xTrans; } 558 | // this._xTrans = xTrans; 559 | // return this; 560 | // }; 561 | 562 | // line.prototype.xMult = function(xMult){ 563 | // if(xMult === undefined){ return this._xMult; } 564 | // this._xMult = xMult; 565 | // return this; 566 | // }; 567 | 568 | // line.prototype.yTrans = function(yTrans){ 569 | // if(yTrans === undefined){ return this._yTrans; } 570 | // this._yTrans = yTrans; 571 | // return this; 572 | // }; 573 | 574 | // line.prototype.yMult = function(yMult){ 575 | // if(yMult === undefined){ return this._yMult; } 576 | // this._yMult = yMult; 577 | // return this; 578 | // }; 579 | 580 | // line.prototype.color = function(color){ 581 | // if(color === undefined){ return this._color; } 582 | // this._color = color; 583 | // return this; 584 | // }; 585 | 586 | // line.prototype.strokeWidth = function(strokeWidth){ 587 | // if(strokeWidth === undefined){ return this._strokeWidth; } 588 | // this._strokeWidth = strokeWidth; 589 | // return this; 590 | // }; 591 | 592 | // line.prototype.draw = function(){ 593 | // var lineFunc = this.lineFunc(); 594 | // this._svg = this._plot._svg.append('path') 595 | // .datum(this._data) 596 | // .attr('d', lineFunc) 597 | // .attr('stroke', this._color) 598 | // .attr('stroke-width', this._strokeWidth) 599 | // .attr('fill', 'none'); 600 | // return this; 601 | // }; 602 | 603 | // line.prototype.reDraw = function(data){ 604 | // var lineFunc = this.lineFunc(); 605 | // this._svg.transition() 606 | // .duration(this._duration) 607 | // .attr('d', lineFunc(data)) 608 | // .ease('linear'); 609 | // return this; 610 | // }; 611 | 612 | // line.prototype.lineFunc = function(){ 613 | // var plot = this._plot, 614 | // yMult = this._yMult, 615 | // yTrans = this._yTrans, 616 | // xMult = this._xMult, 617 | // xTrans = this._xTrans, 618 | // interpolate = this._interpolate; 619 | 620 | // return d3.svg.line() 621 | // .x(function (d) { 622 | // return plot._xScale(d * xMult + xTrans); 623 | // }) 624 | // .y(function (d, i){ 625 | // return plot._yScale(i * yMult + yTrans); 626 | // }) 627 | // .interpolate(interpolate); 628 | // }; 629 | 630 | // // Attach vd creation function to g3.log 631 | // g3.log.vd = function(plot, data, data1){ 632 | // return new vd(plot, data); 633 | // }; 634 | 635 | // // Constructor 636 | // // Only set variables that are set by items passed in, otherwise set using prototype 637 | // var vd = function vd(plot, data, data1){ 638 | // if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 639 | // if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 640 | // this._data = data; 641 | // if(!data1){ this._data1 = data; } 642 | // this._plot = plot; 643 | // this._xTrans = 0; 644 | // this._yTrans = 0; 645 | // return this; 646 | // }; 647 | 648 | // // Set remaining variables 649 | // vd.prototype._xMult = 1; 650 | // vd.prototype._yMult = 1; 651 | // vd.prototype._duration = 5; 652 | // vd.prototype._strokeWidth = 0.25; 653 | // vd.prototype._barHeight = this._plot._height / (this._data1.length - 2); 654 | // vd.prototype._max = d3.max(this._data1); 655 | 656 | // // Default Color Scale 657 | // if(vd._colorScale === undefined){ 658 | // vd.prototype._colorScale = function(){ 659 | // return d3.scale.linear() 660 | // .domain([-this._max, 0, this._max]) 661 | // .range(['#FF0000', '#FFFFFF', '#0000FF']); 662 | // }; 663 | // } 664 | 665 | // // Setters 666 | // vd.prototype.duration = function(duration){ 667 | // if(duration === undefined){ return this._duration; } 668 | // this._duration = duration; 669 | // return this; 670 | // }; 671 | 672 | // vd.prototype.xTrans = function(xTrans){ 673 | // if(xTrans === undefined){ return this._xTrans; } 674 | // this._xTrans = xTrans; 675 | // return this; 676 | // }; 677 | 678 | // vd.prototype.xMult = function(xMult){ 679 | // if(xMult === undefined){ return this._xMult; } 680 | // this._xMult = xMult; 681 | // return this; 682 | // }; 683 | 684 | // vd.prototype.yTrans = function(yTrans){ 685 | // if(yTrans === undefined){ return this._yTrans; } 686 | // this._yTrans = yTrans; 687 | // return this; 688 | // }; 689 | 690 | // vd.prototype.yMult = function(yMult){ 691 | // if(yMult === undefined){ return this._yMult; } 692 | // this._yMult = yMult; 693 | // return this; 694 | // }; 695 | 696 | // vd.prototype.colorScale = function(color){ 697 | // if(color === undefined){ return this._color; } 698 | // this._color = color; 699 | // return this; 700 | // }; 701 | 702 | // vd.prototype.strokeWidth = function(strokeWidth){ 703 | // if(strokeWidth === undefined){ return this._strokeWidth; } 704 | // this._strokeWidth = strokeWidth; 705 | // return this; 706 | // }; 707 | 708 | // vd.prototype.barHeight = function(barHeight){ 709 | // if(barHeight === undefined){ return this._barHeight; } 710 | // this._barHeight = barHeight; 711 | // return this; 712 | // }; 713 | 714 | // vd.prototype.draw = function(){ 715 | // var barHeight = 600 / (posdata.length - 2); 716 | // var bar = logPlot._svg.selectAll("rect") 717 | // .data(posdata.slice(0, posdata.length - 1)) 718 | // .enter().append("rect") 719 | // .attr("transform", function(d, i) { return "translate(0," + (logPlot._yScale(i)) + ")"; }) 720 | // .attr("width", function(d) { return logPlot._width; }) 721 | // .attr("height", barHeight) 722 | // .attr('fill', function(d){ return colorScale(d);}); 723 | 724 | // var area = d3.svg.area() 725 | // .x(function(d) { return logPlot._xScale(d); }) 726 | // .x1(logPlot._width) 727 | // .y1(logPlot._height) 728 | // .y(function(d, i) { return logPlot._yScale(i); }); 729 | 730 | // logPlot._svg.append("path") 731 | // .datum(arr2) 732 | // .attr('transform', function(d, i) { return "translate(0," + logPlot._yScale(i) + ")";}) 733 | // .attr("class", "area") 734 | // .attr("stroke", "black") 735 | // .attr("stroke-width", 0.5) 736 | // .attr("fill", 'white') 737 | // .attr("d", area); 738 | // return this; 739 | // }; 740 | 741 | // vd.prototype.reDraw = function(data){ 742 | // return this; 743 | // }; 744 | // Attach horizon creation function to g3 745 | g3.plot = function(elem){ 746 | return new plot(elem); 747 | }; 748 | 749 | // Constructor 750 | // Only variables that are by items passed in, otherwise using prototype 751 | var plot = function plot(elem){ 752 | if(!elem){ return 'Param: elem is missing. A div to attach to is required'; } 753 | this._elem = elem; 754 | this._margin = {top: 30, right: 30, bottom: 30, left: 30}; 755 | this._width = $(this._elem).width() - this._margin.left - this._margin.right; 756 | return this; 757 | }; 758 | 759 | // Defaults 760 | plot.prototype._height = 800; 761 | // plot.prototype._margin = {top: 30, right: 30} 762 | plot.prototype._xDomain = [0,0]; 763 | plot.prototype._yDomain = [0,0]; 764 | plot.prototype._xAxisVisible = true; 765 | plot.prototype._yAxisVisible = true; 766 | plot.prototype._x2AxisVisible = true; 767 | plot.prototype._y2AxisVisible = true; 768 | plot.prototype._xOrient = 'top'; 769 | plot.prototype._x2Orient = 'bottom'; 770 | plot.prototype._yOrient = 'left'; 771 | plot.prototype._y2Orient = 'right'; 772 | plot.prototype._duration = 5; 773 | 774 | // Setters 775 | plot.prototype.duration = function(duration){ 776 | if(duration === undefined){ return this._duration; } 777 | this._duration = duration; 778 | return this; 779 | }; 780 | 781 | plot.prototype.margin = function(top, right, bottom, left){ 782 | if(top === undefined){ return this._margin; } 783 | this._margin = {top: top, right: right, bottom: bottom, left: left}; 784 | return this; 785 | }; 786 | 787 | plot.prototype.width = function(width){ 788 | if(width === undefined){ return this._width; } 789 | this._width = width; 790 | return this; 791 | }; 792 | 793 | plot.prototype.height = function(height){ 794 | if(height === undefined){ return this._height; } 795 | this._height = height; 796 | return this; 797 | }; 798 | 799 | plot.prototype.xDomain = function(domain){ 800 | if(domain === undefined){ return this._xDomain; } 801 | this._xDomain = domain; 802 | return this; 803 | }; 804 | 805 | plot.prototype.yDomain = function(domain){ 806 | if(domain === undefined){ return this._yDomain; } 807 | this._yDomain = domain; 808 | return this; 809 | }; 810 | 811 | plot.prototype.y2Domain = function(domain){ 812 | if(domain === undefined){ return this._y2Domain; } 813 | this._x2Domain = domain; 814 | return this; 815 | }; 816 | 817 | plot.prototype.y2Domain = function(domain){ 818 | if(domain === undefined){ return this._y2Domain; } 819 | this._y2Domain = domain; 820 | return this; 821 | }; 822 | 823 | plot.prototype.toggleXAxis = function(bool){ 824 | if(bool === undefined){ return this._xAxisVisible; } 825 | this._xAxisVisible = bool; 826 | return this; 827 | }; 828 | 829 | plot.prototype.toggleX2Axis = function(bool){ 830 | if(bool === undefined){ return this._x2AxisVisible; } 831 | this._x2AxisVisible = bool; 832 | return this; 833 | }; 834 | 835 | plot.prototype.toggleYAxis = function(bool){ 836 | if(bool === undefined){ return this._yAxisVisible; } 837 | this._yAxisVisible = bool; 838 | return this; 839 | }; 840 | 841 | plot.prototype.toggleY2Axis = function(bool){ 842 | if(bool === undefined){ return this._y2AxisVisible; } 843 | this._y2AxisVisible = bool; 844 | return this; 845 | }; 846 | 847 | plot.prototype.xTicks = function(ticks){ 848 | if(ticks === undefined){ return this._xTicks; } 849 | this._xTicks = ticks; 850 | return this; 851 | }; 852 | 853 | plot.prototype.yTicks = function(ticks){ 854 | if(ticks === undefined){ return this._yTicks; } 855 | this._yTicks = ticks; 856 | return this; 857 | }; 858 | 859 | plot.prototype.x2Ticks = function(ticks){ 860 | if(ticks === undefined){ return this._x2Ticks; } 861 | this._x2Ticks = ticks; 862 | return this; 863 | }; 864 | 865 | plot.prototype.y2Ticks = function(ticks){ 866 | if(ticks === undefined){ return this._y2Ticks; } 867 | this._y2Ticks = ticks; 868 | return this; 869 | }; 870 | 871 | plot.prototype.xTitle = function(title){ 872 | if(title === undefined){ return this._yTitle; } 873 | this._xTitle = title; 874 | return this; 875 | }; 876 | 877 | plot.prototype.yTitle = function(title){ 878 | if(title === undefined){ return this._yTitle; } 879 | this._yTitle = title; 880 | return this; 881 | }; 882 | 883 | plot.prototype.y2Title = function(title){ 884 | if(title === undefined){ return this._y2Title; } 885 | this._y2Title = title; 886 | return this; 887 | }; 888 | 889 | plot.prototype.x2Title = function(title){ 890 | if(title === undefined){ return this._x2Title; } 891 | this._x2Title = title; 892 | return this; 893 | }; 894 | 895 | plot.prototype.xOrient = function(orient){ 896 | if(orient === undefined){ return this._xOrient; } 897 | this._xOrient = orient; 898 | return this; 899 | }; 900 | 901 | plot.prototype.x2Orient = function(orient){ 902 | if(orient === undefined){ return this._x2Orient; } 903 | this._x2Orient = orient; 904 | return this; 905 | }; 906 | 907 | plot.prototype.yOrient = function(orient){ 908 | if(orient === undefined){ return this._yOrient; } 909 | this._yOrient = orient; 910 | return this; 911 | }; 912 | 913 | plot.prototype.y2Orient = function(orient){ 914 | if(orient === undefined){ return this._y2Orient; } 915 | this._y2Orient = orient; 916 | return this; 917 | }; 918 | 919 | plot.prototype.xTickFormat = function(format){ 920 | if(format === undefined){ return this._xTickFormat; } 921 | this._xTickFormat = format; 922 | return this; 923 | }; 924 | 925 | plot.prototype.yTickFormat = function(format){ 926 | if(format === undefined){ return this._yTickFormat; } 927 | this._yTickFormat = format; 928 | return this; 929 | }; 930 | 931 | plot.prototype.x2TickFormat = function(format){ 932 | if(format === undefined){ return this._x2TickFormat; } 933 | this._x2TickFormat = format; 934 | return this; 935 | }; 936 | 937 | plot.prototype.y2TickFormat = function(format){ 938 | if(format === undefined){ return this._y2TickFormat; } 939 | this._y2TickFormat = format; 940 | return this; 941 | }; 942 | 943 | plot.prototype.xScale = function(scale){ 944 | if(scale === undefined){ return this._xScale; } 945 | this._xScale = scale; 946 | return this; 947 | }; 948 | 949 | plot.prototype.x2Scale = function(scale){ 950 | if(scale === undefined){ return this._x2Scale; } 951 | this._x2Scale = scale; 952 | return this; 953 | }; 954 | 955 | plot.prototype.yScale = function(scale){ 956 | if(scale === undefined){ return this._yScale; } 957 | this._yScale = scale; 958 | return this; 959 | }; 960 | 961 | plot.prototype.y2Scale = function(scale){ 962 | if(scale === undefined){ return this._y2Scale; } 963 | this._y2Scale = scale; 964 | return this; 965 | }; 966 | 967 | plot.prototype.svg = function(svg){ 968 | if(svg === undefined){ return this._svg; } 969 | this._svg = svg; 970 | return this; 971 | }; 972 | 973 | plot.prototype.createSVG = function(){ 974 | // Append svg object to dom element 975 | return d3.select(this._elem).append('svg') 976 | .attr('class', 'log_plot') 977 | .attr('width', this._width + this._margin.right + this._margin.left) 978 | .attr('height', this._height + this._margin.bottom + this._margin.top) 979 | .append('g') 980 | .attr('height', this.height) 981 | .attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')'); 982 | }; 983 | 984 | plot.prototype.setScales = function(){ 985 | this._xScale = d3.scale.linear() 986 | .domain(this._xDomain) 987 | .range([0, this._width]); 988 | 989 | this._yScale = d3.scale.linear() 990 | .domain(this._yDomain) 991 | .range([0, this._height]); 992 | 993 | if(this._x2Domain === undefined){ 994 | this._x2Domain = this._xDomain; 995 | } 996 | this._x2Scale = d3.scale.linear() 997 | .domain(this._x2Domain) 998 | .range([0, this._width]); 999 | 1000 | if(this._y2Domain === undefined){ 1001 | this._y2Domain = this._yDomain; 1002 | } 1003 | this._y2Scale = d3.scale.linear() 1004 | .domain(this._y2Domain) 1005 | .range([0, this._height]); 1006 | }; 1007 | 1008 | plot.prototype.createAxis = function(scale, innerTickSize, orient, ticks){ 1009 | return d3.svg.axis() 1010 | .scale(scale) 1011 | .innerTickSize(innerTickSize) 1012 | .outerTickSize(3) 1013 | .tickPadding(5) 1014 | .orient(orient) 1015 | .ticks(ticks); 1016 | }; 1017 | 1018 | plot.prototype.setAxis = function(){ 1019 | if(this._xAxisVisible){ 1020 | this._xAxis = this.createAxis(this._xScale, -this._height, this._xOrient, this._xTicks); 1021 | this._xAxis.tickFormat(this._xTickFormat); 1022 | this._svg.append('g') 1023 | .attr('class', 'x axis') 1024 | .call(this._xAxis); 1025 | } 1026 | if(this._yAxisVisible){ 1027 | this._yAxis = this.createAxis(this._yScale, -this._width, this._yOrient, this._yTicks); 1028 | this._yAxis.tickFormat(this._yTickFormat); 1029 | this._svg.append('g') 1030 | .attr('class', 'y axis') 1031 | .call(this._yAxis); 1032 | } 1033 | if(this._x2AxisVisible){ 1034 | this._x2Axis = this.createAxis(this._x2Scale, -this._height, this._x2Orient, this._x2Ticks); 1035 | this._x2Axis.tickFormat(this._x2TickFormat); 1036 | this._svg.append('g') 1037 | .attr('class', 'x2 axis') 1038 | .attr("transform", "translate(" + "0," + this._height + ")") 1039 | .call(this._x2Axis); 1040 | } 1041 | if(this._y2AxisVisible){ 1042 | this._y2Axis = this.createAxis(this._y2Scale, -this._width, this._y2Orient, this._y2Ticks); 1043 | this._y2Axis.tickFormat(this._y2TickFormat); 1044 | this._svg.append('g') 1045 | .attr('class', 'y2 axis') 1046 | .attr("transform", "translate(" + this._width + ",0)") 1047 | .call(this._y2Axis); 1048 | } 1049 | }; 1050 | 1051 | plot.prototype.setTitles = function(){ 1052 | if(this._xTitle){ 1053 | if(this._xTickFormat === ""){ 1054 | var margin = -10; 1055 | } else { 1056 | var margin = -30; 1057 | } 1058 | this._svg.append("text") 1059 | .attr("x", (this._width) / 2) 1060 | .attr("y", margin) 1061 | .style("text-anchor", "middle") 1062 | .style("font-size", 12) 1063 | .text(this._xTitle); 1064 | } 1065 | 1066 | if(this._yTitle){ 1067 | if(this._yTickFormat === ""){ 1068 | var yMargin = -10; 1069 | } else { 1070 | var yMargin = -40; 1071 | } 1072 | 1073 | this._svg.append("text") 1074 | .attr("transform", "rotate(-90)") 1075 | .attr("y", yMargin) 1076 | .attr("dy", "1em") 1077 | .style("text-anchor", "end") 1078 | .style("font-size", 12) 1079 | .text(this._yTitle); 1080 | } 1081 | 1082 | if(this._x2Title){ 1083 | if(this._x2TickFormat === ""){ 1084 | var margin = 10; 1085 | } else { 1086 | var margin = 30; 1087 | } 1088 | 1089 | this._svg.append("text") 1090 | .attr("transform", "translate(" + "0," + this._height + ")") 1091 | .attr("x", (this._width) / 2) 1092 | .attr("y", margin) 1093 | .style("text-anchor", "middle") 1094 | .style("font-size", 12) 1095 | .text(this._x2Title); 1096 | } 1097 | 1098 | if(this._y2Title){ 1099 | if(this._yTickFormat === ""){ 1100 | var yMargin = -10; 1101 | } else { 1102 | var yMargin = -40; 1103 | } 1104 | 1105 | this._svg.append("text") 1106 | .attr("transform", "translate(" + "0," + this._height + ")") 1107 | .attr("y", yMargin) 1108 | .attr("dy", "1em") 1109 | .style("text-anchor", "end") 1110 | .style("font-size", 12) 1111 | .text(this._y2Title); 1112 | } 1113 | }; 1114 | 1115 | plot.prototype.draw = function() { 1116 | this.setScales(); 1117 | this._svg = this.createSVG(); 1118 | this.setAxis(); 1119 | this.setTitles(); 1120 | return this; 1121 | }; 1122 | 1123 | plot.prototype.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){ 1124 | if(xDomain){ 1125 | this._xScale.domain(xDomain); 1126 | this._svg.select('.x.axis') 1127 | .transition() 1128 | .duration(this._duration) 1129 | .call(this._xAxis) 1130 | .ease('linear'); 1131 | } 1132 | 1133 | if(yDomain){ 1134 | this._yScale.domain(yDomain); 1135 | this._svg.select('.y.axis') 1136 | .transition() 1137 | .duration(this._duration) 1138 | .call(this._yAxis) 1139 | .ease('linear'); 1140 | } 1141 | 1142 | if(x2Domain === undefined){ 1143 | x2Domain = xDomain; 1144 | } 1145 | if(x2Domain){ 1146 | this._x2Scale.domain(x2Domain); 1147 | this._svg.select('.x2.axis') 1148 | .transition() 1149 | .duration(this._duration) 1150 | .call(this._x2Axis) 1151 | .ease('linear'); 1152 | } 1153 | 1154 | if(y2Domain === undefined){ 1155 | y2Domain = yDomain; 1156 | } 1157 | if(y2Domain){ 1158 | this._y2Scale.domain(y2Domain); 1159 | this._svg.select('.y2.axis') 1160 | .transition() 1161 | .duration(this._duration) 1162 | .call(this._y2Axis) 1163 | .ease('linear'); 1164 | } 1165 | }; 1166 | 1167 | g3.scale = {}; 1168 | 1169 | 1170 | 1171 | g3.scale.rgb = function(){ 1172 | return new rgb(); 1173 | }; 1174 | 1175 | var rgb = function(){ 1176 | var _domain = [[0, 1], [0, 1], [0, 1]], 1177 | _range = [[0, 255], [0, 255], [0, 255]]; 1178 | 1179 | function rgbScale(r, g, b){ 1180 | var rScale = d3.scale.linear().domain(_domain[0]).range(_range[0]); 1181 | var gScale = d3.scale.linear().domain(_domain[1]).range(_range[1]); 1182 | var bScale = d3.scale.linear().domain(_domain[2]).range(_range[2]); 1183 | return d3.rgb(rScale(r), gScale(g), bScale(b)); 1184 | } 1185 | 1186 | rgbScale.domain = function(domain){ 1187 | if(domain === undefined){ return _domain; } 1188 | _domain = domain; 1189 | return rgbScale; 1190 | }; 1191 | 1192 | rgbScale.range = function(range){ 1193 | if(range === undefined){ return _range; } 1194 | _range = range; 1195 | return rgbScale; 1196 | } 1197 | return rgbScale; 1198 | }; 1199 | 1200 | 1201 | 1202 | // Attach canvas creation function to g3 1203 | g3.scatter = function(plot, data){ 1204 | return new scatter(plot, data); 1205 | }; 1206 | 1207 | // Constructor 1208 | // Only set variables that are set by items passed in, otherwise set using prototype 1209 | var scatter = function scatter(plot, data){ 1210 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 1211 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 1212 | this._data = data; 1213 | this._plot = plot; 1214 | 1215 | this._colorScale = d3.scale.linear() 1216 | .domain([d3.min(this._data), d3.max(this._data)]) 1217 | .range([d3.rgb(255, 0, 0), d3.rgb(0, 255, 0), d3.rgb(0, 0, 255)]); 1218 | 1219 | this._radiusScale = d3.scale.linear() 1220 | .domain([d3.min(this._data), d3.max(this._data)]) 1221 | .range([1, 5]); 1222 | return this; 1223 | }; 1224 | 1225 | // Set remaining variables 1226 | scatter.prototype._xMult = 1; 1227 | scatter.prototype._yMult = 1; 1228 | scatter.prototype._xTrans = 0; 1229 | scatter.prototype._yTrans = 0; 1230 | 1231 | scatter.prototype.xMult = function(xMult){ 1232 | if(xMult === undefined){ return this._xMult; } 1233 | this._xMult = xMult; 1234 | return this; 1235 | }; 1236 | 1237 | scatter.prototype.yMult = function(yMult){ 1238 | if(yMult === undefined){ return this._yMult; } 1239 | this._yMult = yMult; 1240 | return this; 1241 | }; 1242 | 1243 | scatter.prototype.xTrans = function(xTrans){ 1244 | if(xTrans === undefined){ return this._xTrans; } 1245 | this._xTrans = xTrans; 1246 | return this; 1247 | }; 1248 | 1249 | scatter.prototype.yTrans = function(yTrans){ 1250 | if(yTrans === undefined){ return this._yTrans; } 1251 | this._yTrans = yTrans; 1252 | return this; 1253 | }; 1254 | 1255 | scatter.prototype.colorScale = function(colorScale){ 1256 | if(colorScale === undefined){ return this._colorScale; } 1257 | this._colorScale = colorScale; 1258 | return this; 1259 | }; 1260 | 1261 | scatter.prototype.radiusScale = function(radiusScale){ 1262 | if(radiusScale === undefined){ return this._radiusScale ; } 1263 | this._radiusScale = radiusScale; 1264 | return this; 1265 | }; 1266 | 1267 | scatter.prototype.draw = function(){ 1268 | var radius = this._radiusScale, 1269 | xMult = this._xMult, 1270 | yMult = this._yMult, 1271 | xTrans = this._xTrans, 1272 | yTrans = this._yTrans, 1273 | colorScale = this._colorScale, 1274 | xScale = this._plot._xScale, 1275 | yScale = this._plot._yScale; 1276 | 1277 | this._plot._svg.selectAll('.scatter') 1278 | .data(this._data) 1279 | .enter().append("circle") 1280 | .attr('class', 'scatter') 1281 | .attr('r', function(d) { return radius(d); }) 1282 | .attr('cx', function(d) { return xScale(d * xMult + xTrans); }) 1283 | .attr('cy', function(d, i) { return yScale(i * yMult + yTrans); }) 1284 | .style('stroke', 'black') 1285 | .style('fill', function(d) { return colorScale(d); }); 1286 | return this; 1287 | }; 1288 | 1289 | scatter.prototype.reDraw = function(data){ 1290 | var radius = this._radiusScale, 1291 | xMult = this._xMult, 1292 | yMult = this._yMult, 1293 | xTrans = this._xTrans, 1294 | yTrans = this._yTrans, 1295 | colorScale = this._colorScale, 1296 | xScale = this._plot._xScale, 1297 | yScale = this._plot._yScale; 1298 | 1299 | this._data = data; 1300 | this._plot._svg.selectAll('.scatter') 1301 | .data(data) 1302 | .transition() 1303 | .duration(500) 1304 | .attr('r', function(d) { return radius(d)}) 1305 | .attr('cx', function(d) { return xScale(d * xMult + xTrans); }) 1306 | .attr('cy', function(d, i) { return yScale(i * yMult + yTrans); }) 1307 | .style('fill', function(d) { return colorScale(d); }); 1308 | return this; 1309 | }; 1310 | 1311 | // Attach seismic creation function to g3 1312 | g3.seismic = function(plot, data){ 1313 | return new seismic(plot, data); 1314 | }; 1315 | 1316 | // Constructor 1317 | // Only set variables that are set by items passed in, otherwise set using prototype 1318 | var seismic = function seismic(plot, data){ 1319 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 1320 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 1321 | this._data = data; 1322 | this._plot = plot; 1323 | return this; 1324 | }; 1325 | 1326 | // Set remaining variables 1327 | seismic.prototype._max = 1; 1328 | seismic.prototype._gain = 1; 1329 | seismic.prototype._duration = 5; 1330 | 1331 | // Setters 1332 | seismic.prototype.nDColorMap = function(nDColorMap){ 1333 | if(nDColorMap === undefined){ return this._nDColorMap; } 1334 | this._nDColorMap = nDColorMap; 1335 | return this; 1336 | }; 1337 | 1338 | seismic.prototype.duration = function(duration){ 1339 | if(duration === undefined){ return this._duration; } 1340 | this._duration = duration; 1341 | return this; 1342 | }; 1343 | 1344 | seismic.prototype.gain = function(gain){ 1345 | if(gain === undefined){ return this._gain; } 1346 | this._gain = gain; 1347 | return this; 1348 | }; 1349 | 1350 | seismic.prototype.max = function(max){ 1351 | if(max === undefined){ return this._max; } 1352 | this._max = max; 1353 | return this; 1354 | }; 1355 | 1356 | // Draw method 1357 | seismic.prototype.draw = function(){ 1358 | this._canvas = g3.canvas(this._plot, this._data) 1359 | .gain(this._gain) 1360 | .nDColorMap(this._nDColorMap) 1361 | .draw(); 1362 | return this; 1363 | }; 1364 | 1365 | seismic.prototype.reDraw = function(data){ 1366 | this._canvas.gain(this._gain) 1367 | .nDColorMap(this._nDColorMap) 1368 | .reDraw(data); 1369 | }; 1370 | 1371 | // Attach horizon creation function to g3 1372 | g3.wiggle = function(plot, data){ 1373 | return new wiggle(plot, data); 1374 | }; 1375 | 1376 | // Constructor 1377 | // Only set variables that are set by items passed in, otherwise set using prototype 1378 | var wiggle = function wiggle(plot, data){ 1379 | if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; } 1380 | if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; } 1381 | this._data = data; 1382 | this._plot = plot; 1383 | this._xTrans = plot._xDomain[0]; 1384 | this._yTrans = plot._yDomain[0]; 1385 | this._rand = Math.floor((Math.random() * 100) + 100); 1386 | return this; 1387 | }; 1388 | 1389 | // Set defaults 1390 | wiggle.prototype._skip = 0; 1391 | wiggle.prototype._xMult = 1; 1392 | wiggle.prototype._yMult = 1; 1393 | wiggle.prototype._duration = 5; 1394 | wiggle.prototype._sampleRate = 1; 1395 | wiggle.prototype._strokeWidth = 0.5; 1396 | wiggle.prototype._color = 'black'; 1397 | wiggle.prototype._fillColor = 'black'; 1398 | wiggle.prototype._opacity = 0.4; 1399 | 1400 | wiggle.prototype.skip = function(skip){ 1401 | if(skip === undefined){ return this._skip; } 1402 | this._skip = skip; 1403 | return this; 1404 | }; 1405 | 1406 | wiggle.prototype.xTrans = function(xTrans){ 1407 | if(xTrans === undefined){ return this._xTrans; } 1408 | this._xTrans = xTrans; 1409 | return this; 1410 | }; 1411 | 1412 | wiggle.prototype.yTrans = function(yTrans){ 1413 | if(yTrans === undefined){ return this._yTrans; } 1414 | this._yTrans = yTrans; 1415 | return this; 1416 | }; 1417 | 1418 | wiggle.prototype.xMult = function(xMult){ 1419 | if(xMult === undefined){ return this._xMult; } 1420 | this._xMult = xMult; 1421 | return this; 1422 | }; 1423 | 1424 | wiggle.prototype.yMult = function(yMult){ 1425 | if(yMult === undefined){ return this._yMult; } 1426 | this._yMult = yMult; 1427 | return this; 1428 | }; 1429 | 1430 | wiggle.prototype.fillColor = function(color){ 1431 | if(color === undefined){ return this._fillColor; } 1432 | this._fillColor = color; 1433 | return this; 1434 | }; 1435 | 1436 | wiggle.prototype.color = function(color){ 1437 | if(color === undefined){ return this._color; } 1438 | this._color = color; 1439 | return this; 1440 | }; 1441 | 1442 | wiggle.prototype.strokeWidth = function(strokeWidth){ 1443 | if(strokeWidth === undefined){ return this._strokeWidth; } 1444 | this._strokeWidth = strokeWidth; 1445 | return this; 1446 | }; 1447 | 1448 | wiggle.prototype.sampleRate = function(sampleRate){ 1449 | if(sampleRate === undefined){ return this._sampleRate; } 1450 | this._sampleRate = sampleRate; 1451 | return this; 1452 | }; 1453 | 1454 | wiggle.prototype.duration = function(duration){ 1455 | if(duration === undefined){ return this._duration; } 1456 | this._duration = duration; 1457 | return this; 1458 | }; 1459 | 1460 | wiggle.prototype.opacity = function(opacity){ 1461 | if(opacity === undefined){ return this._opacity; } 1462 | this._opacity = opacity; 1463 | return this; 1464 | }; 1465 | 1466 | wiggle.prototype.lineFunc = function(k){ 1467 | var plot = this._plot, 1468 | xMult = this._xMult, 1469 | xTrans = this._xTrans, 1470 | sampleRate = this._sampleRate, 1471 | yMult = this._yMult, 1472 | yTrans = this._yTrans; 1473 | 1474 | return d3.svg.area() 1475 | .x(function (d) { 1476 | return plot._xScale(d * xMult + xTrans + k * sampleRate); 1477 | }) 1478 | .y(function (d, i){ 1479 | return plot._yScale(i * yMult + yTrans); 1480 | }) 1481 | .interpolate('basis'); 1482 | }; 1483 | 1484 | wiggle.prototype.areaFunc = function(k, mean){ 1485 | var plot = this._plot, 1486 | xMult = this._xMult, 1487 | xTrans = this._xTrans, 1488 | sampleRate = this._sampleRate, 1489 | yTrans = this._yTrans, 1490 | yMult = this._yMult; 1491 | 1492 | return d3.svg.area() 1493 | .x(function (d, i) { 1494 | return plot._xScale(mean * xMult + xTrans + k * sampleRate); 1495 | }) 1496 | .y(function (d, i){ 1497 | return plot._yScale(i * yMult + yTrans); 1498 | }) 1499 | .interpolate('basis'); 1500 | }; 1501 | 1502 | wiggle.prototype.draw = function() { 1503 | for(var k = this._data.length - 1; k >= 0; k--){ 1504 | if(this._skip === 0 || k % this._skip === 0){ 1505 | var mean = d3.mean(this._data[k]); 1506 | 1507 | // Line function 1508 | var line = this.lineFunc(k); 1509 | var area = this.areaFunc(k, mean); 1510 | 1511 | this._plot._svg.datum(this._data[k]); 1512 | 1513 | this._plot._svg.append('clipPath') 1514 | .attr('id', 'clip-below' + this._rand + k) 1515 | .append('path') 1516 | .attr('d', area.x0(this._plot._width)); 1517 | 1518 | var plot = this._plot, 1519 | xMult = this._xMult, 1520 | xTrans = this._xTrans, 1521 | sampleRate = this._sampleRate; 1522 | 1523 | this._plot._svg.append('path') 1524 | .attr('id', 'area-below' + k) 1525 | .attr('clip-path', 'url(#clip-below' + this._rand + k) 1526 | .attr('fill', this._fillColor) 1527 | .style('opacity', this._opacity) 1528 | .attr('d', area.x0(function (d, i){ 1529 | return plot._xScale(d * xMult + xTrans + k * sampleRate); 1530 | })); 1531 | 1532 | this._plot._svg.append('path') 1533 | .attr('class', 'line' + k) 1534 | .attr('d', line(this._data[k])) 1535 | .attr('stroke', this._color) 1536 | .attr('stroke-width', this._strokeWidth) 1537 | .attr('fill', 'none'); 1538 | } 1539 | } 1540 | return this; 1541 | }; 1542 | 1543 | wiggle.prototype.reDraw = function(data, xDomain, yDomain){ 1544 | 1545 | // Redraw the Axis 1546 | this._plot._xScale.domain(xDomain); 1547 | this._plot._yScale.domain(yDomain); 1548 | 1549 | this._plot._svg.select('.x.axis') 1550 | .transition() 1551 | .duration(this._duration) 1552 | .call(this._plot._xAxis) 1553 | .selectAll("text"); 1554 | 1555 | this._plot._svg.select('.y.axis') 1556 | .transition() 1557 | .duration(this._duration) 1558 | .call(this._plot._yAxis); 1559 | 1560 | for(var k = data.length - 1; k >= 0; k--){ 1561 | if(this._skip === 0 || k % this._skip === 0){ 1562 | var mean = d3.mean(data[k]); 1563 | 1564 | this._plot._svg.select("#clip-below" + this._rand + k) 1565 | .remove() 1566 | 1567 | var line = this.lineFunc(k); 1568 | var area = this.areaFunc(k, mean); 1569 | 1570 | this._plot._svg.select(".line" + k) 1571 | .transition() 1572 | .duration(this._duration) 1573 | .attr('d', line(data[k])) 1574 | .ease("linear"); 1575 | 1576 | this._plot._svg.datum(data[k]); 1577 | 1578 | this._plot._svg.append('clipPath') 1579 | .attr('id', 'clip-below' + this._rand + k) 1580 | .append('path') 1581 | .attr('d', area.x0(this._plot._width)); 1582 | 1583 | var plot = this._plot, 1584 | xMult = this._xMult, 1585 | xTrans = this._xTrans, 1586 | sampleRate = this._sampleRate; 1587 | 1588 | this._plot._svg.select("#area-below" + k) 1589 | .attr('clip-path', 'url(#clip-below' + this._rand + k) 1590 | .transition() 1591 | .duration(this._duration) 1592 | .attr('d', area.x0(function (d, i){ 1593 | return plot._xScale(d * xMult + xTrans + k * sampleRate); 1594 | })) 1595 | .ease('linear'); 1596 | } 1597 | } 1598 | return this; 1599 | }; 1600 | } (window)); 1601 | --------------------------------------------------------------------------------