d3 scatterplot-datalet

mwasiluk
1 parent 36f11711
Showing 17 changed files with 840 additions and 3 deletions
bower_components/d3-scatterplot/.bower.json
bower_components/d3-scatterplot/LICENSE
bower_components/d3-scatterplot/README.md
bower_components/d3-scatterplot/bower.json
bower_components/d3-scatterplot/demo/demo.js
bower_components/d3-scatterplot/demo/index.html
bower_components/d3-scatterplot/dist/d3-scatterplot.css
bower_components/d3-scatterplot/dist/d3-scatterplot.js
bower_components/d3-scatterplot/dist/d3-scatterplot.min.css
bower_components/d3-scatterplot/dist/d3-scatterplot.min.js
bower_components/d3-scatterplot/gulpfile.js
bower_components/d3-scatterplot/package.json
bower_components/d3-scatterplot/src/d3-scatterplot-utils.js
bower_components/d3-scatterplot/src/d3-scatterplot.js
bower_components/d3-scatterplot/styles/d3-scatterplot.scss
datalets/scatterplot-datalet/demo/index.html
datalets/scatterplot-datalet/scatterplot-datalet.html
+{
+  "name": "d3-scatterplot",
+  "homepage": "https://github.com/mwasiluk/d3-scatterplot",
+  "authors": [
+    "Michal Wasiluk"
+  ],
+  "description": "",
+  "main": "",
+  "keywords": [
+    "scatterplot",
+    "d3"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "d3": "^3.5.17"
+  },
+  "version": "1.1.0",
+  "_release": "1.1.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.1.0",
+    "commit": "9b30b60eb35b60c7c8c83cd86107a27cae0b9db9"
+  },
+  "_source": "https://github.com/mwasiluk/d3-scatterplot.git",
+  "_target": "^1.0.0",
+  "_originalSource": "d3-scatterplot"
+}
 \ No newline at end of file
+The MIT License (MIT)
+
+Copyright (c) 2016 Michał
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+# d3-scatterplot
+
+<img src="http://routetopa.eu/wp-content/uploads/2015/06/eu-flag.jpg" width="22">
+This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 645860.
+
+{
+  "name": "d3-scatterplot",
+  "homepage": "https://github.com/mwasiluk/d3-scatterplot",
+  "authors": [
+    "Michal Wasiluk"
+  ],
+  "description": "",
+  "main": "",
+  "keywords": [
+    "scatterplot",
+    "d3"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "d3": "^3.5.17"
+  }
+}
+var conf = {
+    // width: 500,
+    // height: 500,
+    dot:{
+        // color: 'red'
+    }
+};
+var data = [
+    [1,2],
+    [2,3],
+    [3,4],
+    [6,4],
+    [11,3],
+    [1,3.5],
+    [7,4],
+    [5,4]
+
+];
+var plot = new D3ScatterPlot("#scatterplot", data, conf);
+plot.init();
 \ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>D3 scatterplot demo</title>
+    <link rel="stylesheet" href="../dist/d3-scatterplot.css">
+</head>
+<body>
+<h1>D3 scatterplot demo</h1>
+
+<div id="scatterplot" style="width:auto; min-height:500px;"></div>
+
+<script src="../bower_components/d3/d3.min.js" charset="utf-8"></script>
+<script src="../dist/d3-scatterplot.js" charset="utf-8"></script>
+<script src="demo.js"></script>
+</body>
+</html>
 \ No newline at end of file
