Commit 9ea7a82c authored by Jan Dillenberger's avatar Jan Dillenberger

Delete unused charts

parent 541850a4
Pipeline #21893 failed with stage
in 145 minutes and 56 seconds
import { select, selectAll } from 'd3-selection'
import { scaleLinear } from 'd3-scale'
import { histogram, bisectLeft, max, min, range } from 'd3-array'
import { line, curveCatmullRom } from 'd3-shape'
import { format } from 'd3-format'
import { axisBottom, axisLeft } from 'd3-axis'
import { randomNormal } from 'd3-random'
//import Fetcher from './lib/fetcher.js'
const d3 = Object.assign(
{},
{
select,
selectAll,
max,
min,
histogram,
bisectLeft,
scaleLinear,
curveCatmullRom,
line,
format,
axisBottom,
axisLeft,
range,
randomNormal
})
/* exported RadarChart */
/// //////////////////////////////////////////////////////
/// ////////// The personality Chart Function ////////////
/// //////////// Written by Nadieh Bremer ////////////////
/// /////////////// VisualCinnamon.com ///////////////////
/// //////// Inspired by the code of alangrafu ///////////
/// //////////////////////////////////////////////////////
/// //////// Work in progress port to d3.js v4 ///////////
/// ////////////// by Fateha Abul ///////////////////////
/// //////////////////////////////////////////////////////
/**
* @description Main function for RadarChart
* @param {*} id Class name of div
* @param {*} data Array containing the data
* @param {*} options Take options from config file
*/
/// //////////////////////////////////////////////////////
/// //////////////// Helper Function /////////////////////
// //////////////////////////////////////////////////////
// Taken from http://bl.ocks.org/mbostock/7555321
// Wraps SVG text
function wrap (text, width)
{
text.each(function () {
let text = d3.select(this)
let words = text.text().split(/\s+/)
let line = []
let lineNumber = 0
let lineHeight = 1.4 // ems
let y = text.attr('y')
let x = text.attr('x')
let dy = parseFloat(text.attr('dy'))
let tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em')
words.forEach(function (word, index) {
line.push(word)
tspan.text(line.join(' '))
if (tspan.node().getComputedTextLength() > width) {
line.pop()
tspan.text(line.join(' '))
line = [word]
if (index === 0) {
tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em').text(word)
} else {
tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word)
}
}
})
})
}
let data = [] // generated data given mean and sigma
let userData = [3.0] // User result
// FOR DEV + DEBUGGING
// TODO: Move to config-default.js
makeData((18.55 / 8.0), (8.1 / 8.0))
// mean sigma
// Chart marging
let margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
}
let width = 960 - margin.left - margin.right
let height = 150 - margin.top - margin.bottom
// Main Function
function Gauss (id, data, options) {
//!! CONFIG TODO !!
let cfg
if (typeof options === 'undefined') {
throw new Error('Options are undefined!')
} else {
cfg = options
}
// Draw Elements and Plot
function draw () {
d3.select('div').select('svg').remove()
let gaussBox = d3.select('.gauss')
let svg = gaussBox.append('svg')
.attr('class', 'gaussSVG')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.bottom + margin.top)
let g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
let xScale = d3.scaleLinear()
.rangeRound([0, width])
.domain([1, 5])
let yScale = d3.scaleLinear()
.range([height, 0])
g.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height} )`)
.call(d3.axisBottom(xScale))
// transfere to config
.style('font-size', '16px')
let plotLine = d3.line()
.x(function (d) { return xScale(d.q) })
.y(function (d) { return yScale(d.p) })
g.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', plotLine)
// Draw marker for user value
let marker = g.selectAll('.marker').data(userData).enter()
.append('g')
.attr('class', 'marker')
// red stroke of the user
marker.append('line')
.attr('stroke', 'red')
.attr('y1', height * 0.25)
.attr('y2', height)
.attr('x1', xScale(userData))
.attr('x2', xScale(userData))
//transfere to config
.attr('stroke-width', 3)
}
draw()
}
// Call Plot
Gauss('.gauss', data, 0)
// HELPER FUNCTIONS
// ToDo: Remove when done implementing fetch
// Computed gaussian distributed data given mean and standard deviation
function makeData (mean, sigma)
{
let q // values of sample on x axis. We use equidistant values
let p // computed y value given q
let el // object consiting of q values and their corisponding p values
let maxRefGrp = 32 // ToDo: ersetze durch max der Refernzgruppe
let minRefGrp = 9 // ToDo: ersteze durch min der Refernzgruppe
let sampleSize = 100 // Size of the sample for gaussian distribution
let qcount = 8
for (var i = 0; i <= sampleSize; i++) {
q = 1 + ((5-1) / sampleSize * i)
// q = (minRefGrp + ((maxRefGrp - minRefGrp) / sampleSize * i)) / qcount
p = gaussian(q, mean, sigma)
console.log(q)
el = {
'q': q,
'p': p
}
data.push(el)
}
// We generate data to test the plot. We need to map the generated values to our scale
let maxQ = d3.max(data, function (d) {
return d.q
})
let minQ = d3.min(data, function (d) {
return d.q
})
console.log(`minQ: ${minQ}`)
console.log(`maxQ: ${maxQ}`)
let gScale = d3.scaleLinear()
.domain([1, maxQ]) // defines how big the domain of the curve is
.range([minQ, maxQ]) // maxQ defines how far the curve will spread
data = data.map(function (d) {
return {
'q': gScale(d.q),
'p': d.p
}
})
// After
maxQ = d3.max(data, function (d) {
return d.q
})
minQ = d3.min(data, function (d) {
return d.q
})
console.log(`minQ: ${minQ}`)
console.log(`maxQ: ${maxQ}`)
}
function gaussian (x, mean, sigma) {
const gaussianConstant = 1 / (Math.sqrt(2 * Math.PI) * sigma)
x = (x - mean) / sigma
return gaussianConstant * (Math.exp(-0.5 * (x * x)))
}
import { select, selectAll } from 'd3-selection'
import { scaleLinear } from 'd3-scale'
import { histogram, bisectLeft, max, min, range } from 'd3-array'
import { line, curveCatmullRom } from 'd3-shape'
import { format } from 'd3-format'
import { axisBottom, axisLeft } from 'd3-axis'
import { randomNormal } from 'd3-random'
import Fetcher from './lib/fetcher'
const d3 = Object.assign(
{},
{
select,
selectAll,
max,
min,
histogram,
bisectLeft,
scaleLinear,
curveCatmullRom,
line,
format,
axisBottom,
axisLeft,
range,
randomNormal
})
/* exported RadarChart */
/// //////////////////////////////////////////////////////
/// ////////// The personality Chart Function ////////////
/// //////////// Written by Nadieh Bremer ////////////////
/// /////////////// VisualCinnamon.com ///////////////////
/// //////// Inspired by the code of alangrafu ///////////
/// //////////////////////////////////////////////////////
/// //////// Work in progress port to d3.js v4 ///////////
/// ////////////// by Fateha Abul ///////////////////////
/// //////////////////////////////////////////////////////
/**
* @description Main function for RadarChart
* @param {*} id Class name of div
* @param {*} data Array containing the data
* @param {*} options Take options from config file
*/
/// //////////////////////////////////////////////////////
/// //////////////// Helper Function /////////////////////
// //////////////////////////////////////////////////////
// Taken from http://bl.ocks.org/mbostock/7555321
// Wraps SVG text
function wrap (text, width) {
text.each(function () {
let text = d3.select(this)
let words = text.text().split(/\s+/)
let line = []
let lineNumber = 0
let lineHeight = 1.4 // ems
let y = text.attr('y')
let x = text.attr('x')
let dy = parseFloat(text.attr('dy'))
let tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em')
words.forEach(function (word, index) {
line.push(word)
tspan.text(line.join(' '))
if (tspan.node().getComputedTextLength() > width) {
line.pop()
tspan.text(line.join(' '))
line = [word]
if (index === 0) {
tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em').text(word)
} else {
tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word)
}
}
})
})
}
let data = []
let userData = [3.21]
// FOR DEV + DEBUGGING
// TODO: Move to config-default.js
makeData(2.6, 0.8)
let margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
}
let width = 960 - margin.left - margin.right
let height = 150 - margin.top - margin.bottom
// Main Function
function Personality (id, data, options) {
//!! CONFIG TODO !!
let cfg
if (typeof options === 'undefined') {
throw new Error('Options are undefined!')
} else {
cfg = options
}
// Draw Elements and Plot
function draw () {
d3.select('div').select('svg').remove()
let personalityBox = d3.select('.personality')
let svg = personalityBox.append('svg')
.attr('class', 'personalitySVG')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.bottom + margin.top)
let g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
let xScale = d3.scaleLinear()
.rangeRound([0, width])
.domain([1, 5])
let yScale = d3.scaleLinear()
.range([height, 0])
g.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height} )`)
.call(d3.axisBottom(xScale))
// transfere to config
.style('font-size', '16px')
let plotLine = d3.line()
.x(function (d) { return xScale(d.q) })
.y(function (d) { return yScale(d.p) })
g.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', plotLine)
// Draw marker for user value
let marker = g.selectAll('.marker').data(userData).enter()
.append('g')
.attr('class', 'marker')
marker.append('line')
.attr('stroke', 'red')
.attr('y1', height * 0.25)
.attr('y2', height)
.attr('x1', xScale(userData))
.attr('x2', xScale(userData))
//transfere to config
.attr('stroke-width', 3)
}
draw()
}
// Call Plot
Personality('.personality', data, 0)
// HELPER FUNCTIONS
// ToDo: Remove when done implementing fetch
function makeData (mean, sigma) {
let q
let p
let el
for (var i = 0; i < 10000; i++) {
q = d3.randomNormal([mean], [sigma])()
p = gaussian(q, mean, sigma)
el = {
'q': q,
'p': p
}
data.push(el)
}
// We generate data to test the plot. We need to map the generated values to our scale
// generate random number für distribution of gaussian
var min=2;
var max=5;
var random = Math.random() * (+max - +min) + +min;
document.write("Random Number Generated : " + random );
// Before
let maxQ = d3.max(data, function (d) {
return d.q
})
let minQ = d3.min(data, function (d) {
return d.q
})
console.log(`minQ: ${minQ}`)
console.log(`maxQ: ${maxQ}`)
let gScale = d3.scaleLinear()
.domain([minQ, maxQ])
.range([1, random])
data = data.map(function (d) {
return {
'q': gScale(d.q),
'p': d.p
}
})
// After
maxQ = d3.max(data, function (d) {
return d.q
})
minQ = d3.min(data, function (d) {
return d.q
})
console.log(`minQ: ${minQ}`)
console.log(`maxQ: ${maxQ}`)
// Sort data for plotting
data.sort(function (x, y) {
return x.q - y.q
})
}
function gaussian (x, mean, sigma) {
const gaussianConstant = 1 / Math.sqrt(2 * Math.PI)
x = (x - mean) / sigma
return gaussianConstant * Math.exp(-0.5 * x * x) / sigma
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment