Data editor @ NBC News.
Public
Edited
Sep 23, 2020
chartNoAxis = {
// HARD CODE THE EXAMPLE DATA
//const valOne = 45;
//const valTwo = 10;
// Uncomment these two lines for prod -- they don't work in the observable environment
//if (valOne === 0) valOne = .01;
//if (percentChangeBallotCast === 0) percentChangeBallotCast = .01;
const percentChange = valTwo; // HARD-CODED FOR TESTING
var data = [1, percentChange];
// Get the maximum of both values.
// We need this to set the scale of the chart in a way that honors both values.
const max = Math.max(Math.abs(valOne), Math.abs(valTwo));
const color = '#0F7000';
const width = 88;
const height = 40;
const margin = { top: 5, right: 5, bottom: 5, left: 5 };
var yDomain = {
min: .01,
max: max
};
// If we're charting negative values, we set the yDomain to negative
if (percentChange < 0) {
yDomain = {
min: max * -1,
max: -.01
};
data[0] = -1;
}
const x = d3
.scaleLinear()
.domain([0, 1])
.rangeRound([margin.left, width - margin.right]);
const y = d3
.scaleLog()
.domain([yDomain.min, yDomain.max])
.range([height - margin.bottom, margin.top]);
document.getElementById("gfx").innerHTML = ''; // Clear out the existing svg -- only for the purposes of this Observable notebook, can remove in prod
const svg = d3.select("svg#gfx").attr('viewBox', [0, 0, width, height]);
const line = d3
.line()
.x((d, i) => {
console.log("X" + i, d, x(d), x(i));
const r = x(i);
console.log("RETURNING X" + i, r);
return r;
})
.y((d, i) => {
console.log("Y" + i, d, y(d), y(i));
const r = y(d);
console.log("RETURNING Y" + i, r);
return y(d);
});
svg
.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', color)
.attr('stroke-width', 2)
.attr('stroke-linejoin', 'round')
.attr('stroke-linecap', 'round')
.attr('d', line);
const circleStart = svg
.append('circle')
.attr('cx', x(0))
.attr('cy', y(data[0]))
.attr('r', 4)
.attr('fill', color);
const circleEnd = svg
.append('circle')
.attr('cx', x(1))
.attr('cy', y(data[1]))
.attr('r', 4)
.attr('fill', color);
// The lines below are observable-specific.
return svg.node();
}
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.