+svg.mw-d3-scatterplot {
+  background-color: white;
+  font-size: 11px;
+  height: 100%; }
+  svg.mw-d3-scatterplot .mw-axis path, svg.mw-d3-scatterplot .mw-axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges; }
+function D3ScatterPlotUtils(){}
+
+// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
+D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
+
+    var utils =this;
+    out = out || {};
+
+    for (var i = 1; i < arguments.length; i++) {
+        var obj = arguments[i];
+
+        if (!obj)
+            continue;
+
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (typeof obj[key] === 'object')
+                    out[key] = utils.deepExtend(out[key], obj[key]);
+                else
+                    out[key] = obj[key];
+            }
+        }
+    }
+
+    return out;
+};
+
+
+function D3ScatterPlot(placeholderSelector, data, config){
+    this.utils = new D3ScatterPlotUtils();
+    this.placeholderSelector = placeholderSelector;
+    this.svg=null;
+    this.defaultConfig = {
+        width: 0,
+        height: 0,
+        margin:{
+            left: 50,
+            right: 30,
+            top: 30,
+            bottom: 50
+        },
+        x:{// X axis config
+            label: 'X', // axis label
+            value: function(d) { return d[0] }, // x value accessor
+            orient: "bottom"
+        },
+        y:{// Y axis config
+            label: 'Y', // axis label
+            value: function(d) { return d[1] }, // y value accessor
+            orient: "left"
+        },
+        dot:{
+            radius: 2,
+            color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
+            d3ColorCategory: 'category10'
+        }
+    };
+
+    if(data){
+        this.setData(data);
+    }
+
+    if(config){
+        this.setConfig(config);
+    }
+
+}
+
+D3ScatterPlot.prototype.setData = function (data){
+    this.data = data;
+    return this;
+};
+
+D3ScatterPlot.prototype.setConfig = function (config){
+    this.config = this.utils.deepExtend({}, this.defaultConfig, config);
+    return this;
+};
+D3ScatterPlot.prototype.initPlot = function (){
+    var self=this;
+    var margin = this.config.margin;
+    var conf = this.config;
+    this.plot={
+        x: {},
+        y: {},
+        dot: {
+            color: null//color scale mapping function
+        }
+    };
+
+    var width = conf.width;
+    var placeholderNode = d3.select(this.placeholderSelector).node();
+
+    if(!width){
+        width =placeholderNode.getBoundingClientRect().width;
+    }
+    var height = conf.height;
+    if(!height){
+        height =placeholderNode.getBoundingClientRect().height;
+    }
+
+    this.plot.width = width - margin.left - margin.right;
+    this.plot.height = height - margin.top - margin.bottom;
+
+    this.setupX();
+    this.setupY();
+
+    if(conf.dot.d3ColorCategory){
+        this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
+    }
+    var colorValue = conf.dot.color;
+    if(colorValue){
+        this.plot.dot.colorValue = colorValue;
+
+        if (typeof colorValue === 'string' || colorValue instanceof String){
+            this.plot.dot.color = colorValue;
+        }else if(this.plot.dot.colorCategory){
+            this.plot.dot.color = function(d){
+                return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
+            }
+        }
+
+
+    }
+
+    return this;
+};
+
+D3ScatterPlot.prototype.setupX = function (){
+
+    var plot = this.plot;
+    var x = plot.x;
+    var conf = this.config.x;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    x.value = conf.value;
+    x.scale = d3.scale.linear().range([0, plot.width]);
+    x.map = function(d) { return x.scale(x.value(d));};
+    x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
+    var data = this.data;
+    plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
+
+
+};
+
+D3ScatterPlot.prototype.setupY = function (){
+
+    var plot = this.plot;
+    var y = plot.y;
+    var conf = this.config.y;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    y.value = conf.value;
+    y.scale = d3.scale.linear().range([plot.height, 0]);
+    y.map = function(d) { return y.scale(y.value(d));};
+    y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
+
+
+    var data = this.data;
+    plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
+};
+
+D3ScatterPlot.prototype.drawPlot = function (){
+    this.drawAxisX();
+    this.drawAxisY();
+    this.drawDots();
+};
+D3ScatterPlot.prototype.drawAxisX = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.x;
+    self.svgG.append("g")
+        .attr("class", "mw-axis mw-axis-x")
+        .attr("transform", "translate(0," + plot.height + ")")
+        .call(plot.x.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "-1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+D3ScatterPlot.prototype.drawAxisY = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.y;
+    self.svgG.append("g")
+        .attr("class", "mw-axis mw-axis-y")
+        .call(plot.y.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+
+D3ScatterPlot.prototype.drawDots = function (){
+    var self = this;
+    var plot = self.plot;
+    var data = this.data;
+    var dots = self.svgG.selectAll(".mw-dot")
+        .data(data)
+        .enter().append("circle")
+        .attr("class", "mw-dot")
+        .attr("r", self.config.dot.radius)
+        .attr("cx", plot.x.map)
+        .attr("cy", plot.y.map);
+
+    if(plot.dot.color){
+        dots.style("fill", plot.dot.color)
+    }
+
+};
+
+D3ScatterPlot.prototype.initSvg = function (){
+    var self = this;
+    var config = this.config;
+
+
+
+    var width = self.plot.width+ config.margin.left + config.margin.right;
+    var height =  self.plot.height+ config.margin.top + config.margin.bottom;
+    var aspect = width / height;
+    self.svg = d3.select(self.placeholderSelector).append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", "0 0 "+" "+width+" "+height)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("class", "mw-d3-scatterplot");
+    self.svgG = self.svg.append("g")
+        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
+
+    if(!config.width || config.height ){
+        d3.select(window)
+            .on("resize", function() {
+                //TODO add responsiveness if width/height not specified
+            });
+    }
+
+};
+
+D3ScatterPlot.prototype.init = function (){
+    var self = this;
+    self.initPlot();
+    self.initSvg();
+    self.drawPlot();
+
+};
+
+svg.mw-d3-scatterplot{background-color:#fff;font-size:11px;height:100%}svg.mw-d3-scatterplot .mw-axis line,svg.mw-d3-scatterplot .mw-axis path{fill:none;stroke:#000;shape-rendering:crispEdges}
 \ No newline at end of file
+function D3ScatterPlotUtils(){}D3ScatterPlotUtils.prototype.deepExtend=function(t){var e=this;t=t||{};for(var r=1;r<arguments.length;r++){var o=arguments[r];if(o)for(var n in o)o.hasOwnProperty(n)&&("object"==typeof o[n]?t[n]=e.deepExtend(t[n],o[n]):t[n]=o[n])}return t};
+function D3ScatterPlot(t,o,e){this.utils=new D3ScatterPlotUtils,this.placeholderSelector=t,this.svg=null,this.defaultConfig={width:0,height:0,margin:{left:50,right:30,top:30,bottom:50},x:{label:"X",value:function(t){return t[0]},orient:"bottom"},y:{label:"Y",value:function(t){return t[1]},orient:"left"},dot:{radius:2,color:function(t){return t[0]*t[1]},d3ColorCategory:"category10"}},o&&this.setData(o),e&&this.setConfig(e)}D3ScatterPlot.prototype.setData=function(t){return this.data=t,this},D3ScatterPlot.prototype.setConfig=function(t){return this.config=this.utils.deepExtend({},this.defaultConfig,t),this},D3ScatterPlot.prototype.initPlot=function(){var t=this,o=this.config.margin,e=this.config;this.plot={x:{},y:{},dot:{color:null}};var a=e.width,i=d3.select(this.placeholderSelector).node();a||(a=i.getBoundingClientRect().width);var r=e.height;r||(r=i.getBoundingClientRect().height),this.plot.width=a-o.left-o.right,this.plot.height=r-o.top-o.bottom,this.setupX(),this.setupY(),e.dot.d3ColorCategory&&(this.plot.dot.colorCategory=d3.scale[e.dot.d3ColorCategory]());var l=e.dot.color;return l&&(this.plot.dot.colorValue=l,"string"==typeof l||l instanceof String?this.plot.dot.color=l:this.plot.dot.colorCategory&&(this.plot.dot.color=function(o){return t.plot.dot.colorCategory(t.plot.dot.colorValue(o))})),this},D3ScatterPlot.prototype.setupX=function(){var t=this.plot,o=t.x,e=this.config.x;o.value=e.value,o.scale=d3.scale.linear().range([0,t.width]),o.map=function(t){return o.scale(o.value(t))},o.axis=d3.svg.axis().scale(o.scale).orient(e.orient);var a=this.data;t.x.scale.domain([d3.min(a,t.x.value)-1,d3.max(a,t.x.value)+1])},D3ScatterPlot.prototype.setupY=function(){var t=this.plot,o=t.y,e=this.config.y;o.value=e.value,o.scale=d3.scale.linear().range([t.height,0]),o.map=function(t){return o.scale(o.value(t))},o.axis=d3.svg.axis().scale(o.scale).orient(e.orient);var a=this.data;t.y.scale.domain([d3.min(a,t.y.value)-1,d3.max(a,t.y.value)+1])},D3ScatterPlot.prototype.drawPlot=function(){this.drawAxisX(),this.drawAxisY(),this.drawDots()},D3ScatterPlot.prototype.drawAxisX=function(){var t=this,o=t.plot,e=this.config.x;t.svgG.append("g").attr("class","mw-axis mw-axis-x").attr("transform","translate(0,"+o.height+")").call(o.x.axis).append("text").attr("class","mw-label").attr("transform","translate("+o.width/2+","+t.config.margin.bottom+")").attr("dy","-1em").style("text-anchor","middle").text(e.label)},D3ScatterPlot.prototype.drawAxisY=function(){var t=this,o=t.plot,e=this.config.y;t.svgG.append("g").attr("class","mw-axis mw-axis-y").call(o.y.axis).append("text").attr("class","mw-label").attr("transform","translate("+-t.config.margin.left+","+o.height/2+")rotate(-90)").attr("dy","1em").style("text-anchor","middle").text(e.label)},D3ScatterPlot.prototype.drawDots=function(){var t=this,o=t.plot,e=this.data,a=t.svgG.selectAll(".mw-dot").data(e).enter().append("circle").attr("class","mw-dot").attr("r",t.config.dot.radius).attr("cx",o.x.map).attr("cy",o.y.map);o.dot.color&&a.style("fill",o.dot.color)},D3ScatterPlot.prototype.initSvg=function(){var t=this,o=this.config,e=t.plot.width+o.margin.left+o.margin.right,a=t.plot.height+o.margin.top+o.margin.bottom;t.svg=d3.select(t.placeholderSelector).append("svg").attr("width",e).attr("height",a).attr("viewBox","0 0  "+e+" "+a).attr("preserveAspectRatio","xMidYMid meet").attr("class","mw-d3-scatterplot"),t.svgG=t.svg.append("g").attr("transform","translate("+o.margin.left+","+o.margin.top+")"),o.width&&!o.height||d3.select(window).on("resize",function(){})},D3ScatterPlot.prototype.init=function(){var t=this;t.initPlot(),t.initSvg(),t.drawPlot()};
 \ No newline at end of file
+var gulp = require('gulp');
+var del = require('del');
+var merge = require('merge-stream');
+var plugins = require('gulp-load-plugins')();
+var browserSync = require('browser-sync').create();
+
+gulp.task('clean', function (cb) {
+    return del(['tmp', 'dist'], cb);
+});
+
+gulp.task('build-css', function () {
+    var pretty = gulp.src('./styles/*')
+        .pipe(plugins.plumber({ errorHandler: onError }))
+        .pipe(plugins.sass())
+        .pipe(plugins.minifyCss())
+        .pipe(plugins.rename({
+            extname: '.min.css'
+        }))
+        .pipe(gulp.dest('./dist'));
+    var ugly = gulp.src('./styles/*')
+        .pipe(plugins.plumber({ errorHandler: onError }))
+        .pipe(plugins.sass())
+        .pipe(plugins.rename({
+            extname: '.css'
+        }))
+        .pipe(gulp.dest('./dist'));
+    return merge(pretty, ugly);
+});
+
+gulp.task('build-js', function () {
+    var jsFileName = 'd3-scatterplot';
+   var pretty = gulp.src('./src/*.js')
+        .pipe(plugins.plumber({ errorHandler: onError }))
+        .pipe(plugins.concat(jsFileName+'.js'))
+        .pipe(gulp.dest('dist'));
+
+    var ugly = gulp.src('./src/*.js')
+        .pipe(plugins.plumber({ errorHandler: onError }))
+        .pipe(plugins.uglify())
+        .pipe(plugins.stripDebug())
+        .pipe(plugins.concat(jsFileName+'.min.js'))
+        .pipe(gulp.dest('dist'));
+
+    return merge(pretty, ugly);
+});
+
+gulp.task('build-clean', ['clean'], function () {
+    gulp.start('build');
+});
+
+gulp.task('build', ['build-css', 'build-js'], function () {
+
+});
+
+gulp.task('watch', function() {
+    return gulp.watch(['./src/**/*.html', './styles/*.*css', 'src/**/*.js'], ['default']);
+});
+
+gulp.task('default', ['build-clean'],  function() {
+
+});
+
+gulp.task('default-watch', ['default'], ()=>{ browserSync.reload() });
+gulp.task('serve', ['default'], ()=>{
+    browserSync.init({
+        server: {
+            baseDir: "demo",
+            index: "index.html",
+            routes: {
+                "/bower_components": "bower_components",
+                "/dist": "dist"
+            }
+        },
+        port: 8089,
+        open: 'local',
+        browser: "google chrome"
+    });
+    gulp.watch(['i18n/**/*.json', './src/**/*.html', './styles/*.*css', 'src/**/*.js', 'demo/*.*'], ['default-watch']);
+});
+
+// error function for plumber
+var onError = function (err) {
+    console.log(err);
+    this.emit('end');
+};
 \ No newline at end of file
+{
+  "name": "d3-scatterplot",
+  "version": "1.0.0",
+  "description": "d3 scatterplot",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mwasiluk/d3-scatterplot.git"
+  },
+  "keywords": [
+    "d3",
+    "scatterplot"
+  ],
+  "author": "Michal Wasiluk",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mwasiluk/d3-scatterplot/issues"
+  },
+  "homepage": "https://github.com/mwasiluk/d3-scatterplot#readme",
+  "devDependencies": {
+    "browser-sync": "^2.13.0",
+    "del": "^2.2.0",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-load-plugins": "^1.2.4",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-plumber": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.3.1",
+    "gulp-strip-debug": "^1.1.0",
+    "gulp-uglify": "^1.5.3",
+    "merge-stream": "^1.0.0"
+  }
+}
+function D3ScatterPlotUtils(){}
+
+// usage example deepExtend({}, objA, objB); => should work similar to $.extend(true, {}, objA, objB);
+D3ScatterPlotUtils.prototype.deepExtend = function(out) { //TODO consider using jquery / lo-dash / underscore / ECMA6 ; fallbacks?
+
+    var utils =this;
+    out = out || {};
+
+    for (var i = 1; i < arguments.length; i++) {
+        var obj = arguments[i];
+
+        if (!obj)
+            continue;
+
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (typeof obj[key] === 'object')
+                    out[key] = utils.deepExtend(out[key], obj[key]);
+                else
+                    out[key] = obj[key];
+            }
+        }
+    }
+
+    return out;
+};
+
+function D3ScatterPlot(placeholderSelector, data, config){
+    this.utils = new D3ScatterPlotUtils();
+    this.placeholderSelector = placeholderSelector;
+    this.svg=null;
+    this.defaultConfig = {
+        width: 0,
+        height: 0,
+        margin:{
+            left: 50,
+            right: 30,
+            top: 30,
+            bottom: 50
+        },
+        x:{// X axis config
+            label: 'X', // axis label
+            value: function(d) { return d[0] }, // x value accessor
+            orient: "bottom"
+        },
+        y:{// Y axis config
+            label: 'Y', // axis label
+            value: function(d) { return d[1] }, // y value accessor
+            orient: "left"
+        },
+        dot:{
+            radius: 2,
+            color: function(d) { return d[0]*d[1] }, // string or function returning color's value for color scale
+            d3ColorCategory: 'category10'
+        }
+    };
+
+    if(data){
+        this.setData(data);
+    }
+
+    if(config){
+        this.setConfig(config);
+    }
+
+}
+
+D3ScatterPlot.prototype.setData = function (data){
+    this.data = data;
+    return this;
+};
+
+D3ScatterPlot.prototype.setConfig = function (config){
+    this.config = this.utils.deepExtend({}, this.defaultConfig, config);
+    return this;
+};
+D3ScatterPlot.prototype.initPlot = function (){
+    var self=this;
+    var margin = this.config.margin;
+    var conf = this.config;
+    this.plot={
+        x: {},
+        y: {},
+        dot: {
+            color: null//color scale mapping function
+        }
+    };
+
+    var width = conf.width;
+    var placeholderNode = d3.select(this.placeholderSelector).node();
+
+    if(!width){
+        width =placeholderNode.getBoundingClientRect().width;
+    }
+    var height = conf.height;
+    if(!height){
+        height =placeholderNode.getBoundingClientRect().height;
+    }
+
+    this.plot.width = width - margin.left - margin.right;
+    this.plot.height = height - margin.top - margin.bottom;
+
+    this.setupX();
+    this.setupY();
+
+    if(conf.dot.d3ColorCategory){
+        this.plot.dot.colorCategory = d3.scale[conf.dot.d3ColorCategory]();
+    }
+    var colorValue = conf.dot.color;
+    if(colorValue){
+        this.plot.dot.colorValue = colorValue;
+
+        if (typeof colorValue === 'string' || colorValue instanceof String){
+            this.plot.dot.color = colorValue;
+        }else if(this.plot.dot.colorCategory){
+            this.plot.dot.color = function(d){
+                return self.plot.dot.colorCategory(self.plot.dot.colorValue(d));
+            }
+        }
+
+
+    }
+
+    return this;
+};
+
+D3ScatterPlot.prototype.setupX = function (){
+
+    var plot = this.plot;
+    var x = plot.x;
+    var conf = this.config.x;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    x.value = conf.value;
+    x.scale = d3.scale.linear().range([0, plot.width]);
+    x.map = function(d) { return x.scale(x.value(d));};
+    x.axis = d3.svg.axis().scale(x.scale).orient(conf.orient);
+    var data = this.data;
+    plot.x.scale.domain([d3.min(data, plot.x.value)-1, d3.max(data, plot.x.value)+1]);
+
+
+};
+
+D3ScatterPlot.prototype.setupY = function (){
+
+    var plot = this.plot;
+    var y = plot.y;
+    var conf = this.config.y;
+
+    /*
+     * value accessor - returns the value to encode for a given data object.
+     * scale - maps value to a visual display encoding, such as a pixel position.
+     * map function - maps from data value to display value
+     * axis - sets up axis
+     */
+    y.value = conf.value;
+    y.scale = d3.scale.linear().range([plot.height, 0]);
+    y.map = function(d) { return y.scale(y.value(d));};
+    y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
+
+
+    var data = this.data;
+    plot.y.scale.domain([d3.min(data, plot.y.value)-1, d3.max(data, plot.y.value)+1]);
+};
+
+D3ScatterPlot.prototype.drawPlot = function (){
+    this.drawAxisX();
+    this.drawAxisY();
+    this.drawDots();
+};
+D3ScatterPlot.prototype.drawAxisX = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.x;
+    self.svgG.append("g")
+        .attr("class", "mw-axis mw-axis-x")
+        .attr("transform", "translate(0," + plot.height + ")")
+        .call(plot.x.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ (plot.width/2) +","+ (self.config.margin.bottom) +")")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "-1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+D3ScatterPlot.prototype.drawAxisY = function (){
+    var self = this;
+    var plot = self.plot;
+    var axisConf = this.config.y;
+    self.svgG.append("g")
+        .attr("class", "mw-axis mw-axis-y")
+        .call(plot.y.axis)
+        .append("text")
+        .attr("class", "mw-label")
+        .attr("transform", "translate("+ -self.config.margin.left +","+(plot.height/2)+")rotate(-90)")  // text is drawn off the screen top left, move down and out and rotate
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .text(axisConf.label);
+};
+
+
+D3ScatterPlot.prototype.drawDots = function (){
+    var self = this;
+    var plot = self.plot;
+    var data = this.data;
+    var dots = self.svgG.selectAll(".mw-dot")
+        .data(data)
+        .enter().append("circle")
+        .attr("class", "mw-dot")
+        .attr("r", self.config.dot.radius)
+        .attr("cx", plot.x.map)
+        .attr("cy", plot.y.map);
+
+    if(plot.dot.color){
+        dots.style("fill", plot.dot.color)
+    }
+
+};
+
+D3ScatterPlot.prototype.initSvg = function (){
+    var self = this;
+    var config = this.config;
+
+
+
+    var width = self.plot.width+ config.margin.left + config.margin.right;
+    var height =  self.plot.height+ config.margin.top + config.margin.bottom;
+    var aspect = width / height;
+    self.svg = d3.select(self.placeholderSelector).append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .attr("viewBox", "0 0 "+" "+width+" "+height)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("class", "mw-d3-scatterplot");
+    self.svgG = self.svg.append("g")
+        .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");
+
+    if(!config.width || config.height ){
+        d3.select(window)
+            .on("resize", function() {
+                //TODO add responsiveness if width/height not specified
+            });
+    }
+
+};
+
+D3ScatterPlot.prototype.init = function (){
+    var self = this;
+    self.initPlot();
+    self.initSvg();
+    self.drawPlot();
+
+};
+
+svg.mw-d3-scatterplot{
+  background-color: white;
+  font-size: 11px;
+  height: 100%;
+  .mw-axis{
+
+    path, line{
+      fill: none;
+      stroke: #000;
+      shape-rendering: crispEdges;
+    }
+  }
+
+  .mw-dot {
+    //stroke: #000;
+  }
+
+}
@@ -13,9 +13,11 @@
 <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
 <link rel="import" href="../scatterplot-datalet.html" />
