From 7997d79c1cb54775c622d9876119defd538c405f Mon Sep 17 00:00:00 2001 From: Nikos Linakis Date: Fri, 28 Nov 2014 20:40:05 +0200 Subject: [PATCH 1/3] Updated libs --- examples/funnel/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/funnel/index.html b/examples/funnel/index.html index 2de61b4..c63698e 100644 --- a/examples/funnel/index.html +++ b/examples/funnel/index.html @@ -2,10 +2,10 @@ - - - - + + + + From e71ce85dcf01b381609117a01e590d721afc2add Mon Sep 17 00:00:00 2001 From: Nikos Linakis Date: Fri, 28 Nov 2014 20:43:20 +0200 Subject: [PATCH 2/3] Init instance level options --- src/charts/chart.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/charts/chart.js b/src/charts/chart.js index 21647ad..9979c07 100644 --- a/src/charts/chart.js +++ b/src/charts/chart.js @@ -26,6 +26,8 @@ D3.Chart = Backbone.View.extend({ className: 'bbd3', + options: {}, + initialize: function() { _.bindAll(this, 'joinData'); From ff01b4a6f16a4a0603a41c0f9f5812e57fadc95c Mon Sep 17 00:00:00 2001 From: Nikos Linakis Date: Fri, 28 Nov 2014 20:46:30 +0200 Subject: [PATCH 3/3] Fixed undefined options bug --- dist/backbone.d3.css | 2 +- dist/backbone.d3.js | 4 +++- dist/backbone.d3.min.css | 2 +- dist/backbone.d3.min.js | 4 ++-- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/dist/backbone.d3.css b/dist/backbone.d3.css index 47f43cb..071e53d 100644 --- a/dist/backbone.d3.css +++ b/dist/backbone.d3.css @@ -1,7 +1,7 @@ /*! * backbone.d3 0.0.1 * - * Copyright (c) 2013 AdRoll + * Copyright (c) 2014 AdRoll * MIT license * https://github.com/AdRoll/backbone.d3 */ diff --git a/dist/backbone.d3.js b/dist/backbone.d3.js index 3fe973d..4db41bd 100644 --- a/dist/backbone.d3.js +++ b/dist/backbone.d3.js @@ -1,7 +1,7 @@ /*! * backbone.d3 0.0.1 * - * Copyright (c) 2013 AdRoll + * Copyright (c) 2014 AdRoll * MIT license * https://github.com/AdRoll/backbone.d3 */ @@ -84,6 +84,8 @@ D3.Chart = Backbone.View.extend({ className: 'bbd3', + options: {}, + initialize: function() { _.bindAll(this, 'joinData'); diff --git a/dist/backbone.d3.min.css b/dist/backbone.d3.min.css index d336efc..7872a36 100644 --- a/dist/backbone.d3.min.css +++ b/dist/backbone.d3.min.css @@ -1,7 +1,7 @@ /*! * backbone.d3 0.0.1 * - * Copyright (c) 2013 AdRoll + * Copyright (c) 2014 AdRoll * MIT license * https://github.com/AdRoll/backbone.d3 */.bbd3 .axis path,.bbd3 .axis line{fill:none;stroke:#ddd;shape-rendering:crispEdges}.bbd3-bar .x.axis .domain{display:none}.bbd3-bar .bar{fill:#4682b4}.bbd3-line .series .line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none}.bbd3-countrymap .country{fill:#ddd;fill-rule:evenodd;stroke:#fff;stroke-width:1;stroke-linejoin:round;stroke-linecap:round} \ No newline at end of file diff --git a/dist/backbone.d3.min.js b/dist/backbone.d3.min.js index 5381d25..f763de2 100644 --- a/dist/backbone.d3.min.js +++ b/dist/backbone.d3.min.js @@ -1,8 +1,8 @@ /*! * backbone.d3 0.0.1 * - * Copyright (c) 2013 AdRoll + * Copyright (c) 2014 AdRoll * MIT license * https://github.com/AdRoll/backbone.d3 */ -(function(){"use strict";var a=this,b=a._,c=a.Backbone,d=a.d3,e=a.D3=c.D3={};e.VERSION="0.0.1",e.format={_siFormat:d.format("s"),shortNumber:function(a,c){if(0===a)return"0";if(b.isNaN(a))return"NaN";var d=b.extend({sigFigs:3},c),f=0>a,g=Math.abs(a),h=Math.pow(10,d.sigFigs-Math.floor(Math.log(g)/Math.LN10)-1),i=Math.round(g*h)/h;return(f?"-":"")+e.format._siFormat(i)},longNumber:d.format(",")},e.chartDefaults={joinAttr:null,xAttr:"x",xFormat:e.format.shortNumber,xValid:b.isFinite,xScale:"linear",yAttr:"y",yFormat:e.format.shortNumber,yValid:b.isFinite,yScale:"linear",margin:{top:10,right:10,bottom:30,left:45}},e.Chart=c.View.extend({className:"bbd3",initialize:function(){b.bindAll(this,"joinData"),b.defaults(this.options,b.result(this,"defaults"),e.chartDefaults),c.View.prototype.initialize.apply(this,arguments)},render:function(){this.$el.empty();var a=this.options.margin,b=this.options.width||this.$el.width(),e=this.options.height||this.$el.height();return this.width=b-a.left-a.right,this.height=e-a.top-a.bottom,this.svg=d.select(this.el).append("svg").attr("width",b).attr("height",e).append("g").attr("transform","translate("+a.left+","+a.top+")"),this.collection instanceof c.Collection&&(this.scales={x:this.getXScale(),y:this.getYScale()},this.renderAxes(),this.renderData()),this},joinData:function(a,d){var e=this.options.joinAttr;return e&&a instanceof c.Model?a.get(e):e&&b(a).has(e)?a[e]:d},getLinearExtent:function(a,c){return c?b[c](this.collection.pluck(a)):[this.getLinearExtent(a,"min"),this.getLinearExtent(a,"max")]},getX:function(a){return this._getDatumValue(a,this.options.xAttr)},getY:function(a){return this._getDatumValue(a,this.options.yAttr)},_getDatumValue:function(a,b){return a instanceof c.Model?a.get(b):a?a[b]:null},getXScale:function(){},getYScale:function(){},renderAxes:function(){},renderData:function(){}}),e.Bar=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-bar",defaults:{xFormat:b.identity,xValid:Boolean,barPadding:.2},renderAxes:function(){var a=d.svg.axis().scale(this.scales.x).orient("bottom").tickFormat(this.options.xFormat);this.svg.append("g").attr("class","x axis").attr("transform","translate(0,"+this.height+")").call(a);var b=d.svg.axis().scale(this.scales.y).orient("left").ticks(Math.ceil(this.height/40)).tickSize(-this.width).tickFormat(this.options.yFormat).tickPadding(6);this.svg.append("g").attr("class","y axis").call(b)},renderData:function(){var a=this,b=this.scales.x,c=this.scales.y;this.svg.selectAll(".bar").data(this.collection.models,this.joinData).enter().append("rect").attr("class","bar").attr("width",b.rangeBand()).attr("height",function(b){return a.height-c(a.getY(b))}).attr("transform",function(d){return"translate("+b(a.getX(d))+","+c(a.getY(d))+")"})},getXScale:function(){return d.scale.ordinal().rangeRoundBands([0,this.width],this.options.barPadding).domain(this.collection.pluck(this.options.xAttr))},getYScale:function(){return d.scale[this.options.yScale]().rangeRound([this.height,0]).domain([0,this.getLinearExtent(this.options.yAttr,"max")]).nice()}}),e.Line=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-line",defaults:{valuesAttr:"values",colorAttr:"color",interpolate:"monotone",colorScale:d.scale.category10()},renderAxes:function(){var a=d.svg.axis().scale(this.scales.x).orient("bottom").ticks(Math.ceil(this.width/150)).tickFormat(this.options.xFormat).tickPadding(5);this.svg.append("g").attr("class","x axis").attr("transform","translate(0,"+this.height+")").call(a);var b=d.svg.axis().scale(this.scales.y).orient("left").ticks(Math.ceil(this.height/40)).tickFormat(this.options.yFormat).tickSize(-this.width).tickPadding(10);this.svg.append("g").attr("class","y axis").call(b)},renderData:function(){var a=this.scales.x,b=this.scales.y,c=this.options,e=d.svg.line().interpolate(c.interpolate).defined(function(a){return a&&c.yValid(a[c.yAttr])}).x(function(b){return a(b[c.xAttr])}).y(function(a){return b(a[c.yAttr])}),f=this.svg.selectAll(".series").data(this.collection.models,this.joinData).enter().append("g").attr("class","series");f.append("path").attr("class","line").attr("d",function(a){return e(a.get(c.valuesAttr))}).style("stroke",function(a,b){return a.get(c.colorAttr)||c.colorScale(b)})},getXScale:function(){return d.scale[this.options.xScale]().rangeRound([0,this.width]).domain(this.getLinearExtent(this.options.xAttr))},getYScale:function(){return d.scale[this.options.yScale]().rangeRound([this.height,0]).domain([0,this.getLinearExtent(this.options.yAttr,"max")]).nice()},getLinearExtent:function(a,c){if(!c)return e.Chart.prototype.getLinearExtent.apply(this,arguments);var d=this.collection.map(function(d){var e=d.get(this.options.valuesAttr);return b[c](e,function(b){return b&&b[a]})[a]},this);return b[c](d)}}),e.TimeSeries=e.Line.extend({className:e.Line.prototype.className+" bbd3-timeseries",defaults:b.defaults({xFormat:d.time.scale.utc().tickFormat(),xValid:b.isDate},e.Line.prototype.defaults),getXScale:function(){return d.time.scale.utc().range([0,this.width]).domain(this.getLinearExtent(this.options.xAttr))}}),e.CountryMap=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-countrymap",defaults:{xValid:b.isString,yFormat:e.format.longNumber,colorRange:[d.interpolate("white","steelblue")(.2),"steelblue"],strokeWidth:2,projection:"mercator",autoZoom:!0,zoomFactor:.9,crop:[[-180,83.7],[180,-56.6]],countryData:null},initialize:function(){b.bindAll(this,"getMapTransform","getCountryFill","getCountryClass"),e.Chart.prototype.initialize.apply(this,arguments)},renderData:function(){var a=this.options.countryData;b.isString(a)?$.getJSON(a,this.renderCountries):b.isObject(a)&&this.renderCountries(a)},setCountryData:function(a){this.options.countryData=a,this.render()},renderCountries:function(a){var b=this,c=this.scales.x,d=(this.scales.y,this.options);d.countryData=a,this.svg.append("g").attr("transform",this.getMapTransform).selectAll("path").data(d.countryData.features).enter().append("path").attr("class",this.getCountryClass).attr("d",c).attr("data-code",function(a){return a.properties&&a.properties.code}).each(function(a){b.addCountryTooltip(this,a)}).style("fill",this.getCountryFill).style("stroke-width",this.getStrokeWidth(d.strokeWidth))},getXScale:function(){var a=d.geo[this.options.projection]().scale(Math.min(this.width,this.height)).translate([this.width/2,this.height/2]);return d.geo.path().projection(a)},getYScale:function(){var a=this.getLinearExtent("y");return d.scale[this.options.yScale]().range(this.options.colorRange).domain(1==this.collection.length?[0,a[1]]:a)},getCountryClass:function(a){var b=["country"],c=this.collection.findWhere({x:a.properties&&a.properties.code});return c&&this.options.yValid(this.getY(c))&&b.push("country-data"),b.join(" ")},getCountryFill:function(a){if(!a.properties)return null;var b=this.collection.findWhere({x:a.properties.code});return b?this.scales.y(this.getY(b)):null},getCountryTitle:function(a){if(!a.properties)return"";var b=this.collection.findWhere({x:a.properties.code}),c=a.properties.name;return b&&this.options.yValid(this.getY(b))&&(c+=": "+this.options.yFormat(this.getY(b))),c},addCountryTooltip:function(a,b){if(b.properties){var c=this.getDataBounds(this.collection),e=this.scales.x.bounds(b);$.fn.tooltip?$(a).tooltip({container:this.el,placement:function(){return e[1][1]>c[1][1]?"top":e[0][1]c[1][0]?"left":e[0][0]f[0][1]&&(d[0][1]=f[0][1]),d[1][0]f[0][0]&&(d[0][0]=f[0][0])}},this);var f=this.scales.x.projection(),g=[f(e.crop[0]),f(e.crop[1])];return b.isFinite(d[1][1])||(d[1][1]=g[1][1]),b.isFinite(d[0][1])||(d[0][1]=g[0][1]),b.isFinite(d[1][0])||(d[1][0]=g[1][0]),b.isFinite(d[0][0])||(d[0][0]=g[0][0]),d}})}).call(this); \ No newline at end of file +(function(){"use strict";var a=this,b=a._,c=a.Backbone,d=a.d3,e=a.D3=c.D3={};e.VERSION="0.0.1",e.format={_siFormat:d.format("s"),shortNumber:function(a,c){if(0===a)return"0";if(b.isNaN(a))return"NaN";var d=b.extend({sigFigs:3},c),f=0>a,g=Math.abs(a),h=Math.pow(10,d.sigFigs-Math.floor(Math.log(g)/Math.LN10)-1),i=Math.round(g*h)/h;return(f?"-":"")+e.format._siFormat(i)},longNumber:d.format(",")},e.chartDefaults={joinAttr:null,xAttr:"x",xFormat:e.format.shortNumber,xValid:b.isFinite,xScale:"linear",yAttr:"y",yFormat:e.format.shortNumber,yValid:b.isFinite,yScale:"linear",margin:{top:10,right:10,bottom:30,left:45}},e.Chart=c.View.extend({className:"bbd3",options:{},initialize:function(){b.bindAll(this,"joinData"),b.defaults(this.options,b.result(this,"defaults"),e.chartDefaults),c.View.prototype.initialize.apply(this,arguments)},render:function(){this.$el.empty();var a=this.options.margin,b=this.options.width||this.$el.width(),e=this.options.height||this.$el.height();return this.width=b-a.left-a.right,this.height=e-a.top-a.bottom,this.svg=d.select(this.el).append("svg").attr("width",b).attr("height",e).append("g").attr("transform","translate("+a.left+","+a.top+")"),this.collection instanceof c.Collection&&(this.scales={x:this.getXScale(),y:this.getYScale()},this.renderAxes(),this.renderData()),this},joinData:function(a,d){var e=this.options.joinAttr;return e&&a instanceof c.Model?a.get(e):e&&b(a).has(e)?a[e]:d},getLinearExtent:function(a,c){return c?b[c](this.collection.pluck(a)):[this.getLinearExtent(a,"min"),this.getLinearExtent(a,"max")]},getX:function(a){return this._getDatumValue(a,this.options.xAttr)},getY:function(a){return this._getDatumValue(a,this.options.yAttr)},_getDatumValue:function(a,b){return a instanceof c.Model?a.get(b):a?a[b]:null},getXScale:function(){},getYScale:function(){},renderAxes:function(){},renderData:function(){}}),e.Bar=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-bar",defaults:{xFormat:b.identity,xValid:Boolean,barPadding:.2},renderAxes:function(){var a=d.svg.axis().scale(this.scales.x).orient("bottom").tickFormat(this.options.xFormat);this.svg.append("g").attr("class","x axis").attr("transform","translate(0,"+this.height+")").call(a);var b=d.svg.axis().scale(this.scales.y).orient("left").ticks(Math.ceil(this.height/40)).tickSize(-this.width).tickFormat(this.options.yFormat).tickPadding(6);this.svg.append("g").attr("class","y axis").call(b)},renderData:function(){{var a=this,b=this.scales.x,c=this.scales.y;this.svg.selectAll(".bar").data(this.collection.models,this.joinData).enter().append("rect").attr("class","bar").attr("width",b.rangeBand()).attr("height",function(b){return a.height-c(a.getY(b))}).attr("transform",function(d){return"translate("+b(a.getX(d))+","+c(a.getY(d))+")"})}},getXScale:function(){return d.scale.ordinal().rangeRoundBands([0,this.width],this.options.barPadding).domain(this.collection.pluck(this.options.xAttr))},getYScale:function(){return d.scale[this.options.yScale]().rangeRound([this.height,0]).domain([0,this.getLinearExtent(this.options.yAttr,"max")]).nice()}}),e.Line=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-line",defaults:{valuesAttr:"values",colorAttr:"color",interpolate:"monotone",colorScale:d.scale.category10()},renderAxes:function(){var a=d.svg.axis().scale(this.scales.x).orient("bottom").ticks(Math.ceil(this.width/150)).tickFormat(this.options.xFormat).tickPadding(5);this.svg.append("g").attr("class","x axis").attr("transform","translate(0,"+this.height+")").call(a);var b=d.svg.axis().scale(this.scales.y).orient("left").ticks(Math.ceil(this.height/40)).tickFormat(this.options.yFormat).tickSize(-this.width).tickPadding(10);this.svg.append("g").attr("class","y axis").call(b)},renderData:function(){var a=this.scales.x,b=this.scales.y,c=this.options,e=d.svg.line().interpolate(c.interpolate).defined(function(a){return a&&c.yValid(a[c.yAttr])}).x(function(b){return a(b[c.xAttr])}).y(function(a){return b(a[c.yAttr])}),f=this.svg.selectAll(".series").data(this.collection.models,this.joinData).enter().append("g").attr("class","series");f.append("path").attr("class","line").attr("d",function(a){return e(a.get(c.valuesAttr))}).style("stroke",function(a,b){return a.get(c.colorAttr)||c.colorScale(b)})},getXScale:function(){return d.scale[this.options.xScale]().rangeRound([0,this.width]).domain(this.getLinearExtent(this.options.xAttr))},getYScale:function(){return d.scale[this.options.yScale]().rangeRound([this.height,0]).domain([0,this.getLinearExtent(this.options.yAttr,"max")]).nice()},getLinearExtent:function(a,c){if(!c)return e.Chart.prototype.getLinearExtent.apply(this,arguments);var d=this.collection.map(function(d){var e=d.get(this.options.valuesAttr);return b[c](e,function(b){return b&&b[a]})[a]},this);return b[c](d)}}),e.TimeSeries=e.Line.extend({className:e.Line.prototype.className+" bbd3-timeseries",defaults:b.defaults({xFormat:d.time.scale.utc().tickFormat(),xValid:b.isDate},e.Line.prototype.defaults),getXScale:function(){return d.time.scale.utc().range([0,this.width]).domain(this.getLinearExtent(this.options.xAttr))}}),e.CountryMap=e.Chart.extend({className:e.Chart.prototype.className+" bbd3-countrymap",defaults:{xValid:b.isString,yFormat:e.format.longNumber,colorRange:[d.interpolate("white","steelblue")(.2),"steelblue"],strokeWidth:2,projection:"mercator",autoZoom:!0,zoomFactor:.9,crop:[[-180,83.7],[180,-56.6]],countryData:null},initialize:function(){b.bindAll(this,"getMapTransform","getCountryFill","getCountryClass"),e.Chart.prototype.initialize.apply(this,arguments)},renderData:function(){var a=this.options.countryData;b.isString(a)?$.getJSON(a,this.renderCountries):b.isObject(a)&&this.renderCountries(a)},setCountryData:function(a){this.options.countryData=a,this.render()},renderCountries:function(a){var b=this,c=this.scales.x,d=(this.scales.y,this.options);d.countryData=a,this.svg.append("g").attr("transform",this.getMapTransform).selectAll("path").data(d.countryData.features).enter().append("path").attr("class",this.getCountryClass).attr("d",c).attr("data-code",function(a){return a.properties&&a.properties.code}).each(function(a){b.addCountryTooltip(this,a)}).style("fill",this.getCountryFill).style("stroke-width",this.getStrokeWidth(d.strokeWidth))},getXScale:function(){var a=d.geo[this.options.projection]().scale(Math.min(this.width,this.height)).translate([this.width/2,this.height/2]);return d.geo.path().projection(a)},getYScale:function(){var a=this.getLinearExtent("y");return d.scale[this.options.yScale]().range(this.options.colorRange).domain(1==this.collection.length?[0,a[1]]:a)},getCountryClass:function(a){var b=["country"],c=this.collection.findWhere({x:a.properties&&a.properties.code});return c&&this.options.yValid(this.getY(c))&&b.push("country-data"),b.join(" ")},getCountryFill:function(a){if(!a.properties)return null;var b=this.collection.findWhere({x:a.properties.code});return b?this.scales.y(this.getY(b)):null},getCountryTitle:function(a){if(!a.properties)return"";var b=this.collection.findWhere({x:a.properties.code}),c=a.properties.name;return b&&this.options.yValid(this.getY(b))&&(c+=": "+this.options.yFormat(this.getY(b))),c},addCountryTooltip:function(a,b){if(b.properties){var c=this.getDataBounds(this.collection),e=this.scales.x.bounds(b);$.fn.tooltip?$(a).tooltip({container:this.el,placement:function(){return e[1][1]>c[1][1]?"top":e[0][1]c[1][0]?"left":e[0][0]f[0][1]&&(d[0][1]=f[0][1]),d[1][0]f[0][0]&&(d[0][0]=f[0][0])}},this);var f=this.scales.x.projection(),g=[f(e.crop[0]),f(e.crop[1])];return b.isFinite(d[1][1])||(d[1][1]=g[1][1]),b.isFinite(d[0][1])||(d[0][1]=g[0][1]),b.isFinite(d[1][0])||(d[1][0]=g[1][0]),b.isFinite(d[0][0])||(d[0][0]=g[0][0]),d}})}).call(this); \ No newline at end of file