30:T125e,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})`); filteredData.forEach(function (d) { d.FiscalYear = +d.FiscalYear; // coerce to number d.Component_Average = +d.Component_Average; d.MOTP_Score = +d.MOTP_Score; }); //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",-20) .style("text-anchor", "middle") .text(" "+ d3.set(filteredData.map(d => d.Teacher_Name + " ("+d.Fake_EmpID+")'s "+Math.abs(d.FiscalYear - 1)+"-"+d.FiscalYear+ " Component Average Ratings")).values()); //drawing axises svg.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(xAxis) svg.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.select(".domain").remove()); const bar = svg.selectAll(".bar") .data(filteredData) .enter().append("rect") .attr("class", "bar"); bar.transition().duration(750) .attr("x", d => 0) .attr("y", d => yScale(d.MOTPComponent_2char)) .attr("width", d => xScale(d.Component_Average)) .attr("height", d => yScale.bandwidth()) .style("fill", d => colorScale(d.Component_Rating)) //lables on the bar const texts = svg.selectAll(".text") .data(filteredData) .enter().append("text") .attr("class", "label"); texts.transition().duration(750) .style("fill", "black") .attr("x", d => xScale(d.Component_Average)+2 ) //end of the corresponding bar horizontally .attr("y", d => yScale(d.MOTPComponent_2char)+ yScale.bandwidth()/2) //middle of the corresponding bar vertically .text(d=>d3.format(".2f")(d.Component_Average) ) // format number to show 2 decimals //add tooltip. on event bar.on("mouseover",function(d,i){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(d.FiscalYear+ "
Component "+ d.MOTPComponent_2char +": "+d3.format(".2f")(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('opacity', 1); //change opacity of selected element to 1 svg.selectAll('.bar').filter(function(e, j) { return i != j; }).style('opacity', .2);//change opacity of any un-selected element to 0.4 }) .on("mouseout", function(d) { ttDiv.transition() .duration(200) .style("opacity", 0); svg.selectAll('.bar').style('opacity', .8);//change opacity of all elements back to original 0.8 }); //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+50},${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", height/2) .attr("width", legendboxw) .attr("height", legendboxh) .attr("fill", colorScale); legend_g.append("text") .attr("x", 12) .attr("y", height/2+10) //.attr("dy", ".35em") //.text(d=>d) .text(d => { return (d =='I'? 'Ineffective':(d=='E'?'Effective':(d=='D'?'Developing':(d=='H'?'Highly Effective':'what?')))) }); return div }31:[] 2e:{"title":"Horizontal bar","cells":[{"id":0,"value":"md`# Horizontal bar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"margin = ({top: 60, right: 150, bottom: 20, left: 25});","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"width = 800 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 400 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":" yScale = d3.scaleBand() \n .domain(['1a','1e','2a','2d','3b','3c','3d','4e'])\n .padding([0.25])\n .range([0, height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"xScale = d3.scaleLinear()\n .domain([1, 4])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"yAxis = d3.axisLeft(yScale)\n .tickSize(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"xAxis = d3.axisBottom(xScale)\n .ticks(4)\n .tickSize(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"colorScale = d3.scaleOrdinal()\n .domain(['H','E','D','I'])\n .range([\"#86cbff\", \"#94d894\", \"#ffc56d\",\"#fff686\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"dataset=d3.csv(\"https://gist.githubusercontent.com/xianwu/1937c0c2eaeded47ffb0c0db82abab1c/raw/97dee4be0fd464e9746e8103101dbed4b0e2dc35/tchCmpntLvl.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"filteredData = dataset.filter(d => d.Fake_EmpID==empSelected & d.FiscalYear==yearSelected & d.Component_Average>0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"dropdownOptions= d3.set(dataset.map(d => d.Fake_EmpID)).values();","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"dropdownOptionsYr= d3.set(dataset.map(d => d.FiscalYear)).values();","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof empSelected = select({\n title: \"Pick an EmployeeID\",\n options: dropdownOptions,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof yearSelected = select({\n title: \"Pick a fiscal year\",\n options: dropdownOptionsYr,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}