+<div style="height: 600px">
+    <scatterplot-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
+                         fields='["result,records,pop_residente","result,records,superficie_kmq"]'></scatterplot-datalet>
+</div>
-<scatterplot-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
-                     fields='["result,records,area_geo","result,records,pop_residente","result,records,superficie_kmq"]'></scatterplot-datalet>
 </body>
 </html>
 \ No newline at end of file
@@ -4,15 +4,57 @@
 <dom-module id="scatterplot-datalet">
     <template>
+        <link rel="stylesheet" href="../../bower_components/d3-scatterplot/dist/d3-scatterplot.min.css">
+        <style is="custom-style">
+            :host ::content #scatterplot-placeholder {
+                width: 100%;
+                height: 70%;
+                background: #ffffff;
+                position: relative;
+            }
+        </style>
         <div id="scatterplot-placeholder"></div>
         <base-ajax-json-alasql-datalet data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}" title="{{title}}" description="{{description}}" export_menu="{{export_menu}}"></base-ajax-json-alasql-datalet>
     </template>
-
     <script src="../shared_js/d3.js"></script>
+    <script type="text/javascript" src="../../bower_components/d3-scatterplot/dist/d3-scatterplot.js"></script>
     <script>
         var ScatterplotBehavior = {
+            presentData: function () {
+
+                var self =this;
+                var scatterSeries = [];
+                var series = [];
+                var point = [];
+
+                for (var j = 0; j < this.data[0]["data"].length; j++) {
+                    point = [this.data[0].data[j], this.data[1].data[j]];
+                    series.push(point);
+                }
+                scatterSeries.push({data: series});
+
+                this.properties.series = scatterSeries;
+                this._component.legend = false;
+
+                var conf = {
+//                    width: 500,
+//                    height: 500,
+                    x:{
+                        label: self._component.yAxisLabel
+                    },
+                    y:{
+                        label: self._component.yAxisLabel
+                    },
+                    dot: {
+                        // color: 'red'
+                    }
+                };
+
+                var plot = new D3ScatterPlot("#scatterplot-placeholder", this.properties.series[0].data, conf);
+                plot.init();
+            }
         };
         ScatterplotDatalet = Polymer({