31:T139c,myChart={ const div = html`

`; //create container, a div append to body, for tooltip const ttDiv = d3.select("body").append("div") .attr("id", "myTooltip") const svg = d3.select(div).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //coerce to number //make a new column observation_N_cumSum presents the cumulated sum observations as of the month filteredData.forEach(function (d) { d.observation_N = +d.observation_N; d.observation_N_prev_sum = +d.observation_N_prev_sum; d.FiscalYear = +d.FiscalYear; d.monthOrder = +d.monthOrder d.observation_N_cumSum = d.observation_N_prev_sum + d.observation_N; }); //add school name as title of the chart svg.append("text") .attr("class", "title") // .style("font", "18px Oswald") .attr("x",5) .attr("y",-5) .text(" "+ d3.set(filteredData.map(d => d.location_name)).values()); yScale.domain([0, d3.max(filteredData, d=> d.observation_N_cumSum)+5]); //drawing axises svg.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.select(".domain").remove());// using the “post-selection” technique (modifying the DOM after creation by the axis) to remove the y axis lines(domain) svg.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(xAxis); //create group element for bars, data binding const barGroups = svg.selectAll(".bar-group") .data(series) .enter().append("g") .style("fill", d => colorScale(d.key)) .attr("class", "bar-group"); const bar = barGroups.selectAll(".bar") .data(d => d)//why is this? How d different from series? //so we bound `series` to barGroups right above, so when we are making our bar, we reference the nested data //barGroups has the series level data, then each bar uses the data within each group .enter().append("rect") .attr("class", "bar") .attr("x", d => xScale(d.data.month)) .attr("y", d => yScale(d[1])) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d[0]) - yScale(d[1])) //lables on the bar const texts = barGroups.selectAll(".text") .data(d => d) .enter().append("text") .attr("class", "text") .style("fill", "black") .style("text-anchor", "middle") .style("opacity", d => { return (yScale(d[0]) - yScale(d[1])) < 20 ? 0 : 1 // if the bar height is less than 20 then hide the labels }) .attr("x", d => xScale(d.data.month) + xScale.bandwidth()/2) //middle of the corresponding bar horizontally .attr("y", d => yScale(d[1]) + (yScale(d[0]) - yScale(d[1]))/2) //middle of the corresponding bar vertically .text(d=>d[1]-d[0]) //add tooltip. on event bar.on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html("Obs in "+ d.data.month +": "+d.data.observation_N +"
" + "Cumulated sum: "+ d.data.observation_N_cumSum + "
" ) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px") //Recover the mouse position when the event happens.Can add a numeric value next to pageX or Y to adjust the tooltip position //style("top", d3.select(this).attr("cy") + "px"); Aother option -- It selects the element that is hovered. Thus, it is possible to get whatever attribute or style of this element, like its position. }) .on("mouseout", function(d) { ttDiv.transition() .duration(200) .style("opacity", 0) }); //drawing the legend const legendboxw=50; const legendboxh=13; const legend_g = svg.selectAll(".legend") .data(colorScale.domain().reverse()) .enter().append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) //.attr("transform", (d, i) => `translate(${width},${i * 20})`); //legend on the right edge in the SVG. 'i*20' is to space out the item vertically here .attr("transform", (d, i) => `translate(${i*(legendboxw+120)},${height+30})`); //legend in the bottom edge in the SVG. 'i*200' is to space out the item horizontally here legend_g.append("rect") .attr("x", (width-legendboxw*2-120*2)/2) .attr("width", legendboxw) .attr("height", legendboxh) .attr("fill", colorScale); legend_g.append("text") .attr("x", (width-legendboxw*2-118*2)/2+legendboxw) .attr("y", 9.5) // .attr("dy", "0.35em") .text(d => { return (d =='observation_N'? 'Progress this month':'Previous progress') }); return div }32:[] 2f:{"title":"MOTP monthly (stacked bars with dropdown filter)","cells":[{"id":0,"value":"md`# MOTP monthly *(stacked bars with dropdown filter)*`\n\n// {\n// const p = md`# MOTP monthly *(stacked bars)*`;\n// p.style.color = d3.interpolateRainbow(now / 1000);\n// return p;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"margin = ({top: 30, right: 20, bottom: 80, left: 50});//Make bigger bottom margin for the color legend","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"width = 800 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"height = 500 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"dataset=d3.csv(\"https://gist.githubusercontent.com/xianwu/51ed4cce018d77e703efb2df105e5b70/raw/87803bf5dcf7fc10b54925466e82822c86d3469d/schMonthLvl_forStack.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"stack = d3.stack()\n .keys([\"observation_N_prev_sum\", \"observation_N\"])\n .order(d3.stackOrderNone)\n .offset(d3.stackOffsetNone);","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"series = stack(filteredData) ////make stack data -- series","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"xScale = d3.scaleBand() \n .padding([0.5])\n .range([0, width])\n //.domain(d3.set(filteredData.map(d => d.month)).values())\n .domain(['SEP','OCT','NOV','DEC','JAN','FEB','MAR','APR','MAY','JUN'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":" yScale = d3.scaleLinear()\n .range([height, 0])\n// .domain([0, d3.max(filteredData, d=> d.observation_N_cumSum)+5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"colorScale = d3.scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"observation_N_prev_sum\", \"observation_N\"])\n .range([\"#b9b8b8\" ,\"#800e9c\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"xAxis = d3.axisBottom(xScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(-width)\n .ticks(6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"function dropdown(options) {\n let dd = html `