2c:null 2d:["$","title",null,{"children":"RIC Dividend in Stacked Bar Chart | Steve Pegg | Observable"}] 32:T16fd,chart = { // Initialize svg const svg = d3.create("svg") .attr("viewBox", [0, 0, 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'); // Append the grid lines on X axis svg.append("g") .attr("class", "grid") .attr("transform", `translate(${x.bandwidth()/2}, ${height - margin.bottom})`) .call(make_x_gridlines() .tickSize(-height) .tickFormat("") ) // Append the bars const bar = svg.append("g") .selectAll("g") .data(series) .join('g') .attr("fill", function(d) {return color(d.key)}) .attr("class", function (d) { return d.key}) .selectAll("rect") .data(d => d) .join("rect") .attr("class", function (d) { return "temp " + d.data.owner}) .attr("width", x.bandwidth) .attr("x", d => x(d.data.code)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .on("mouseover", function(event, d) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", event.pageX - tooltipWidth/10 +'px') .style("top", event.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Stock: ${d.data.stock}
Owner: ${d.data.owner}
Total Dividend: ${(d.data.total)}`); }) .on('mousemove', function (event) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", event.pageX - tooltipWidth/10 +'px') .style("top", event.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(event, d) { tooltip .style('visibility', 'hidden'); }); // Append ust & lst lines svg.append("path") .datum(line_series) .attr("fill", "none") .attr("stroke", "darkgreen") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("path") .datum(line_series) .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); // Append the Y-axis let y_axis = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .attr("id", "y-axis") .attr("class", "y axis") .call(yAxis) // Replace 0 tick on y-axis with - y_axis.selectAll("g.tick") // Y label svg.append("g") .attr("transform", `translate(${margin.left/2}, ${(height - margin.top)/2})`) .attr("class", "y-axis-label") .append("text") .attr("transform", "rotate(-90)") .text("£ GBP"); // Bar chart legends const legend = svg.selectAll('.legend') .data(color.domain()) .enter() .append('g') .attr('class', 'legend') .attr('transform', (d, i) => { let legendHeight = legendRectSize + legendSpacing; let x = width - margin.right; let y = (i+1) * legendHeight + margin.top + 5; return `translate(${x}, ${y})`; }); legend.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', color) .style('stroke', color); const altext = ["PL from base", "Total PL","today's PL"] legend.append('text') .attr("class", "legend-text") .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize) .text(d => d); svg.selectAll("rect." + owner) .style("stroke", "Black") .style("stroke-width", 1); return Object.assign(svg.node(), { update(order) { svg.selectAll("rect") .style("stroke", "Black") .style("stroke-width", 0); svg.selectAll("rect." + owner) .style("stroke", "Black") .style("stroke-width", 1); x.domain(final.sort(order).map(d => d.code)); const t = svg.transition() .duration(750); d3.selectAll(".temp") // .data(series, d => d) .order() .transition(t) .delay((d, i) => i * 10) .attr("x", d => x(d.data.code)); d3.selectAll(".temp").filter(function(d) { return d.data["PL from Base"] > 10 }) .transition(t) .delay((d, i) => i * 10) .attr("fill", d => color("PL from Base")) //.raise(); // d3.select(this).moveToFront(); gx.transition(t) .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 9) .attr("dy", ".55em") .style("font-size", 12) .style('fill', 'navy') .attr("transform", "rotate(90)") .style("text-anchor", "start"); } }); } 33:[] 30:{"id":"547fd75a6ebe6fd3","slug":"ric-dividend-in-stacked-bar-chart","title":"RIC Dividend in Stacked Bar Chart","thumbnail":"002d8487476a662a783453b25797d6620b7834e789ef76786685bcb9e7431d8d","access_level":"public","create_time":"$D2021-01-17T09:36:21.194Z","update_time":"$D2021-02-13T17:12:20.696Z","view_time":null,"first_public_time":"$D2021-01-22T10:00:19.164Z","has_unpublished_edits":null,"fork":true,"stars":3,"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":2055,"publish_version":2055,"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":1,"collection":{"id":"6ff40e8e4a2133a9","slug":"ric","title":"RIC","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"type":"notebook","body":{"titling":"auto","title":"RIC Dividend in Stacked Bar Chart","cells":[{"id":0,"value":"md`# RIC Dividend in Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2009,"value":"viewof owner = radio({\n title: 'Owner',\n options: options,\n value: 'Steve'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"viewof order = { const options = [\n {label: \"Sort by Owner\", value: (a, b) => d3.ascending(a.owner, b.owner)},\n {label: \"Total 2021\", value: (a, b) => d3.ascending(a.y2021, b.y2021)},\n {label: \"Total Dividend\", value: (a, b) => d3.ascending(a.total,b.total)},\n // {label: \"PL from Base\", value: (a, b) => d3.ascending(a[\"PL from Base\"],b[\"PL from Base\"])},\n {label: \"A to Z\", value: (a, b) => d3.ascending(a.code, b.code)}\n ];\n const form = html`