Public
Edited
Jan 16, 2023
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
let parent = this;
parent = document.createElement("div");
const tooltip = d3.select(document.createElement("div")).call(createTooltip);
const svg = d3.select(DOM.svg(width, height));
// const tooltip = d3.select('body')
// .append('div')
// .attr('id', 'barchart-tooltip')
// .style('position', 'absolute')
// .style('z-index', '1')
// .style('visibility', 'hidden')
// .style('padding', '10px')
// .style('background', 'rgba(0,0,0,0.6)')
// .style('border-radius', '4px')
// .style('color', '#fff');

//------------------
const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`);
//----------------
var groups = svg.append("g")
.selectAll("g").data(datar).enter()
.append("g")
.attr("class", function(d) { return d[0]})
.attr("fill", function(d) { return color1(d[0])});
groups.selectAll('.bar-container')
.data(d => d[1])
.join("rect")
.attr("class", function (d) {
console.log(d.option)
return "temp "})
.attr("class", function (d) { return "temp "})
.attr("id", d => d.code)
.attr("x", d => x(d.code) + xBars(d.option))
.attr("y", function (d) {if (d[d.option] > 1) { return y(d[d.option])} else
{ return y(0) } })
//.attr("height", d => y(d[0]) - y(d[1]))
.attr("height",
function (d) {if (d[d.option] > 0) { return y(0) - y(d[d.option])}
else {return y(d[d.option]) - y(0) }
})
.attr("width", x.bandwidth() / variables.length)

const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none");
svg.append("path")
.datum(datar)
.attr("fill", "none")
.attr("stroke", "darkgreen")
.attr("stroke-width", 2.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", uline);

svg.append("path")
.datum(datar)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lline);

const gx = svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const t = svg.transition()
.duration(750);
gx.transition(t)
.call(xAxis)
.selectAll("text")
.attr("class", "legend-text")
.attr("y", 0)
.attr("x", 9)
// .attr("dy", ".55em")
// .style("font-size", 12)
.attr('fill', 'navy')
.attr("transform", "rotate(90)")
.attr("text-anchor", "start");
svg.on("mousemove", function(event) {
let [x,y] = d3.pointer(event, g.node());
line.attr("transform", `translate(${x+40} 0)`);
y +=20;
if(x>width/2) x-= 100;

tooltip
.style("left", x + "px")
.style("top", y + "px")
})
parent.appendChild(svg.node());
parent.appendChild(tooltip.node());
return Object.assign(parent, {
update(order) {
//console.log(order)
const t = svg.transition()
.duration(750);
switch(order) {
case 'high52':
case 'low52':
case 'buyprice':
case 'localprice':
}
gx.transition(t)
.call(xAxis)
.selectAll("text")
.attr("class", "legend-text")
.attr("y", 0)
.attr("x", 9)
.style("font-family", "sans-serif")
.style('font-size', '10px')
.attr('fill', 'navy')
.attr("transform", "rotate(90)")
.attr("text-anchor", "start");
}
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleLinear() // d3.scaleSymlog()
.domain([0, 4500])
//.constant(10)
.range([height - margin.bottom, margin.top])
.nice()


Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
color1 = d3.scaleOrdinal() // (d3.schemePaired)
.domain(variables)
.range(["#000075","","#42d4f4",""])
//.range(["#000075","#4363d8","#800000","#42d4f4"])

Insert cell
Insert cell
width = 600
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datar = d3.groups(datax, d => d.option)
Insert cell
datax = {
var arr = []
const columns = datan.columns.slice(3,7);
var x = 0
var FTSEindex
datan.forEach(function (d) {
for (x = 0; x < columns.length; x++) {
arr.push({"code": d.Code,"Buy_Price": +d.Buy_Price, "high52": +d.high52, "low52": +d.low52, "Local_Price": +d.Local_Price, "option": columns[x]})
}
})
return arr
}
Insert cell
datan = d3.csv(getCsvUrl(url), d3.autoType)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more