...
 
Commits (2)
// Config file for radarChart///////
/* global d3 */
import { scaleOrdinal } from 'd3-scale'
const margin = { top: 150, right: 150, bottom: 150, left: 150 } // was before 120 for each
const width = Math.min(800, window.innerWidth - 10) - margin.left - margin.right
const height = Math.min(800, window.innerHeight - 10) - margin.top - margin.bottom
let radarOptions = {
w: width, // Width of the circle
h: height, // Height of the circle
margin: margin, // The margins of the SVG
maxValue: 40, // What is the value that the biggest circle will represent
minValue: 8, // What is the minimum value
levels: 5, // How many levels or inner circles should there be drawn
labelFactor: 1.35, // How much farther than the radius of the outer circle should the labels be placed
fontSize: '16px', // Fontsize
fontColor: '#474747', // Fontcolor
wrapWidth: 60, // The number of pixels after which a label needs to be given a new line
opacityArea: 0.4, // The opacity of the area of the blob
dotRadius: 7, // Radius of the datapoint dots
dotOpacity: 1.0, // The size of the colored circles of each blog
opacityCircles: 0.03, // The opacity of the areas between the circles
strokeWidth: 3, // The width of the stroke around each blob
roundStrokes: false, // Strokes round or straight
outlines: true, // If true the area and stroke will follow a round path (cardinal-closed)
color: scaleOrdinal().range(['#EDC951', '#CC333F', '#00A0B0']),
glowblobWrapper: false, // Glow for Data Blobs
glowAxisGrid: false, // Glow for Grid
mouseOver: false, // Mouseover on or off
}
export default radarOptions
......@@ -98,9 +98,32 @@ function drawRadarAxis(g, params, baseSize) {
.style('stroke-width', '2px')
}
function drawRadarGroupArea(g, params, baseSize, groupName) {
let computedData = computeData(params, baseSize)
let chartMin = computedData.chartMin
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let entityScoreKey = groupName === 'user' ? 'userScore' : 'average'
let color = groupName === 'user' ? 'green' : 'red'
function drawRadarGroup(g, params, baseSize, groupName) {
let radarLine = d3.lineRadial()
.curve(d3.curveLinearClosed)
.radius( (d, i) => rScale(d[entityScoreKey])/ 8)
.angle((d, i) => i * ((2 * Math.PI)/params.length))
g.append('g')
.append('path')
.datum(params)
.attr('d', radarLine)
.attr('class', 'line')
.attr('stroke-width', 1)
.style('fill', color)
.style('opacity', '0.5')
.style('stroke', 'black')
.style("stroke-opacity", 1)
}
function drawRadarGroupPoints(g, params, baseSize, groupName) {
let computedData = computeData(params, baseSize)
let chartMin = computedData.chartMin
let chartMax = computedData.chartMax
......@@ -112,7 +135,36 @@ function drawRadarGroup(g, params, baseSize, groupName) {
.data([params])
.enter().append('g')
.attr('class', 'radarCircleWrapper')
.attr('fill', 'red')
.style('stroke-width', 1)
.style('stroke', 'black')
let scoreCircle = scoreCircleWrapper.selectAll('.radarScoreCircle')
.data(d => d)
.enter().append('circle')
.attr('class', 'scoreCircle')
.attr('r', rScale(0.15))
.attr('cx', (d, i) => rScale((d[entityScoreKey] / d.questionCount) ) * Math.cos((Math.PI * 2 / params.length) * i - Math.PI / 2))
.attr('cy', (d, i) => rScale((d[entityScoreKey] / d.questionCount) ) * Math.sin((Math.PI * 2 / params.length) * i - Math.PI / 2))
.style('fill', color)
}
function hookRadarTooltips(g, params, baseSize, groupName) {
let computedData = computeData(params, baseSize)
let chartMin = computedData.chartMin
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let entityScoreKey = groupName === 'user' ? 'userScore' : 'average'
let color = groupName === 'user' ? 'green' : 'red'
let scoreCircleWrapper = g.selectAll('.tooltipCircleWrapper')
.data([params])
.enter().append('g')
.attr('class', 'tooltip')
.style('stroke-width', 1)
.style('stroke', 'black')
let tip = d3.tip()
.attr('class', 'd3-tip')
......@@ -123,20 +175,27 @@ function drawRadarGroup(g, params, baseSize, groupName) {
let scoreCircle = scoreCircleWrapper.selectAll('.radarScoreCircle')
.data(d => d)
.enter().append('circle')
.attr('class', 'scoreCircle')
.attr('r', rScale(0.2))
.attr('class', 'tooltipHookCircle')
.attr('r', rScale(0.17))
.attr('cx', (d, i) => rScale((d[entityScoreKey] / d.questionCount) ) * Math.cos((Math.PI * 2 / params.length) * i - Math.PI / 2))
.attr('cy', (d, i) => rScale((d[entityScoreKey] / d.questionCount) ) * Math.sin((Math.PI * 2 / params.length) * i - Math.PI / 2))
.style('fill', color)
.style('opacity', 0.1)
.style('stroke-opacity','1.0')
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
// ToDo: Do everything missing
}
function drawLabels(g, params, baseSize){
let computedData = computeData(params, baseSize)
let chartMin = computedData.chartMin
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let legend = g.append('g')
.attr('class', 'legend')
/*.attr('transform', function (d, i) {
return 'translate(-50,0)'
})*/
.attr('height', 300)
.attr('width', 500)
......@@ -149,19 +208,15 @@ function drawRadarGroup(g, params, baseSize, groupName) {
.attr('y', function (d, i) {
return rScale(chartMax * 1.17) * Math.sin((Math.PI * 2 / params.length) * i - Math.PI / 2)
})
.text(function (d) {
var text = d.subScaleName
return text
})
.text(d => d.subScaleName)
.style('font-size', baseSize/40)
.style("text-anchor", "middle")
}
// HANDLE REQUEST
let initializeBarChart = (htmlElement, response, params, groupName) => {
let baseSize = htmlElement.offsetWidth
let baseSize = htmlElement.offsetWidth / 1.1 // Reduce size, in favor of the chart overflows
htmlElement.innerHTML = ''
let svg = d3.select(htmlElement).append('svg')
......@@ -173,8 +228,13 @@ let initializeBarChart = (htmlElement, response, params, groupName) => {
.attr('transform', 'translate(' + (baseSize / 2 + margins.left) + ',' + (baseSize / 2 + margins.top) + ')')
drawRadarAxis(g, params.data, baseSize)
drawRadarGroup(g, params.data, baseSize, groupName)
drawRadarGroup(g, params.data, baseSize, 'user')
drawLabels(g, params.data, baseSize)
drawRadarGroupArea(g, params.data, baseSize, groupName)
drawRadarGroupPoints(g, params.data, baseSize, groupName)
drawRadarGroupArea(g, params.data, baseSize, 'user')
drawRadarGroupPoints(g, params.data, baseSize, 'user')
hookRadarTooltips(g, params.data, baseSize, groupName)
hookRadarTooltips(g, params.data, baseSize, 'user')
}
let filename = document.currentScript.src.split('/').reverse()[0]
......
This diff is collapsed.