2b:null 2c:["$","title",null,{"children":"Boundaries -bases | Steve Pegg | Observable"}] 31:T102c,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) .attr("fill", function(d) { {if (d.todaybase > d.buybase && d.option === "todaybase") return "yellow"}}); 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"); } }); } 32:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }33:[] 2f:{"id":"2d56e3e9d049e60a","slug":null,"title":"Boundaries -bases","thumbnail":"937561369248bb448e3907050ed57cdef74d596caa034be610127f3e4d0f4466","access_level":"public","create_time":"$D2023-01-16T16:25:34.159Z","update_time":"$D2023-01-17T22:32:23.569Z","view_time":null,"first_public_time":"$D2023-01-16T16:25:34.159Z","has_unpublished_edits":null,"fork":{"id":"e9de08029a8d1591","slug":null,"title":"Boundaries","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":1307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Boundaries -bases","cells":[{"id":0,"value":"md`# Boundaries -bases`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`*Yellow bars indicate stocks in profit. Red bars indicate stocks with losses *`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"viewof order = { const options = [\n {label: \"buyprice\", value: \"buyprice\"}, //(a, b) => d3.ascending(a[\"Total PL\"],b[\"Total PL\"])},\n {label: \"low52\", value: \"low52\"}, //(a, b) => d3.ascending(a.type, b.type)},\n {label: \"high52\", value: \"high52\"}, //(a, b) => d3.ascending(a.country,b.country)}, \n {label: \"localprice\", value: \"localprice\"}, //(a, b) => d3.ascending(a.owner, b.owner)}\n \n \n ];\n const form = html`