JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="vis"></div>
JavaScript
/* d3.csv("data/gates_money.csv", function(data) {
custom_bubble_chart.init(data);
custom_bubble_chart.toggle_view('all');
});*/
var data = [{
id: 1,
total_amount: 100,
grant_title: 'ruby',
organization: 'MRI',
group: 'programming',
year: 1972
}, {
id: 1,
total_amount: 100,
grant_title: '.NET',
organization: 'Microsoft',
group: 'programming',
year: 1989
}];
$(document).ready(function() {
$('#view_selection a').click(function() {
var view_type = $(this).attr('id');
$('#view_selection a').removeClass('active');
$(this).toggleClass('active');
custom_bubble_chart.toggle_view(view_type);
return false;
});
});
var custom_bubble_chart = (function(d3, CustomTooltip) {
"use strict";
var width = 940,
height = 600,
tooltip = CustomTooltip("gates_tooltip", 240),
layout_gravity = -0.01,
damper = 0.1,
nodes = [],
vis, force, circles, radius_scale;
var center = {x: width / 2, y: height / 2};
/* var year_centers = {
"2008": {x: width / 3, y: height / 2},
"2009": {x: width / 2, y: height / 2},
"2010": {x: 2 * width / 3, y: height / 2}
};
*/
var fill_color = d3.scale.ordinal()
.domain(["low", "medium", "high"])
.range(["#d84b2a", "#beccae", "#7aa25c"]);
function custom_chart(data) {
var max_amount = d3.max(data, function(d) { return parseInt(d.total_amount, 10); } );
radius_scale = d3.scale.pow().exponent(0.5).domain([0, max_amount]).range([2, 85]);
//create node objects from original data
//that will serve as the data behind each
//bubble in the vis, then add each node
//to nodes to be used later
data.forEach(function(d){
var node = {
id: d.id,
radius: radius_scale(parseInt(d.total_amount, 10)),
value: d.total_amount,
...