add charts

dot-bar-chart/README.md

@@ -0,0 +1 @@
+Dot Bar ChartThe motional bar chart which is made with dots.

dot-bar-chart/data.csv

@@ -0,0 +1,7 @@
+"year","A","B","C","D","E","F","G"
+"0","401","150","0","144","48","410","803"
+"1","419","299","90","141","80","180","802"
+"2","468","440","97","95","48","42","860"
+"3","585","459","100","99","48","71","702"
+"4","462","634","89","80","44","104","670"
+"5","423","233","81","84","19","361","882"

dot-bar-chart/main.css

@@ -0,0 +1,6 @@
+svg {
+  font: 10px sans-serif;
+  padding: 10px;
+  display: block;
+  margin: auto;
+}

dot-bar-chart/main.js

@@ -0,0 +1,12 @@
+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());
+      }
+    };
+  };
+});

dot-bar-chart/original.js

@@ -0,0 +1,237 @@
+var dim = { width: 600, height: 400 };
+var margin = { top: 10, bottom: 50, left: 50, right: 10 };
+var inputHeight = 20;
+var numberFormat = d3.format('.0f');
+dim.graphWidth = dim.width - margin.left - margin.right;
+dim.graphHeight = dim.height - margin.top - margin.bottom;
+
+
+d3.select('body').on('keydown', function () {
+    if (d3.event.which === 39) {
+        next();
+    }
+    if (d3.event.which === 37) {
+        prev();
+    }
+});
+var svg = d3.select('#e2d3-chart-area').append('svg')
+  .attr({ width: dim.width, height: dim.height })
+  .style({ padding: 0 });
+
+var axisLayer = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')').attr("id","g-axis-layer");
+var graphLayer = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')').attr("id", "g-graph-layer");
+var inputLayer = svg.append('g').attr('transform', 'translate(0,' + (dim.height - inputHeight) + ')').attr("id", "g-input-layer");
+
+var xScale = d3.scale.ordinal().rangeBands([0, dim.graphWidth], 0.05);
+var xLocalScale = d3.scale.ordinal();
+var yScale = d3.scale.ordinal().rangePoints([dim.graphHeight, 0]);
+var colorScale = d3.scale.category10();
+var inputScale = d3.scale.ordinal().rangeBands([0, dim.width - margin.right]);
+
+var xAxis = d3.svg.axis().orient('bottom').scale(xScale);
+var yAxis = d3.svg.axis().orient('left').scale(yScale);
+
+var xAxisObj = axisLayer.append('g')
+  .attr('transform', 'translate(' + 0 + ',' + dim.graphHeight + ')')
+  .attr('class', 'axis')
+  .call(xAxis);
+var yAxisObj = axisLayer.append('g')
+  .attr('transform', 'translate(' + 0 + ',' + 0 + ')')
+  .attr('class', 'axis')
+  .call(yAxis);
+
+axisLayer.selectAll('.axis text').style('font', '14px "Lucida Grande", Helvetica, Arial, sans-serif');
+axisLayer.selectAll('.axis path.domain').style({ fill: 'none', stroke: '#000000', 'shape-rendering': 'crispEdges' });
+axisLayer.selectAll('.axis line').style({ fill: 'none', stroke: '#000000', 'shape-rendering': 'crispEdges' });
+
+var time = 0;
+var radius = 3;
+var mar = 0.6;
+var barWidth = 16;
+
+var auto = true;
+
+var duration = 2000;
+var delayMax = 1000;
+
+
+prev = function () {
+    trans(time - 1);
+}
+
+next = function () {
+    trans(time + 1);
+}
+
+
+function e2d3Show(updateFlag) {
+
+    if (updateFlag) {
+        e2d3.bind2Json(e2d3BindId, { dimension: '3d' }, show);
+    } else {
+        e2d3.addChangeEvent(e2d3BindId, e2d3Update, function () {
+            e2d3.bind2Json(e2d3BindId, { dimension: '3d' }, show);
+        });
+    }
+
+}
+function e2d3Update() {
+    d3.selectAll("#g-axis-layer g g").remove();
+    d3.selectAll("#g-graph-layer *").remove();
+    d3.selectAll("#g-input-layer *").remove();
+    e2d3Show(true);
+}
+
+function show(json) {
+    var displaydata = [];
+    var labels = json.keys;
+    var parties = json.header;
+
+    var partDict = {};
+    parties.forEach(function (d, i) {
+        partDict[d] = i;
+    });
+    var sums = {};
+    var data = {};
+
+    labels.forEach(function (label) {
+        var r = [];
+        parties.forEach(function (party) {
+          r.push(+json[label][party]);
+        });
+        data[label] = r;
+        sums[label] = d3.sum(data[label]);
+    });
+
+    var max = d3.max(labels.map(function (d) { return d3.max(data[d]); }));
+
+
+    var nrow = Math.ceil(dim.graphHeight / (2 * (radius + mar)));
+    barWidth = Math.ceil(max / nrow);
+    yScale.domain(d3.range(nrow));
+    yAxis.tickValues(d3.range(nrow).filter(function (d) { return d % 10 === 0; }));
+    yAxis.tickFormat(function (d) { return (d * barWidth); });
+    xScale.domain(parties.map(function (d, i) { return i; }));
+    xAxis.tickFormat(function (d) { return parties[d]; });
+    xAxisObj.call(xAxis);
+    yAxisObj.call(yAxis);
+    xLocalScale.rangeBands([0, xScale.rangeBand()]).domain(d3.range(barWidth));
+    colorScale.domain(d3.range(parties.length));
+
+    inputScale.domain(labels);
+    var currentButton = inputLayer.append('rect')
+      .attr('class', 'cursor')
+      .attr({ x: 0, y: 0, height: inputHeight, width: inputScale.rangeBand() })
+      .style('stroke', '#FFF')
+      .style('stroke-width', 2)
+      .style('fill', '#000');
+    var buttons = inputLayer.selectAll('.button').data(labels).enter().append('g').attr('class', 'button')
+      .attr('transform', function (d) { return 'translate(' + inputScale(d) + ',' + 0 + ')'; })
+      .on('click', function () {
+          var s = d3.select(this);
+          trans(labels.indexOf(s.datum()));
+      });
+    buttons.append('rect')
+      .attr({ x: 0, y: 0, height: inputHeight, width: inputScale.rangeBand() })
+      .style('stroke', '#FFF')
+      .style('stroke-width', 2)
+      .style('fill', 'rgba(0,0,0,0.1)');
+    buttons.append('text')
+      .text(function (d) { return d; })
+      .attr('x', function (d) { return inputScale.rangeBand() / 2; })
+      .attr('y', 18)
+      .style('fill', function (d, i) { return (i === 0) ? '#FFF' : '#000'; })
+      .style('text-anchor', 'middle')
+      .style('font', inputHeight + 'px "Lucida Grande", Helvetica, Arial, sans-serif');
+
+    var summax = d3.max(labels.map(function (d) { return sums[d]; }));
+    var displaydata = d3.range(summax).map(function (d) { return []; });
+    var indexMargin = 0;
+    parties.forEach(function (party, partyidx) {
+        for (var i = 0; i < data[labels[0]][partyidx]; ++i) {
+            displaydata[indexMargin + i].push({ label: partyidx, idx: i });
+        }
+        indexMargin += data[labels[0]][partyidx];
+    });
+    for (var i = indexMargin; i < summax; ++i) {
+        displaydata[i].push({ label: null, idx: null });
+    }
+
+    d3.range(1, labels.length).forEach(function (idx) {
+        var year = labels[idx];
+        var lastyear = labels[idx - 1];
+        var yearidx = idx;
+        var pool = [];
+        var unused = [];
+        var keep = [];
+        displaydata.forEach(function (d, i) {
+            var copy = { label: d[yearidx - 1].label, idx: d[yearidx - 1].idx };
+            d.push(copy);
+            if (d[yearidx].label == null) {
+                unused.push(i);
+            }
+            else {
+                if (data[year][d[yearidx].label] <= d[yearidx].idx) {
+                    pool.push(i);
+                }
+                else {
+                    keep.push(i);
+                }
+            }
+        });
+
+        d3.shuffle(pool);
+        if (sums[year] - sums[lastyear] > 0) {
+            pool = pool.concat(unused.splice(0, sums[year] - sums[lastyear]));
+            d3.shuffle(pool);
+        }
+        else {
+            pool.splice(sums[year] - keep.length).forEach(function (d) {
+                displaydata[d][yearidx] = { label: null, idx: null };
+            });
+            pool = pool.splice(0, sums[year] - keep.length);
+        }
+        var poolmargin = 0;
+
+        parties.forEach(function (party) {
+            if (data[year][partDict[party]] - data[lastyear][partDict[party]] > 0) {
+                for (var i = 0; i < (data[year][partDict[party]] - data[lastyear][partDict[party]]) ; ++i) {
+                    if (pool[poolmargin + i]) displaydata[pool[poolmargin + i]][yearidx] = { label: partDict[party], idx: i + data[lastyear][partDict[party]] };
+
+                };
+                poolmargin += data[year][partDict[party]] - data[lastyear][partDict[party]];
+            }
+        });
+
+    });
+    var votes = graphLayer.selectAll('.vote').data(displaydata).enter().append('circle')
+      .attr('class', 'vote')
+      .attr('r', radius)
+      .attr('cx', function (d) { return ((d[time].label != null) ? (xScale(d[time].label) + xLocalScale(d[time].idx % barWidth) + radius + mar) : (dim.graphWidth / 2)); })
+      .attr('cy', function (d) { return ((d[time].label != null) ? (yScale(Math.floor((d[time].idx + 0.1) / barWidth)) - radius - mar) : 0); })
+      .style('opacity', function (d) { return (d[time].label != null) ? 0.8 : 0.0; })
+      .style('fill', function (d) { return colorScale(d[time].label); });
+
+    var trans = function (to) {
+        if (to === time || to < 0 || to >= labels.length) {
+            return;
+        }
+        var current = time;
+        time = to;
+        yearTarget = labels[time];
+        var votes = graphLayer.selectAll('.vote')
+          .filter(function (d) { return d[current].label != d[time].label || d[current].idx != d[time].idx; })
+          .transition()
+          .duration(duration)
+          .delay(function (d) { return Math.random() * delayMax; })
+          .attr('cx', function (d) { return ((d[time].label != null) ? (xScale(d[time].label) + xLocalScale(d[time].idx % barWidth) + radius + mar) : (dim.graphWidth / 2)); })
+          .attr('cy', function (d) { return ((d[time].label != null) ? (yScale(Math.floor((d[time].idx + 0.1) / barWidth)) - radius - mar) : 0); })
+          .style('opacity', function (d) { return (d[time].label != null) ? 0.8 : 0.0; })
+          .style('fill', function (d) { return colorScale(d[time].label); });
+
+        inputLayer.select('.cursor').transition().duration(duration / 2)
+          .attr('x', function (d) { return inputScale(labels[time]); });
+        inputLayer.selectAll('.button text').transition().duration(duration / 2)
+          .style('fill', function (d, i) { return (i === time) ? '#FFF' : '#000'; })
+    }
+};

