diff --git a/packages/charts-vanilla-radar/LICENSE.md b/packages/charts-vanilla-radar/LICENSE.md
new file mode 100644
index 0000000..aefc709
--- /dev/null
+++ b/packages/charts-vanilla-radar/LICENSE.md
@@ -0,0 +1,12 @@
+Copyright 2017 IBM
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/charts-vanilla-radar/README.md b/packages/charts-vanilla-radar/README.md
new file mode 100644
index 0000000..5c90567
--- /dev/null
+++ b/packages/charts-vanilla-radar/README.md
@@ -0,0 +1,7 @@
+# `@ibm-design/charts-vanilla-radar`
+
+## Usage
+
+```bash
+yarn add @ibm-design/charts-vanilla-radar
+```
diff --git a/packages/charts-vanilla-radar/gulpfile.js b/packages/charts-vanilla-radar/gulpfile.js
new file mode 100644
index 0000000..9ba14f7
--- /dev/null
+++ b/packages/charts-vanilla-radar/gulpfile.js
@@ -0,0 +1,43 @@
+var gulp = require('gulp'),
+ babel = require('gulp-babel'),
+ browserSync = require('browser-sync')
+ sass = require('gulp-sass'),
+ plumber = require('gulp-plumber'),
+ sourcemaps = require('gulp-sourcemaps');
+
+
+
+gulp.task('serve', ['compile-js', 'compile-scss'], function(){
+ browserSync.init({
+ server: {
+ baseDir:'./'
+ }
+ })
+
+ gulp.watch(['src/scripts/*.js'], ['compile-js'])
+ gulp.watch(["src/styles/*.scss"], ['compile-scss']);
+ gulp.watch(['*.html','src/styles/*.scss','src/scripts/*.js']).on('change', browserSync.reload)
+
+})
+
+gulp.task('compile-js', function(){
+ return gulp.src('src/scripts/*.js')
+ .pipe(plumber())
+ .pipe(sourcemaps.init())
+ .pipe(babel({
+ presets:['es2015']
+ }))
+ .pipe(sourcemaps.write('maps'))
+ .pipe(gulp.dest('lib'))
+})
+
+gulp.task('compile-scss', function(){
+ return gulp.src('src/styles/*.scss')
+ .pipe(plumber())
+ .pipe(sourcemaps.init())
+ .pipe(sass().on('error', sass.logError))
+ .pipe(sourcemaps.write('maps'))
+ .pipe(gulp.dest('lib'))
+})
+
+gulp.task('default', ['serve'])
\ No newline at end of file
diff --git a/packages/charts-vanilla-radar/index.html b/packages/charts-vanilla-radar/index.html
new file mode 100644
index 0000000..09e9801
--- /dev/null
+++ b/packages/charts-vanilla-radar/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Radar Chart
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/charts-vanilla-radar/package.json b/packages/charts-vanilla-radar/package.json
new file mode 100644
index 0000000..1551148
--- /dev/null
+++ b/packages/charts-vanilla-radar/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@ibm-design/charts-vanilla-radar",
+ "version": "0.0.0",
+ "main": "lib/index.js",
+ "scripts": {
+ "build": "npm run clean && babel -d lib src",
+ "clean": "rimraf lib"
+ },
+ "license": "Apache-2.0",
+ "devDependencies": {
+ "babel-cli": "^6.18.0",
+ "babel-preset-es2015": "^6.22.0",
+ "browser-sync": "^2.18.7",
+ "gulp": "^3.9.1",
+ "gulp-babel": "^6.1.2",
+ "gulp-plumber": "^1.1.0",
+ "gulp-sass": "^3.1.0",
+ "gulp-sourcemaps": "^2.4.1",
+ "rimraf": "^2.5.4"
+ }
+}
diff --git a/packages/charts-vanilla-radar/src/__tests__/Chart-test.js b/packages/charts-vanilla-radar/src/__tests__/Chart-test.js
new file mode 100644
index 0000000..890958c
--- /dev/null
+++ b/packages/charts-vanilla-radar/src/__tests__/Chart-test.js
@@ -0,0 +1,7 @@
+import Chart from '../';
+
+describe('Radar Component', () => {
+ it('should render', () => {
+ expect(true).toBe(true, 'This is a placeholder true')
+ });
+});
diff --git a/packages/charts-vanilla-radar/src/scripts/data.js b/packages/charts-vanilla-radar/src/scripts/data.js
new file mode 100644
index 0000000..a799755
--- /dev/null
+++ b/packages/charts-vanilla-radar/src/scripts/data.js
@@ -0,0 +1,39 @@
+const data = [
+ [//iPhone
+ {axis:"Battery Life",value:0.22},
+ {axis:"Brand",value:0.28},
+ {axis:"Contract Cost",value:0.29},
+ {axis:"Design And Quality",value:0.17},
+ {axis:"Have Internet Connectivity",value:0.22},
+ {axis:"Large Screen",value:0.02},
+ {axis:"Price Of Device",value:0.21},
+ {axis:"To Be A Smartphone",value:0.50}
+ ],[//Samsung
+ {axis:"Battery Life",value:0.27},
+ {axis:"Brand",value:0.16},
+ {axis:"Contract Cost",value:0.35},
+ {axis:"Design And Quality",value:0.13},
+ {axis:"Have Internet Connectivity",value:0.20},
+ {axis:"Large Screen",value:0.13},
+ {axis:"Price Of Device",value:0.35},
+ {axis:"To Be A Smartphone",value:0.38}
+ ],[//Nokia Smartphone
+ {axis:"Battery Life",value:0.26},
+ {axis:"Brand",value:0.10},
+ {axis:"Contract Cost",value:0.30},
+ {axis:"Design And Quality",value:0.14},
+ {axis:"Have Internet Connectivity",value:0.22},
+ {axis:"Large Screen",value:0.04},
+ {axis:"Price Of Device",value:0.41},
+ {axis:"To Be A Smartphone",value:0.30}
+ ],[//Nokia Smartphone
+ {axis:"Battery Life",value:0.1},
+ {axis:"Brand",value:0.1},
+ {axis:"Contract Cost",value:0.1},
+ {axis:"Design And Quality",value:0.1},
+ {axis:"Have Internet Connectivity",value:0.1},
+ {axis:"Large Screen",value:0.1},
+ {axis:"Price Of Device",value:0.1},
+ {axis:"To Be A Smartphone",value:0.1}
+ ]
+];
\ No newline at end of file
diff --git a/packages/charts-vanilla-radar/src/scripts/index.js b/packages/charts-vanilla-radar/src/scripts/index.js
new file mode 100644
index 0000000..e79fd5f
--- /dev/null
+++ b/packages/charts-vanilla-radar/src/scripts/index.js
@@ -0,0 +1,124 @@
+'use strict'
+class Radar {
+
+ constructor(graphNode, data){
+ this.data = this.formatData(data)
+ this.target = d3.select(graphNode)
+
+ this.scale;
+ this.line;
+
+ this.cfg = (()=>{
+ let w = 600,
+ h = 600,
+ numAxis = data[0].length;
+
+ return {
+ w: w,
+ h: h,
+ r: w / 2,
+ margin: {top: 20, right: 20, bottom: 20, left: 20},
+ levels: 5,
+ max: null, // will be determined by data
+ labelFactor: 60, // how much further outside the radius does the label appears
+ wrapWidth: null, // word wrap after this number of pixels
+ opacityArea: 0.4,
+ strokeWidth: 2,
+ color: 'blue',
+ numAxis: numAxis,
+ angleSlice: Math.PI * 2 / numAxis, // angle of slice in radians
+ shape: 'circle', //circle, polygon, square
+ }
+ })()
+ }
+
+
+
+
+
+
+ scalesAndLinesFunctions(){
+ let that = this
+ this.cfg.max = d3.max(d3.merge(this.data), d => d.value)
+ this.scale = d3.scaleLinear()
+ .domain([0, this.cfg.max])
+ .range([0, this.cfg.r])
+ this.line = d3.radialLine()
+ .angle((d, i)=>{ return -(i * that.cfg.angleSlice) + Math.PI / 2;})
+ .radius((d)=>{ return that.scale(d.value)})
+
+ }
+
+ // setupRadar(){
+ // this.target.style({
+ // width: cfg.w + cfg.margin.left + cfg.margin.right,
+ // height: cfg.h + cfg.margin.top + cfg.margin.bottom,
+ // })
+
+ // if(cfg.shape == 'circle'){
+ // //draw rings
+ // for(var i = 0; i < cfg.levels; i++){
+
+ // }
+
+ // } else if(cfg.shape == 'polygon'){
+ // //TODO
+ // } else if(cfg.shape =='square'){
+ // //TODO
+ // }
+ // }
+
+ //customize this function to fit data model you want
+ formatData(data){
+ data.map((d)=>{
+ d.map((v)=>{
+ v.value = Math.round(v.value*100)
+ })
+ })
+ return data
+ }
+}
+
+
+let a;
+function test(data){
+ a = new Radar('svg', data)
+ a.scalesAndLinesFunctions()
+ console.log(a.cfg.max)
+ console.log(a.scale(34))
+ a.target.attrs({
+ width: a.cfg.w,
+ height: a.cfg.h
+ })
+ a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`)
+ .append('path')
+ .datum(data[0])
+ .attrs({
+ 'stroke-width': 1.5,
+ 'fill': 'red',
+ 'opacity': 0.4,
+ 'd' : a.line
+ })
+ a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`)
+ .append('path')
+ .datum(data[2])
+ .attrs({
+ 'stroke-width': 1.5,
+ 'fill': 'blue',
+ 'opacity': 0.4,
+ 'd' : a.line
+ })
+ a.target.append('g').attr('transform', `translate(${a.cfg.w/2} ${a.cfg.h/2})`)
+ .append('path')
+ .datum(data[1])
+ .attrs({
+ 'stroke-width': 1.5,
+ 'fill': 'green',
+ 'opacity': 0.4,
+ 'd' : a.line
+ })
+
+}
+
+
+test(data)
\ No newline at end of file
diff --git a/packages/charts-vanilla-radar/src/styles/styles.scss b/packages/charts-vanilla-radar/src/styles/styles.scss
new file mode 100644
index 0000000..7ad97c1
--- /dev/null
+++ b/packages/charts-vanilla-radar/src/styles/styles.scss
@@ -0,0 +1,10 @@
+body {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Helvetica";
+}
+
+.radar {
+ border: 1px solid black;
+}
\ No newline at end of file