Skip to content

Commit

Permalink
makaizou
Browse files Browse the repository at this point in the history
  • Loading branch information
@chimerast
chimerast committed Mar 11, 2015
1 parent 47cbb4a commit b1a1daf
Show file tree
Hide file tree
Showing 11 changed files with 866 additions and 777 deletions.
40 changes: 25 additions & 15 deletions barchart-javascript/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
function render(node, data) {
var width = 400;
var height = 300;
//# require=d3

var svg = d3.select(node)
.append('svg')
.attr('width', width)
.attr('height', height);
var width = 400;
var height = 300;

var svg = d3.select(root)
.append('svg')
.attr('width', width)
.attr('height', height);

function update(data) {
var list = data.transpose().toList(['name', 'value']);

var x = d3.scale.ordinal()
Expand All @@ -18,12 +20,20 @@ function render(node, data) {
var color = d3.scale.category10()
.domain(list.map(function (d) { return d.name; }))

rect = svg.selectAll('rect')
.data(list)
.enter().append('rect')
.attr('width', x.rangeBand())
.attr('height', function (d) { return height - y(d.value); })
.attr('x', function (d) { return x(d.name); })
.attr('y', function (d) { return y(d.value); })
.style('fill', function (d) { return color(d.name); });
var setup = function (selection) {
selection
.attr('width', x.rangeBand())
.attr('height', function (d) { return height - y(d.value); })
.attr('x', function (d) { return x(d.name); })
.attr('y', function (d) { return y(d.value); })
.style('fill', function (d) { return color(d.name); });
}

rect = svg.selectAll('rect').data(list);

rect.transition().duration(500).call(setup);

rect.enter().append('rect').call(setup);

rect.exit().remove();
}
20 changes: 8 additions & 12 deletions dot-bar-chart/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
define(['d3', 'original'], function (d3, original) {
return function (node, baseUrl) {
return {
update: function (data) {
d3.selectAll("#g-axis-layer g g").remove();
d3.selectAll("#g-graph-layer *").remove();
d3.selectAll("#g-input-layer *").remove();
show(data.toMap());
}
};
};
});
//# require=d3,original

function update(data) {
d3.selectAll("#g-axis-layer g g").remove();
d3.selectAll("#g-graph-layer *").remove();
d3.selectAll("#g-input-layer *").remove();
show(data.toMap());
}
274 changes: 239 additions & 35 deletions japan-color/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,245 @@
define(['jquery', 'topojson', 'original'], function ($, topojson, original) {
return function (node, baseUrl) {
var _data = null;

var _initialize = function () {
console.log("Begin e2d3Show.");
$('#chart-labels').remove();
$(colorButtons).append([buttonBrue, buttonRed, buttonMix]);
$('#e2d3-chart-area').append(colorButtons);

d3.json(baseUrl + "/japan.topojson", function (error, o) {
svg.selectAll(".states")
.data(topojson.feature(o, o.objects.japan).features)
.enter().append("path")
.attr("stroke", "gray")
.attr("stroke-width", "0.5")
.attr("id", function(d) {return "state_" + d.properties.id; })
.attr("class", 'states')
.attr("fill","#fff")
.attr("d", path);
topo = o;

if (_data) {
exports.update(_data);
//# require=d3,jquery,topojson

function update(data) {
show(data.toMap());
}

/**
* Created by yuuu on 14/12/22.
*/

console.log("Begin e2d3Show.");

var width = 500;
var height = 500;

var svg = d3.select("#e2d3-chart-area").append("svg")
.attr("width", width)
.attr("height", height);

var projection = d3.geo.mercator()
.center([136, 38])
.scale(1200)
.translate([width / 2, height / 2]);

var path = d3.geo.path()
.projection(projection);
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.attr("class", "chart-tooltip");

var topo = {};
var colorButtons = $('<div>').attr('id', 'chart-color-selector');
var buttonBrue = $('<button>').addClass('btn red chart-color-selector-button').attr({
'data-color-min': '#FEFFD1',
'data-color-max': '#FF0000'
});
var buttonRed = $('<button>').addClass('btn blue chart-color-selector-button').attr({
'data-color-min': '#C9FDFF',
'data-color-max': '#0000FF'
});
var buttonMix = $('<button>').addClass('btn multi chart-color-selector-button').attr({
'data-color-min': '#0000FF',
'data-color-max': '#FF0000'
});

$(colorButtons).append([buttonBrue, buttonRed, buttonMix]);
$('#e2d3-chart-area').append(colorButtons);

d3.json(baseUrl + "/japan.topojson", function(error, o) {
svg.selectAll(".states")
.data(topojson.feature(o, o.objects.japan).features)
.enter().append("path")
.attr("stroke", "gray")
.attr("stroke-width", "0.5")
.attr("id", function(d) {
return "state_" + d.properties.id;
})
.attr("class", 'states')
.attr("fill", "#fff")
.attr("d", path);
topo = o;

reload();
});

function show(data) {
console.log('show');
if (data && topo.objects) {
//max and slider labels
var labels = data.header;
var values = []; // all of data;
data.keys.forEach(function(i) {
labels.forEach(function(k) {
var v = data[i][k] = +(data[i][k].replace(/,/g, ""));
values.push(v)
});
});
//slider
var initLabel = '';
var hasActive = false;
$('.chart-label').each(function() {
if ($(this).hasClass('active')) {
initLabel = $(this).attr('data-chart-label');
if ($.inArray(initLabel, labels) === -1) {
initLabel = '';
} else {
hasActive = true;
}
}
});
//color
var colorSelector = $('.chart-color-selector-button');
var selectedColor = '';
$(colorSelector).each(function() {
if ($(this).hasClass('active')) {
selectedColor = this;
}
});
if (!selectedColor) {
selectedColor = colorSelector[0];
$(colorSelector[0]).addClass('active');
}

console.log('hasActive : ' + hasActive);
if (!initLabel) {
initLabel = labels[0];
}

svg.selectAll(".states")
.data(topojson.feature(topo, topo.objects.japan).features)
.on('mouseover', function() {
return tooltip.style("visibility", "visible");
})
.on('mousemove', function(d) {
var inner = '';
var noValue = true;
labels.forEach(function(label, i) {
var isActive = (label != initLabel) ? '' : 'active';

inner += '<dt class="' + isActive + '">' + label + '</dt><dd class="' + isActive + '">';
if (data[d.properties.nam_ja] && data[d.properties.nam_ja][label]) {
inner += data[d.properties.nam_ja][label];
noValue = false;
} else {
inner += '0';
}
inner += '</dd>';
})
if (!noValue) {
return tooltip
.style("top", (d3.event.pageY - 10) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.html('<h4>' + d.properties.nam_ja + '</h4><dl class="dl-horizontal">' + inner);
}
})
.on('mouseout', function() {
return tooltip.style("visibility", "hidden");
})
.transition()
.attr("fill", function(d) {
return (data[d.properties.nam_ja] && data[d.properties.nam_ja][initLabel] && !isNaN(+data[d.properties.nam_ja][initLabel])) ? color(data[d.properties.nam_ja][initLabel], values, selectedColor) : "#ffffff";
});
};

_initialize();
if (!hasActive) {
makeLabels(labels, initLabel);
}
//onchange label
$(document).on('click', '.chart-label', function() {
$('.chart-label').removeClass('active');
$(this).addClass('active');

var exports = {
update: function (data) {
_data = data;
initLabel = $(this).attr('data-chart-label');
console.log('label change : ' + initLabel);
svg.selectAll(".states")
.data(topojson.feature(topo, topo.objects.japan).features)
.on('mouseover', function() {
return tooltip.style("visibility", "visible");
})
.on('mousemove', function(d) {
var inner = '';
var noValue = true;
labels.forEach(function(label, i) {
var isActive = (label != initLabel) ? '' : 'active';

show(data.toMap(), topojson);
}
};
inner += '<dl class="dl-horizontal"><dt class="' + isActive + '">' + label + '</dt><dd class="' + isActive + '">';
if (data[d.properties.nam_ja] && data[d.properties.nam_ja][label]) {
inner += data[d.properties.nam_ja][label];
noValue = false;
} else {
inner += '0';
}
inner += '</dd>';
})
if (!noValue) {
return tooltip
.style("top", (d3.event.pageY - 10) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.html('<h4>' + d.properties.nam_ja + '</h4><dl class="dl-horizontal">' + inner);
}
})
.on('mouseout', function() {
return tooltip.style("visibility", "hidden");
})
.transition()
.attr("fill", function(d) {
return (data[d.properties.nam_ja] && data[d.properties.nam_ja][initLabel] && !isNaN(+data[d.properties.nam_ja][initLabel])) ? color(data[d.properties.nam_ja][initLabel], values, selectedColor) : "#ffffff";
});
});
//change color
$(document).on('click', '.chart-color-selector-button', function() {
$('.chart-color-selector-button').removeClass('active');
$(this).addClass('active');
console.log('color change : ');
selectedColor = this;

return exports;
};
});
svg.selectAll(".states")
.data(topojson.feature(topo, topo.objects.japan).features)
.transition()
.attr("fill", function(d) {
return (data[d.properties.nam_ja] && data[d.properties.nam_ja][initLabel] && !isNaN(+data[d.properties.nam_ja][initLabel])) ? color(data[d.properties.nam_ja][initLabel], values, selectedColor) : "#ffffff"
});
});
}
}

function makeLabels(labels, value) {
$('#chart-labels').remove();
var box = $('<div>').attr('id', 'chart-labels');
$(labels).each(function() {
var label = $('<label>').addClass('chart-label').attr('data-chart-label', this).html(this);
if (value == this) {
$(label).addClass('active');
}
$(box).append(label);
});

if (labels) {
$('#e2d3-chart-area').append(box).hide().fadeIn();
}
}

function color(d, values, selector) {
if (!selector) {
var colorSelector = $('.chart-color-selector-button');
selector = colorSelector[0];
}
var min = d3.min(values);
var max = d3.max(values);
var c;
if (!$(selector).hasClass('multi')) {
c = d3.scale.linear()
.domain([min, max])
.range([$(selector).attr('data-color-min'), $(selector).attr('data-color-max')])
.interpolate(d3.interpolateLab);
} else {
c = d3.scale.linear()
.domain([min, Math.floor((max - min) * 0.5), max])
.range([$(selector).attr('data-color-min'), '#FEFCEA', $(selector).attr('data-color-max')])
.interpolate(d3.interpolateLab);
}

return c(d);
}
1 change: 0 additions & 1 deletion japan-color/original.js
View file

This file was deleted.

Loading

0 comments on commit b1a1daf

Please sign in to comment.