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

`; const ttDiv = d3.select("body").append("div") .attr("id", "myTooltip"); //convert MOTP_score from text to numeric, and then sort data by MOTP_score from low to high areaData.forEach(d=>{ d.MOTP_Score = +d.MOTP_Score }) areaData.sort((a,b) => {return a.MOTP_Score - b.MOTP_Score}) console.log("areaData:", areaData); 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})`); const area = d3.area() .x(d => xScale(d.MOTP_Score)) .y0(d=> yScale(0)) .y1(d=> yScale(d.count)) .curve(d3.curveMonotoneX);//other options: d3.curveBasis, d3.curveCardinal, d3.curveLinear //add title for the chart svg.append("text") .attr("class", "title") .attr("x",width/2) .attr("y",-3) .style("text-anchor", "middle") .text("FY "+ selectedYear + " MOTP Score distribution"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); 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") .style("font-size","11px") .text("Number of teachers"); // text title for the x axis svg.append("text") .attr("y", height + (margin.bottom/2)) .attr("x", width/2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size","11px") .text("MOTP Score"); svg.append("path") .datum(areaData) .attr("class", "area") .attr("d", area) .attr("fill", "steelblue") .style("fill-opacity", .8) //.style("stroke", "#000") // Add the line svg.append("path") .datum(areaData) .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-width", 2) .attr("d", d3.line() .x(d=> xScale(d.MOTP_Score)) .y(d=> yScale(d.count)) //.curve(d3.curveMonotoneX) ) // Add the circle const circle_group = svg.selectAll(".circlegroup") .data(areaData) .enter().append("g") .attr("class", "circlegroup"); circle_group.append("circle") .attr("fill", "orange") .attr("stroke", "none") .attr("cx", d=> xScale(d.MOTP_Score)) .attr("cy", d=> yScale(d.count)) .attr("r", 4) //add tooltip. on event circle_group.selectAll("circle").on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(""+selectedYear+ "
MOTP score: "+d.MOTP_Score +"
number of teachres: "+d.count +"
" ) .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 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","orange");//change color of the mouseover element back to original color }); return div }32:[] 2f:{"title":"Area chart with path and circles","cells":[{"id":0,"value":"md`# Area chart with path and circles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"margin = ({top: 30, right: 80, bottom: 30, left: 30});//Make bigger right margin for the color legend","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"width = 800 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 400 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"dataset=d3.csv(\"https://gist.githubusercontent.com/xianwu/1937c0c2eaeded47ffb0c0db82abab1c/raw/97dee4be0fd464e9746e8103101dbed4b0e2dc35/tchCmpntLvl.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"xScale = d3.scaleLinear()\n .domain([1,4])\n .rangeRound([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"yScale = d3.scaleLinear()\n .domain([0,d3.max(areaData.map(d => d.count))])\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"colorScale = d3.scaleOrdinal()\n .domain([2018,2019])\n .range(['#d60f5c','#008cf4'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"xAxis =d3.axisBottom(xScale)\n .tickSize(-height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"yAxis =d3.axisLeft(yScale)\n .tickSize(-width)\n .tickFormat(d3.format(\"d\"))\n .ticks(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"filteredData = dataset.filter(d => d.FiscalYear==selectedYear & d.Component_Average>0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"distinctData = d3.nest()\n .key(d=> d.Fake_EmpID + d.MOTP_Score)\n .entries(filteredData)\n .map(d=> d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"newDistinct = {\n var newDistinct=[];\n distinctData.forEach(d => {\n var el={};\n el.Fake_EmpID = d.substring(0,7);\n el.MOTP_Score = d.substring(7,11);\n newDistinct.push(el);\n })\n return newDistinct;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"areaData = d3.nest()\n .key(d=> d.MOTP_Score)\n .rollup(ids => {\n return {\n MOTP_Score: d3.set(ids.map(d => d.MOTP_Score)).values()[0],\n count: ids.length\n }\n })\n .entries(newDistinct)\n .map(d=> d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof selectedYear = radio({\n title: 'Fiscal Year',\n description: 'Please select a fiscal year to filter data',\n options: d3.set(dataset.map(d => d.FiscalYear)).values(),\n value: '2019'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}