Skip to content

Commit

Permalink
bump version
Browse files Browse the repository at this point in the history
- rm min file
- update example
- update readme
  • Loading branch information
Thomas Preusse committed Jul 13, 2014
1 parent 8fac169 commit a023a50
Show file tree
Hide file tree
Showing 6 changed files with 242 additions and 177 deletions.
123 changes: 117 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,120 @@
radar-chart-d3
==============
## Radar Chart
A reusable radar chart implementation in D3.js. Styleable, configurable and transition enabled.

Simple radar chart in D3.js
[![Radar Example](http://bl.ocks.org/tpreusse/raw/2bc99d74a461b8c0acb1/thumbnail.png)](http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1)

Example
=======
## Usage

http://graves.cl/radar-chart-d3
### Install
`bower install git@github.com:tpreusse/radar-chart-d3.git --save`

### Data structure
```
var data = [
{
className: 'germany', // optional can be used for styling
axes: [
{axis: "strength", value: 13},
{axis: "intelligence", value: 6},
{axis: "charisma", value: 5},
{axis: "dexterity", value: 9},
{axis: "luck", value: 2}
]
},
{
className: 'argentina',
axes: [
{axis: "strength", value: 6},
{axis: "intelligence", value: 7},
{axis: "charisma", value: 10},
{axis: "dexterity", value: 13},
{axis: "luck", value: 9}
]
}
];
```

### Simple single chart drawing
```html
<div class="chart-container"></div>
<script>
RadarChart.draw(".chart-container", data);
</script>
```

### D3.js reusable chart API
```javascript
var chart = RadarChart.chart();
var svg = d3.select('body').append('svg')
.attr('width', 600)
.attr('height', 800);

// darw one
svg.append('g').classed('focus', 1).datum(data).call(chart);

// draw many radars
var game = svg.selectAll('g.game').data(
[
data,
data,
data,
data
]
);
game.enter().append('g').classed('game', 1);
game
.attr('transform', function(d, i) { return 'translate(150,600)'; })
.call(chart);
```

### Style with CSS
```css
.radar-chart .area {
fill-opacity: 0.7;
}
.radar-chart.focus .area {
fill-opacity: 0.3;
}
.radar-chart.focus .area.focused {
fill-opacity: 0.9;
}
.area.germany, .germany .circle {
fill: #FFD700;
stroke: none;
}
.area.argentina, .argentina .circle {
fill: #ADD8E6;
stroke: none;
}
```

### Configure
```javascript
// retrieve config
chart.config();
// all options with default values
chart.config({
containerClass: 'radar-chart', // target with css, default stylesheet targets .radar-chart
w: 600,
h: 600,
factor: 0.95,
factorLegend: 1,
levels: 3,
maxValue: 0,
radians: 2 * Math.PI,
color: d3.scale.category10(), // pass a noop (function() {}) to decide color via css
axisLine: true,
axisText: true,
circles: true,
radius: 5,
axisJoin: function(d, i) {
return d.className || i;
},
transitionDuration: 300
});
```

## Example

[![Example](https://rawgit.com/tpreusse/radar-chart-d3/master/example/demo.svg)](http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1)
http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "radar-chart-d3",
"version": "1.1.0",
"version": "1.2.0",
"main": ["src/radar-chart.js", "src/radar-chart.css"],
"description": "Radar chart based on D3",
"license": "Apache",
Expand Down
Binary file removed example/demo.png
Binary file not shown.
22 changes: 22 additions & 0 deletions example/demo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit a023a50

Please sign in to comment.