Skip to content
This repository has been archived by the owner on Nov 4, 2022. It is now read-only.

Commit

Permalink
drawing axis, shapes, and rings
Browse files Browse the repository at this point in the history
  • Loading branch information
@photodow
Jamie Skinner authored and photodow committed Feb 22, 2017
1 parent ad971e1 commit df09e47
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 67 deletions.
9 changes: 0 additions & 9 deletions packages/charts-vanilla-radar/src/scripts/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,5 @@ const data = [
{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}
]
];
169 changes: 112 additions & 57 deletions packages/charts-vanilla-radar/src/scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,20 @@ class Radar {

this.scale;
this.line;
this.axis = {}

this.cfg = (()=>{
let w = 600,
h = 600,
numAxis = data[0].length;
let w = 500,
h = w,
numAxis = data[0].length,
margin = {top: 20, right: 20, bottom: 20, left: 20},
r = w / 2 - margin.top - margin.bottom;

return {
w: w,
h: h,
r: w / 2,
margin: {top: 20, right: 20, bottom: 20, left: 20},
r: r,
margin: margin,
levels: 5,
max: null, // will be determined by data
labelFactor: 60, // how much further outside the radius does the label appears
Expand All @@ -27,46 +30,99 @@ class Radar {
color: 'blue',
numAxis: numAxis,
angleSlice: Math.PI * 2 / numAxis, // angle of slice in radians
shape: 'circle', //circle, polygon, square
shape: 'circle', //circle, polygon, square,
dotSize: 4, //if not set, dots will not be drawn.
axisStyle: {
'stroke': 'black',
'stroke-width': 1,
}
}
})()
}


draw(){



}

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])
.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)})
.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,
// })
setupRadar(){
this.target.style({
width: this.cfg.w,
height: this.cfg.h,
})

// if(cfg.shape == 'circle'){
// //draw rings
// for(var i = 0; i < cfg.levels; i++){
this.axis.names = data[0].map( el => el.axis)
this.axis.length = this.axis.names.length

// }

// } else if(cfg.shape == 'polygon'){
// //TODO
// } else if(cfg.shape =='square'){
// //TODO
// }
// }
//puts 0,0 in the center of the svg
this.globalGroup = this.target.append('g').attrs({
'class': 'chart',
'transform': `translate(${this.cfg.w/2} ${this.cfg.h/2})`
})

// draws the axis
if(this.cfg.axisStyle){
this.axisGroup = this.globalGroup.append('g').attr('class','axis-lines')
this.axisGroup.selectAll('.axis-line').data(this.axis.names).enter().append('line')
.attrs({
'x1': 0,
'y1': 0,
// `+ Math.PI/2 to make the Axis line up with the correct Data`
'x2': (d,i)=>{ return this.scale(this.cfg.max * 1.1) * Math.cos( this.cfg.angleSlice*i + Math.PI/2)},
'y2': (d,i)=>{ return this.scale(this.cfg.max * 1.1) * Math.sin( this.cfg.angleSlice*i + Math.PI/2)},
'class': 'axis-line',
}).styles(this.cfg.axisStyle)
}

if(this.cfg.shape == 'circle'){
//draw rings
let ringInterval = this.cfg.max / this.cfg.levels
var ringRadiusValues = d3.range(ringInterval, this.cfg.max+1, ringInterval).reverse() //add 1 so you include the MAX
console.log(ringRadiusValues)
let g = this.globalGroup.append('g').attr('class', 'grid-circle')
g.selectAll('.level').data(ringRadiusValues).enter().append('circle').attrs({
'fill': 'none',
'cx': 0,
'cy': 0,
'class': 'label',
'r': (d) => {return this.scale(d)},
'stroke': 'black',
'stroke-width': 1,
'stroke-dasharray': '1 3',
'opacity': 0.5
})

g.selectAll('.axis-label').data(ringRadiusValues).enter().append('text').attrs({
'class': 'axis-label',
'x': '0',
'y': (d) => {return -this.scale(d)},
'dy': '-0.3em',
'dx': '0.5em',
'font-size': '0.8em',
'fill': 'grey',
}).text((d) => {return d+'%'})

//text indicating % for each level
} else if(this.cfg.shape == 'polygon'){
//TODO
} else if(this.cfg.shape =='square'){
//TODO
}
}

//customize this function to fit data model you want
formatData(data){
Expand All @@ -84,40 +140,39 @@ 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
})

a.setupRadar()

let g = a.globalGroup.append('g').attr('class', 'lines')
g.append('path')
.datum(data[1])
.attrs({
'stroke-width': 1.5,
'fill': 'red',
'opacity': 1,
'd' : a.line,
'class': 'iphone'
})
g.append('path')
.datum(data[2])
.attrs({
'stroke-width': 1.5,
'fill': 'blue',
'opacity': 1,
'd' : a.line
})
g.append('path')
.datum(data[0])
.attrs({
'stroke-width': 1.5,
'fill': 'green',
'opacity': 1,
'd' : a.line,
'class': 'iphone'
})
}


Expand Down
8 changes: 7 additions & 1 deletion packages/charts-vanilla-radar/src/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,10 @@ body {

.radar {
border: 1px solid black;
}

path {
mix-blend-mode: multiply;
opacity: 0.3;
}
}

0 comments on commit df09e47

Please sign in to comment.