in src/js/modules/choropleth.js [745:1063]
keygen() {
var self = this
var keyLeftMargin = 10
var keyRightMargin = 20
// this.scaleType = self.database.mapping[self.database.currentIndex].scale.toLowerCase()
var keyText = null
if (this.database.mapping[self.database.currentIndex]['keyText']) {
if (this.database.mapping[self.database.currentIndex]['keyText'] != "") {
keyText = this.database.mapping[self.database.currentIndex]['keyText']
}
}
if (keyText != null) {
d3.select("#keyText").html(keyText)
}
this.svgWidth = 300
if (this.svgWidth > this.width - 10) {
this.svgWidth = this.width - 10
}
this.keyWidth = this.svgWidth - keyRightMargin - keyLeftMargin
d3.select("#keyContainer").html("");
d3.select("#keyContainer svg").remove();
d3.select("#keyContainer1 svg").remove();
d3.select("#keyContainer2 svg").remove();
d3.select("#keyContainer3 svg").remove();
this.keySquare = this.keyWidth / 10;
const barHeight = 15
const height = 30
if (this.scaleType === "swing") {
var value = [0, 2, 4, 6, 8, 10];
var label = [0, 2, 4, 6, 8, "10+"];
this.keyWidth = document.querySelector("#keyContainer1").getBoundingClientRect().width - 10
this.keySquare = this.keyWidth / 6;
this.keySvg1 = d3.select("#keyContainer1").append("svg")
.attr("width", self.svgWidth)
.attr("height", "40px")
.attr("id", "keySvg1")
this.keySvg2 = d3.select("#keyContainer2").append("svg")
.attr("width", self.svgWidth)
.attr("height", "40px")
.attr("id", "keySvg2")
value.forEach(function(d, i) {
self.keySvg1.append("rect")
.attr("x", self.keySquare * i)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", self.scaleBlue(d))
.attr("stroke", "#dcdcdc")
})
label.forEach(function(d, i) {
self.keySvg1.append("text")
.attr("x", (i) * self.keySquare)
.attr("text-anchor", "start")
.attr("y", height)
.attr("class", "keyLabel").text(d)
})
value.forEach(function(d, i) {
self.keySvg2.append("rect")
.attr("x", self.keySquare * i)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", self.scaleRed(d))
.attr("stroke", "#dcdcdc")
})
label.forEach(function(d, i) {
self.keySvg2.append("text")
.attr("x", (i) * self.keySquare)
.attr("text-anchor", "start")
.attr("y", height)
.attr("class", "keyLabel").text(d)
})
}
if (this.scaleType === "threshold") {
this.keySvg = d3.select("#keyContainer").append("svg")
.attr("width", self.svgWidth)
.attr("height", "40px")
.attr("id", "keySvg")
this.keyColors.forEach(function(d, i) {
self.keySvg.append("rect")
.attr("x", (self.keySquare * i) + keyLeftMargin)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", d)
.attr("stroke", "#dcdcdc")
})
var threshLen = this.thresholds.length
this.thresholds.forEach(function(d, i) {
// I keep changing this between removing the last figure and not removing it and I can't remember why
self.keySvg.append("text")
.attr("x", (i) * self.keySquare + keyLeftMargin)
.attr("text-anchor", "middle")
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(d))
})
}
if (this.scaleType === "linear") {
this.keySvg = d3.select("#keyContainer").append("svg")
.attr("width", self.svgWidth)
.attr("height", "40px")
.attr("id", "keySvg")
var legend = this.keySvg.append("defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "100%")
.attr("x2", "100%")
.attr("y2", "100%")
.attr("spreadMethod", "pad");
legend.append("stop")
.attr("offset", "0%")
.attr("stop-color", this.keyColors[0])
.attr("stop-opacity", 1);
legend.append("stop")
.attr("offset", "100%")
.attr("stop-color", this.keyColors[1])
.attr("stop-opacity", 1);
this.keySvg.append("rect")
.attr("y", 0)
.attr("x", keyLeftMargin)
.attr("width", self.keyWidth)
.attr("height", barHeight)
.style("fill", "url(#gradient)")
self.keySvg.append("text")
.attr("x", 10)
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(this.min))
self.keySvg.append("text")
.attr("x", self.keyWidth + keyLeftMargin)
.attr("text-anchor", "end")
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(this.max))
}
if (this.scaleType === "ordinal") {
var html = '';
this.thresholds.forEach(function(d, i) {
html += '<div class="keyDiv"><span class="keyCircle" style="background: ' + self.keyColors[i] + '"></span>';
html += ' <span class="keyText">' + d + '</span></div>';
})
d3.select('#keyContainer').html(html);
}
if (this.scaleType === "quantile") {
this.keySvg = d3.select("#keyContainer").append("svg")
.attr("width", self.keyWidth)
.attr("height", "40px")
.attr("id", "keySvg")
this.keyColors.forEach(function(d, i) {
self.keySvg.append("rect")
.attr("x", (self.keySquare * i) + keyLeftMargin)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", 15)
.attr("fill", d)
.attr("stroke", "#dcdcdc")
})
self.keySvg.append("text")
.attr("x", 0)
.attr("text-anchor", "start")
.attr("y", 30)
.attr("class", "keyLabel").text(this.min)
self.keySvg.append("text")
.attr("x", this.keyWidth)
.attr("text-anchor", "end")
.attr("y", 30)
.attr("class", "keyLabel").text(niceNumber(this.max))
}
if (this.scaleType === "election") {
var marginQuint = [0, 6, 12, "18+"];
var colBlue = ['rgb(189,215,231)','rgb(107,174,214)','rgb(49,130,189)','rgb(8,81,156)'];
var colRed = ['rgb(252,174,145)','rgb(251,106,74)','rgb(222,45,38)','rgb(165,15,21)'];
var colPurple = ['rgb(203,201,226)','rgb(158,154,200)','rgb(117,107,177)','rgb(84,39,143)'];
this.keyWidth = document.querySelector("#keyContainer1").getBoundingClientRect().width - 10
this.keySquare = this.keyWidth / 6;
this.keySvg1 = d3.select("#keyContainer1").append("svg")
.attr("width", self.keyWidth)
.attr("height", "40px")
.attr("id", "keySvg1")
this.keySvg2 = d3.select("#keyContainer2").append("svg")
.attr("width", self.keyWidth)
.attr("height", "40px")
.attr("id", "keySvg2")
this.keySvg3 = d3.select("#keyContainer3").append("svg")
.attr("width", self.keyWidth)
.attr("height", "40px")
.attr("id", "keySvg3")
colBlue.forEach(function(d, i) {
self.keySvg1.append("rect")
.attr("x", self.keySquare * i)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", d)
.attr("stroke", "#dcdcdc")
})
marginQuint.forEach(function(d, i) {
self.keySvg1.append("text")
.attr("x", (i) * self.keySquare)
.attr("text-anchor", "start")
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(d))
})
colRed.forEach(function(d, i) {
self.keySvg2.append("rect")
.attr("x", self.keySquare * i)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", d)
.attr("stroke", "#dcdcdc")
})
marginQuint.forEach(function(d, i) {
self.keySvg2.append("text")
.attr("x", (i) * self.keySquare)
.attr("text-anchor", "start")
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(d))
})
colPurple.forEach(function(d, i) {
self.keySvg3.append("rect")
.attr("x", self.keySquare * i)
.attr("y", 0)
.attr("width", self.keySquare)
.attr("height", barHeight)
.attr("fill", d)
.attr("stroke", "#dcdcdc")
})
marginQuint.forEach(function(d, i) {
self.keySvg3.append("text")
.attr("x", (i) * self.keySquare)
.attr("text-anchor", "start")
.attr("y", height)
.attr("class", "keyLabel").text(niceNumber(d))
})
}
}