chartNoAxis = {
const percentChange = valTwo;
var data = [1, percentChange];
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 (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 = '';
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);
return svg.node();
}