Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
add a new piechart
  • Loading branch information
YuriCat committed Sep 12, 2015
1 parent f021e8d commit 5b42322
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 0 deletions.
10 changes: 10 additions & 0 deletions piechart2-javascript/README.md
@@ -0,0 +1,10 @@
Simple Pie Chart
====

Simple Pie Chart

## Data Format

| Data Label1 | Data Label2 | ... |
|-------------|-------------|-----|
| Data | Data | ... |
2 changes: 2 additions & 0 deletions piechart2-javascript/data.csv
@@ -0,0 +1,2 @@
Yes,No
12,8
8 changes: 8 additions & 0 deletions piechart2-javascript/main.css
@@ -0,0 +1,8 @@
.arc path {
stroke: #fff;
stroke-width: 1px;
}

.arc text {
font: 12px sans-serif;
}
49 changes: 49 additions & 0 deletions piechart2-javascript/main.js
@@ -0,0 +1,49 @@
//# require=d3

var width = root.clientWidth;
var height = root.clientHeight;
var radius = Math.min(width, height) * 0.3;

var color = d3.scale.ordinal()
.range(["#3333ff", "#dddddd", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius * 0.2);

var pie = d3.layout.pie()
.sort(null)
.value(function (d) { return d['age']; });

var chart = d3.select(root).append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

function update(data) {
var list = data.transpose().toList({header: ['name', 'age'], typed: true});

var setup = function (path, text) {
path
.attr('d', arc)
.style('fill', function (d, i) { return color(i); });
text
.attr('transform', function (d) { return 'translate(' + arc.centroid(d) + ')'; })
.attr('dy', '.35em')
.style('text-anchor', 'middle')
.text(function (d) { return d.data.name + ': ' + d.data.age; });
};

var aa = chart.selectAll('.arc').data(pie(list));

aa.transition().duration(500).call(function (selection) {
setup(selection.select('path'), selection.select('text'));
});

aa.enter().append('g').attr('class', 'arc').call(function (selection) {
setup(selection.append('path'), selection.append('text'));
});

aa.exit().remove();
}
Binary file added piechart2-javascript/thumbnail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5b42322

Please sign in to comment.