Old school D3 from simpler times

All examples By author By category About

biovisualize

Full window Github gist

backbone with d3.js and crossfilter

Simple Backbone + D3.js + Crossfilter example

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Backbone + D3.js + Crossfilter Example</title>
    <script type='text/javascript' src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script type='text/javascript' src="https://underscorejs.org/underscore-min.js"></script>
    <script type='text/javascript' src="https://backbonejs.org/backbone-min.js"></script>
    <script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
    <script type='text/javascript' src="bar_chart.js"></script>
    <style>
    path.domain{
    	fill: none;
    	stroke: black;
    }
    rect{
    	fill: skyblue;
    }
    .tick line{
    	stroke: black;
    }
    </style>
</head>
<body>

<div class="control">
	<button class="update-config">Update Config</button>
    <select class="filter-lang">
        <option value="English">English</option>
        <option value="Spanish">Spanish</option>
    </select>
</div>
<div class="chart"></div>

<script>

// Bar chart view
/////////////////////////////////////

var BarChartView = Backbone.View.extend({
	el: ".chart",
	chart: null,
	chartSelection: null,
	initialize: function() {
        var that = this;
		_.bindAll(this, 'render', 'update');
    	this.model.bind('change:data', this.render);
    	this.model.bind('change:config', this.update);
		chart = d3.custom.barChart();
		chart.config(this.model.get('config'));
		chart.on('customHover', function(d, i){ console.log('hover', d, i); });
        this.model.fetch();
        this.renderPlaceholder();
	},
    renderPlaceholder: function() {
        this.chartSelection = d3.select(this.el)
            .datum([{key: '', value: 0}])
            .call(chart);
    },
	render: function() {
		this.chartSelection = d3.select(this.el)
		    .datum(this.model.get('data'))
		    .call(chart);
	},
	update: function() {
		this.chartSelection.call(chart.config(this.model.get('config')));
	}
});

// Buttons view
/////////////////////////////////////

var ControlView = Backbone.View.extend({
	el: ".control",
	events: {
		"click .update-config": "updateConfig",
		"change .filter-lang": "filterLang"
	},
	updateConfig: function() {
		var newConfig = {width: this._randomInt(1200, 800)};
		this.model.set({config: newConfig});
	},
    filterLang: function(e){
        this.model.filterLangBy(e.target.value);
    },
	_randomInt: function(_maxSize, _minSize){ 
		var minSize = _minSize || 1;
		return ~~(Math.random() * (_maxSize - minSize)) + minSize; 
	}
});

// Bar chart data
/////////////////////////////////////

var BarChartData = Backbone.Model.extend({
    url: 'chart.json',
	defaults: {
		data: [],
        dimension: {},
		config: {height: 200, width: 800}
    },
    parse: function(_json) {
        var cf = new crossfilter(_json.yt_abs_views_by_vid);
        var dimensions = this.get('dimension');
        dimensions.brands = cf.dimension(function(d) { return d.brand_name; });
        dimensions.langName = cf.dimension(function(d) { return d.lang_name; });
        var data = this._getTopOfSum('brands', 'all_time_views', 10);
        this.set({data: data});
    },
    filterLangBy: function(_value) {
        this.get('dimension').langName.filterExact(_value);
        this.set({data: this._getTopOfSum('brands', 'all_time_views', 10)});
    },
    _getTopOfSum: function(_dimensionName, _aggregateValueName, _topK){
        function reduceAdd(p, v){ p += v[_aggregateValueName]; return p; }
        function reduceRemove(p, v){ p -= v[_aggregateValueName]; return p; }
        function reduceInitial(){ return 0}
        var data = this.get('dimension')[_dimensionName].group()
            .reduce(reduceAdd, reduceRemove, reduceInitial)
            .top(_topK)
            .filter(function(d, i){ return d.value > 0; });
        return data;
    }

});

// Usage
/////////////////////////////////////

var barChartModel = new BarChartData();
var controlView = new ControlView({model: barChartModel});
var barChartView = new BarChartView({model: barChartModel})

</script>

</body>
</html>

Modified http://code.jquery.com/jquery-2.0.0.min.js to a secure url

Modified http://underscorejs.org/underscore-min.js to a secure url

Modified http://backbonejs.org/backbone-min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js to a secure url

https://code.jquery.com/jquery-2.0.0.min.js

https://underscorejs.org/underscore-min.js

https://backbonejs.org/backbone-min.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js