Published
Edited
Mar 1, 2021
1 fork
2 stars
chart = {
const svg = d3.select(DOM.svg(width, height))
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("text-align", "center")
.style("display", "block")
.style("position", "absolute")
.style("visibility", "hidden")
.style("font-size", "1rem")
.style('font-family', 'Montaga')
.style("background", "rgba(255,255,255,0.9)")
.style("padding", "0.1rem 0.5rem")
.style("color", "grey")
.style("border-radius", "5px")
.style("border", "1px solid grey")
.style("transform", "translate(-50%, -100%)")
.style("pointer-events", "none")
svg.call(tParl)
svg.call(tBoth)
svg.call(tPres)
svg.call(tRef)
svg.selectAll('line')
.data(uniqueMonths)
.join('line')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr('y1', d => yScale(d))
.attr('y2', d => yScale(d))
.attr('stroke', '#bebebe')
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxisGen)
.call(g => g.selectAll(".tick line").remove())
.call(g => g.select(".domain").remove())
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom + 10})`)
.call(xAxisGen)
.call(g => g.selectAll(".tick line").remove())
.call(g => g.select(".domain").remove())
svg.node().drawData = function(myData) {
const t = svg.transition().duration(500)
const circles = svg.selectAll('circle')
.data(myData, d => d.date)
.join(
enter => {
const circle = enter.append('circle')
.attr('cx', d => d.days)
.attr('cy', d => d.month)
.attr('r', 11)
.attr('opacity', 0)
.attr('stroke', d => d.dateParsed === today ? '#bebebe': null)
circle.on("click", (event,d) => {
if (d.numCountries === 1 && d.dateParsed < today) {
window.open(d.url, "_blank")
} else if (d.numCountries > 1 && d.dateParsed < today) {
var locs = d.url
for (let i = 0; i < locs.length; i++) {
window.open(locs[i])
}
}
})
circle.on("mouseout", (event,d) => {
const current = event.currentTarget;
d3.select(current).transition().attr('r', 11);
tooltip.style("visibility", "hidden")
})
.on("mouseover", (event, d) => {
const current = event.currentTarget;
d3.select(current).transition().attr('r', 13);
tooltip
.style("visibility", "visible")
.style("top", (d.month + 222) + "px")
.style("left", (d.days + 11) + "px")
.html(
`<div>${d.electionTypeConcat}</div>`
)
})
return circle
},
update => update,
exit=> {
exit.transition(t)
.attr('opacity', 0)
.remove()
})
.transition(t)
.attr('opacity', d => d.dateParsed > today ? 1 : 0.6)
.attr('fill', d => d.color)
}
// add gradient
const g = svg
.append("g");
var defs = d3.select("svg").append('defs')
var gradient = defs.append("linearGradient")
.attr("id", "svgGradient")
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", "0%")
.attr("y2", "0%")
gradient.append("stop")
.attr('class', 'start')
.attr("offset", "20%")
.attr("stop-color", "#9480cf")
.attr("stop-opacity", 1)
gradient.append("stop")
.attr('class', 'end')
.attr("offset", "80%")
.attr("stop-color", "#d17da0")
.attr("stop-opacity", 1)
return svg.node()
}
chart.drawData(drawingData)
tRef = textures.lines()
.size(6)
.strokeWidth(2)
.stroke("white")
.background("#a7a7a7");
tParl = textures.lines()
.size(6)
.strokeWidth(2)
.stroke("white")
.background("#9480cf");
tBoth = textures.lines()
.size(6)
.strokeWidth(2)
.stroke("white")
.background("url(#svgGradient)")
tPres = textures.lines()
.size(6)
.strokeWidth(2)
.stroke("white")
.background("#d17da0")
calculateData = (data) => {
return _.map(data, (d, i) => {
let color
if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'parliament') {
color = tParl.url()
} else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'president') {
color = tPres.url()
} else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'both') {
color = tBoth.url()
} else if (d.numCountries > 1) {
color = '#f6c776'
} else if (d.numCountries === 1 && d.status[0] === 'Date not confirmed' && d.electionType[0] === 'referendum') {
color = tRef.url()
} else {
color = colorScale(d.electionType)
}
return {
month: yScale(d.month),
days: xScale(d.day),
numCountries: d.numCountries,
country: d.country,
electionType: d.electionType,
electionTypeConcat: d.electionTypeConcat,
color: color,
dateParsed: d.dateParsed,
status: d.status,
continent: d.continent,
date: d.date,
url: d.url
}
})
}
colorScale = d3.scaleOrdinal()
.domain(listElectionType)
.range(colors)
xScale = d3.scaleLinear()
.domain([1,31])
.range([margin.left, width - margin.right])
yScale = d3.scaleBand().paddingInner(1)
.domain(uniqueMonths)
.range([margin.top, height - margin.bottom])
yAxisGen = d3.axisLeft()
.scale(yScale)
xAxisGen = d3.axisBottom()
.scale(xScale)
.ticks(31)
data = _.chain(dataFiltered)
.groupBy('date')
.map((dates, date)=> {
const parseTime = d3.timeParse("%d.%m.%y");
const dateParsed = parseTime(date);
const formatDay= d3.timeFormat("%d");
const dayF = formatDay(dateParsed);
const formatMonth = d3.timeFormat("%B");
const month = formatMonth(dateParsed);
const countryCount = _.countBy(dates, ({country}) => country);
const electionType = _.map(dates, 'electionType');
const electionTypeConcat = _.map(dates, 'electionTypeConcat');
return {
date: date,
day: +dayF,
month: month,
country: _.map(dates, 'country'),
numCountries: d3.sum(_.values(countryCount)),
electionType: electionType,
electionTypeConcat: electionTypeConcat,
dateParsed: dateParsed,
status: _.map(dates, 'status'),
continent: _.map(dates, 'continent'),
url: _.map(dates, 'url'),
test: _.map(dates, ({country, electionType}) => {
return {
tada: electionType,
country: country
}
})
}
}).value()
style = html`
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montaga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat&display=swap" rel="stylesheet">
<style>
body, select, option, text {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
}
text {
font-size: 1.2em
}
circle {
cursor: pointer;
}
h1, h2 {
font-family: 'Montaga', serif;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
