mervenoyan's picture
commit files to HF hub
7341022
window.makeAxii = function(){
var stateScale = d3.scaleBand().domain(states).range(c.x.range())
var stateAxis = c.svg.append('g.axis.state.init-hidden')
var bw = stateScale.bandwidth()/2
stateAxis.appendMany('text', states)
.translate(d => [stateScale(d) + bw, c.height + 22])
.text(d => d)
.at({
textAnchor: 'middle',
})
.st({fill: '#444'})
stateAxis.appendMany('path', d3.range(ages.length + 1))
.at({
d: d => ['M', d*c.width/(ages.length), '0 V', c.height].join(' '),
stroke: '#aaa',
})
stateAxis.append('text.bold').text('Home State')
.translate([c.width/2, c.height + 45])
.at({textAnchor: 'middle'})
var ageScale = d3.scaleBand().domain(ages.slice().reverse()).range(c.x.range())
var ageAxis = c.svg.append('g.axis.age.init-hidden')
ageAxis.appendMany('text', ages)
.translate(d => [-30, ageScale(d) + bw])
.text(d => d)
.at({dy: '.33em'})
.st({fill: '#444'})
ageAxis.appendMany('path', d3.range(ages.length + 1))
.at({
d: d => ['M 0', d*c.width/(ages.length), 'H', c.width].join(' '),
stroke: '#aaa',
})
if (scale == 1){
ageAxis
.append('g').translate([-43, c.height/2])
.append('text.bold').text('Age')
.at({textAnchor: 'middle', transform: 'rotate(-90)'})
} else {
ageAxis
.append('g').translate([-22, 14])
.append('text.bold').text('Age')
.at({textAnchor: 'middle'})
}
var seasonAxis = c.svg.append('g.axis.state.init-hidden').lower()
seasonAxis.appendMany('g', ages)
.translate(d => ageScale(d), 1)
.appendMany('path', d3.range(1, 4))
.at({
d: d => ['M 0', d*bw/4*2, 'H', c.width].join(' '),
stroke: '#ddd',
})
var headAxis = c.svg.append('g.axis.state.init-hidden')
headAxis.appendMany('text.bold', ['Heads', 'Tails'])
.text(d => d)
.translate((d, i) => [i ? c.width/4*3 + 20 : c.width/4 - 20, 88])
.at({textAnchor: 'middle'})
var headCaptionAxis = c.svg.append('g.axis.state.init-hidden')
headCaptionAxis.appendMany('text', ['reports plagiarism', 'reports truth'])
.text(d => d)
.translate((d, i) => [i ? c.width/4*3 + 20 : c.width/4 - 20, 88 + 15])
.at({textAnchor: 'middle'})
.st({fill: '#444'})
return {stateScale, stateAxis, headAxis, headCaptionAxis, ageScale, ageAxis, bw, seasonAxis}
}
if (window.init) window.init()