Published
Edited
Nov 4, 2020
Importers
d3 = require("d3");
test_consolidate = (id) => {
}
oit99 = chart(5198)
pres = chart(1000)
usRep39 = chart(1130)
out77 = chart(6002)
stateProp18 = chart(8504)
cityMeasureP = chart(8600)
getUpdateText = (rt, ba) => {
return `Last Updated: ${formatDateTime(rt)} with ${d3.format(",")(ba)} ballots added.`
}
chart = (id) => {
console.log(document.body.clientWith)
return d3.json("https://vooc-election-results.s3-us-west-2.amazonaws.com/bar-charts/" + String(id) + "/latest.json").then(function(results) {
var offset = 5;
var margin = ({top: 120, right: 15, bottom: 50, left: 104});
var title2 = 0;
var st2 = 0;
var spaceIdx = 0;
var spaceIdx2 = 0;
function t_wrap(text, length) {
if (text.length > length) {
offset += 35;
margin.top += 40;
spaceIdx = text.slice(0, length).lastIndexOf(" ");
title2 = 1;
return text.slice(0, spaceIdx+1);
} else {
return text;
}
}
function s_wrap(text, length) {
if (text.length > length) {
// offset += 30;
margin.top += 20;
spaceIdx2 = text.slice(0, length).lastIndexOf(" ");
st2 = 1;
return text.slice(0, spaceIdx2);
} else {
return text;
}
}
let title1 = t_wrap(results.race_title, 40);
if (results.description) {
margin.top += 20;
var st1 = s_wrap(results.description, 80);
}
console.log(results.description)
console.log(st1)
let width = 600;
const data = Object.values(results['candidates']).sort(function(a, b) {
return d3.descending(a.percent, b.percent)
});
let height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom;
// console.log(height)
const svg = d3.create('svg')
.attr("viewBox", [0, 0, width, height])
//.attr("preserveAspectRatio", "xMinYMin meet");
// .attr("width", `${100}%`)
// // .attr("width", width)
// .attr("height", height);
let x = d3.scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right])
//.range([margin.left,500]);
let y = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([margin.top, height - margin.bottom])
.padding(0.1);
let format = x.tickFormat();
let xAxis = g => g
.attr("transform", `translate(0,${Math.ceil((data.length + 0.1) * barHeight) + margin.top})`)
.call(d3.axisBottom(x).ticks(4).tickFormat(d => d + "%"))
.call(g => g.select(".domain").remove())
.attr("color", "grey");
let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(i => formatName(data[i].name))
.tickSizeOuter(0))
.attr("font-size", "0.9em")
console.log(svg.node().getBoundingClientRect());
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("fill", d => d.color)
.attr("x", x(0))
.attr("y", (d, i) => y(i))
.attr("width", d => x(d.percent) - x(0))
.attr("height", y.bandwidth());
svg.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("font-size", "16px")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => x(d.percent))
.attr("y", (d, i) => y(i) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("dx", -10)
.attr("font-size", "16px")
.text(d => d.percent + '% (' + d3.format(",")(d.votes) + ' ballots)')
.call(text => text.filter(d => d.percent < 40) // short bars
.attr("dx", +10)
.attr("fill", "black")
.attr("text-anchor", "start"));
svg.append("g")
.call(xAxis);
const axis = svg.append("g")
.call(yAxis)
const title = svg.append("text")
.attr("class", "title")
.attr("x", 5)
.attr("y", 25)
.attr("text-anchor", "start")
.style("font-size", "30px")
.style("font-family", "PT Sans")
.style("font-weight", "bold")
.text(formatText(title1))
if (title2) {
svg.append("text")
.attr("class", "title")
.attr("x", 5)
.attr("y", 60)
.attr("text-anchor", "start")
.style("font-size", "30px")
.style("font-family", "PT Sans")
.style("font-weight", "bold")
.text(formatText(results.race_title.slice(spaceIdx+1)));
}
if(results.description) {
svg.append("text")
.attr("class", "info")
.attr("x", 5)
.attr("y", 45 + offset)
.attr("text-anchor", "start")
.style("font-size", "16px")
.style("font-family", "PT Sans")
.style("font-weight", "bold")
.text(st1);
offset += 20;
if(st2) {
svg.append("text")
.attr("class", "info")
.attr("x", 5)
.attr("y", 45 + offset)
.attr("text-anchor", "start")
.style("font-size", "16px")
.style("font-family", "PT Sans")
.style("font-weight", "bold")
.text(results.description.slice(spaceIdx2+1));
offset += 20;
}
}
svg.append("text")
.attr("class", "info")
.attr("x", 5)
.attr("y", 50 + offset)
.attr("text-anchor", "start")
.style("font-size", "16px")
.style("font-family", "PT Sans")
.text(getUpdateText(results.reporting_time, results.ballots_added));
svg.append("text")
.attr("x", 5)
.attr("y", 70 + offset)
.attr("text-anchor", "start")
.style("font-size", "16px")
.style("font-family", "PT Sans")
.text(`Source: ${results.source}`);
setTimeout(()=>{
// console.log(svg.style("width"));
axis.selectAll(".tick text")
.call(wrap, margin.left-10);
// svg.selectAll(".title")
// .call(twrap, 600);
}, 0);
return svg.node();
});
}
img_chart(1000)
image_chart(1120)
usRep39Imgs = image_chart(1130)
image_chart(4001)
image_chart(1150)
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.