japan-color/README.md

@@ -0,0 +1 @@
+Japan Color====Paint any data to japanese states.

japan-color/data.csv

@@ -0,0 +1,48 @@
+"都道府県","セブンイレブン","ローソン","ファミリーマート","サークルKサンクス","ミニストップ","デイリ−ヤマザキ","上位6チェーン"
+"北海道","901","602","68","191","0","0","1,762"
+"青森県","0","200","54","187","36","21","498"
+"岩手県","95","160","107","89","8","23","482"
+"宮城県","358","219","235","117","113","32","1,074"
+"秋田県","39","180","73","97","0","34","423"
+"山形県","160","70","105","51","0","6","392"
+"福島県","396","97","142","19","72","16","742"
+"茨城県","599","137","219","54","104","27","1,140"
+"栃木県","388","134","156","51","32","17","778"
+"群馬県","431","90","97","18","51","28","715"
+"埼玉県","1,026","489","549","192","157","71","2,484"
+"千葉県","888","453","478","144","195","147","2,305"
+"東京都","2,144","1,578","1,852","633","281","153","6,641"
+"神奈川県","1,165","830","715","354","141","83","3,288"
+"新潟県","388","122","68","109","0","68","755"
+"山梨県","173","103","85","0","0","48","409"
+"長野県","421","150","115","146","0","42","874"
+"富山県","106","182","80","82","0","10","460"
+"石川県","85","100","90","212","0","15","502"
+"福井県","50","104","101","66","9","0","330"
+"岐阜県","135","143","103","293","106","57","837"
+"静岡県","600","214","226","373","157","43","1,613"
+"愛知県","874","547","531","1158","210","81","3,401"
+"三重県","76","105","163","262","98","0","704"
+"滋賀県","190","141","113","48","7","1","500"
+"京都府","246","272","228","115","39","35","935"
+"大阪府","820","1,010","1002","402","80","162","3,476"
+"兵庫県","499","618","390","172","40","47","1,766"
+"奈良県","102","99","88","50","12","20","371"
+"和歌山県","53","114","82","29","0","19","297"
+"鳥取県","0","106","60","0","0","0","166"
+"島根県","12","110","53","0","0","0","175"
+"岡山県","262","138","120","136","0","17","673"
+"広島県","480","169","203","51","0","30","933"
+"山口県","266","119","73","0","0","4","462"
+"徳島県","74","118","67","30","19","1","309"
+"香川県","70","115","101","35","35","16","372"
+"愛媛県","8","175","111","159","10","9","472"
+"高知県","0","66","45","59","0","0","170"
+"福岡県","798","415","431","67","133","78","1,922"
+"佐賀県","166","64","72","0","18","11","331"
+"長崎県","125","102","149","0","0","51","427"
+"熊本県","256","133","129","0","0","46","564"
+"大分県","132","158","87","0","2","8","387"
+"宮崎県","166","97","97","0","0","1","361"
+"鹿児島県","152","203","235","0","0","0","590"
+"沖縄県","0","165","233","0","0","0","398"