2d:null 2e:["$","title",null,{"children":"MOTP component YOY (groupped bars with ref line) | xianwu | Observable"}] 33:T1c53,myChart={ const div = html`

`; //create container, a div append to body, for tooltip const ttDiv = d3.select("body").append("div") .attr("id", "myTooltip") //create the svg, added to the div 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})`); // add a rectangle to the svg, so the component text in xAxis looks like in box header const borderPath = svg.append("rect") .attr("class","outline") .attr("style", "outline: thin solid black;") .attr("x", 1) .attr("y", -15) .attr("height", 15) .attr("width", width-1) .style("fill", "#0099e5") .style("fill-opacity",0.2); //add teacher's name as title of the chart svg.append("text") .attr("class", "title") //.style("font", "18px sans-serif") .attr("x",width/2) .attr("y",-22) .style("text-anchor", "middle") .text(" "+ d3.set(filteredData.map(d => d.Teacher_Name + " ("+d.Fake_EmpID+")'s Component Average Ratings")).values()); //drawing axises svg.append("g") .attr("class", "y axis") .call(yAxis) // text title for the y axis svg.append("text") .attr("transform", "rotate(-90)") .attr("y",0 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Avg. Rating"); svg.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(xAxis) .selectAll("line") .attr("transform",`translate(${xScale.bandwidth()/2},${0})`) //move tickes by half bandwidth so that the ticks between axis label text. //create group element for bars, data binding const barGroups = svg.selectAll(".bar-group") .data(nestedData) .enter().append("g") .attr("class", "bar-group") .attr("transform", d => `translate(${xScale(d.key)},0)`); const bar = barGroups.selectAll(".bar") .data(d => d.values) .enter().append("rect") .attr("class", "bar") .attr("x", d => xSubScale(d.FiscalYear)) .attr("y", d => yScale(d.Component_Average)) .attr("width", d => xSubScale.bandwidth()) .attr("height", d => height - yScale(d.Component_Average)) .style("fill", d => colorScale(d.FiscalYear)) //lables on the bar const texts = barGroups.selectAll(".text") .data(d => d.values) .enter().append("text") .attr("class", "text") .style("fill", "black") .style("text-anchor", "middle") .attr("x", d => xSubScale(d.FiscalYear) + xSubScale.bandwidth()/2) //middle of the corresponding bar horizontally .attr("y", d => yScale(d.Component_Average)-1) //middle of the corresponding bar vertically .text(d=>d.Component_Average) //add tooltip. on event bar.on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(d.FiscalYear+ "
Component "+ d.MOTPComponent_2char +": "+d.Component_Average +"
Component Rating: "+d.Component_Rating +"
" ) .style("text-anchor","middle")/*why not working?*/ .style("font","13px") .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. d3.select(this).style("fill","yellow");//highlight the mouseover element }) .on("mouseout", function(d) { ttDiv.transition() .duration(200) .style("opacity", 0); d3.select(this).style("fill",colorScale(d.FiscalYear));//change color of the mouseover element back to original color }); //add the horizontal line (reference line/threshold line) to show the MOTP score to date const refline = svg.selectAll(".ref") .data(filteredData.filter(d => d.FiscalYear==2019)) .enter().append("g") refline.append("line") .style("stroke","orange") .style("stroke-dasharray", ("2, 2"))//make it as a dashed line .style("stroke-width","2") .attr("x1",d=>0) .attr("y1",d=>yScale(d.MOTP_Score)) .attr("x2",d=>width) .attr("y2",d=>yScale(d.MOTP_Score)); refline.append("text")//make it like the legend on right .text(d=>".. 2019 Score to Date") .attr("fill","orange") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("x",d=>width+10) .attr("y",d=>yScale(2.5)); //add mouse over tooltip on the reference line too refline.on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity",0.9); ttDiv.html("2019 Score-to-Date: "+d.MOTP_Score+"
Score-to-Date is calculated by
summing weighted component
averages...") .style("text-align","left") .style("font","11px") .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. d3.select(this).select("line").style("stroke","#ffcc00");//highlight the mouseover element }) .on("mouseout", function(d) { ttDiv.transition() .duration(200) .style("opacity", 0); d3.select(this).select("line").style("stroke","orange");//change color of the mouseover element back to original color }); //drawing the legend const legendboxw=10; const legendboxh=10; console.log('colorScale.domain() is ..', colorScale.domain()); const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("transform", (d, i) => `translate(${width+10},${i * 20})`); //legend on the right edge in the SVG. 'i*20' is to space out the item vertically here legend_g.append("rect") .attr("x", 0) .attr("y",70) .attr("width", legendboxw) .attr("height", legendboxh) .attr("fill", colorScale); legend_g.append("text") .attr("x", 12) .attr("y", 80) //.attr("dy", ".35em") //.text(d=>d) .text(d => { return (d ==2017? '2017 rating avg.':d) }); return div }34:[] 31:{"id":"81ddead5cc071f21","slug":"motp-component-yoy-groupped-bars-with-ref-line","title":"MOTP component YOY (groupped bars with ref line)","thumbnail":"2fb800a0c6affa972f8d79f7095341ebd33b40f77e1d3b88000c3899c1e59f09","access_level":"public","create_time":"$D2019-03-07T20:04:37.223Z","update_time":"$D2019-03-12T13:56:56.491Z","view_time":null,"first_public_time":"$D2019-03-07T20:27:19.927Z","has_unpublished_edits":null,"fork":{"id":"9e9b0edd3b77ef7e","slug":"motp-component-yoy-groupped-bars","title":"MOTP component YOY *(groupped bars)*","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"07eb89e13a02f14c","login":"xianwu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/401f68373cca3382e0297248a61beae2cfc6bbf34de0b389ca7977d391e485a6","tier":"starter_2024"},"version":116,"publish_version":116,"role":null,"authored":false,"authors":[{"type":"individual","id":"427c93af09fd709e","login":"xianwu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/401f68373cca3382e0297248a61beae2cfc6bbf34de0b389ca7977d391e485a6","tier":null}],"members":[{"type":"individual","id":"427c93af09fd709e","login":"xianwu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/401f68373cca3382e0297248a61beae2cfc6bbf34de0b389ca7977d391e485a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"MOTP component YOY (groupped bars with ref line)","cells":[{"id":0,"value":"md`# MOTP component YOY *(groupped bars with ref line)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"margin = ({top: 40, right: 120, bottom: 20, left: 25});//Make bigger right margin for the color legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"width = 850 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 200 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"xScale = d3.scaleBand() \n .domain(['1a','1e','2a','2d','3b','3c','3d','4e'])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":" //make sub-X-scale, witch is the year\n xSubScale = d3.scaleBand()\n .padding([.1])\n .domain([2017,2018,2019])\n .range([0, xScale.bandwidth()]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"yScale = d3.scaleLinear()\n .domain([0, 4.3])\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"xAxis = d3.axisTop(xScale)\n .tickSize(height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"yAxis = d3.axisLeft(yScale)\n .ticks(4)\n .tickSize(-width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"colorScale = d3.scaleOrdinal()\n .domain([2017,2018,2019])\n .range(['#f0bbf9', '#ea9ef7', '#df54f7'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"dataset=d3.csv(\"https://gist.githubusercontent.com/xianwu/1937c0c2eaeded47ffb0c0db82abab1c/raw/97dee4be0fd464e9746e8103101dbed4b0e2dc35/tchCmpntLvl.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"filteredData = dataset.filter(d => d.Fake_EmpID=='1507945' & d.Component_Average>0);//teacher 1121995 has only 2019 and 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"nestedData = d3.nest()\n .key(d => d.MOTPComponent_2char) //parent level of the hierarchy\n .entries(filteredData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"