2d:null 2e:["$","title",null,{"children":"Multi layer Area chart | xianwu | Observable"}] 33:T179a,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("YOY MOTP Score distribution"); //add axis and axis lable svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("x", -6) .attr("dy", "0.71em") .attr("fill", "#000") .text("Number of teachers"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("y", margin.bottom/2) .attr("x", width/2) .attr("fill", "#000") .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size","11px") .text("MOTP Score"); // adding the areas var areaYear = svg.selectAll(".area") .data(areaData) .enter().append("g") //.attr("class", function(d) { return `area ${d.key}`; }) .attr("class", "area") areaYear.append("path") //.attr("d", function(d) { console.log("area(d.values) in path is..",area(d.values)); return area(d.values); }) .attr("d", d=> area(d.values)) .style("fill", d=> colorScale(d.key)); //add tooltip. on event areaYear.on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(""+d.key+ " MOTP score distribution " ) .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("stroke", "#ffd632") .style("stroke-width",3)//highlight the mouseover element .style("fill-opacity", 1); }) .on("mouseout", function(d) { ttDiv.transition() .duration(200) .style("opacity", 0); d3.select(this) .style("stroke", "none") .style("fill-opacity", 0.7);//change color of the mouseover element back to original color }); // Adding the lines const lineMaker = d3.line() .x(d=>xScale(d.MOTP_Score)) .y(d=>yScale(d.count)); const lineYear = svg.selectAll(".lines") .data(areaData) .enter().append("g") .attr("class","lines") lineYear.append("path") .attr("fill", "none") .attr("stroke", d=> colorScale(d.key)) .attr("stroke-width", 2) .attr("d", d=> lineMaker(d.values)) // Add the circle const circle_group = svg.selectAll(".circlegroup") .data(areaData) .enter().append("g") .attr("class", "circlegroup"); const circles = circle_group.selectAll(".circle") .data(d => d.values) .enter().append("circle") .attr("class", "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 circles.on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(""+d.FiscalYear+ "
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 }); //drawing the legend const legendboxw=10; const legendboxh=10; 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) .text(d => "FY "+d); return div }34:[] 31:{"id":"0a183c2a899158d5","slug":"multi-layer-area-chart","title":"Multi layer Area chart","thumbnail":"fb90be8fdcecc1b3c30c4d22d31858193ab63de5b390e61630ed9b867b41ff10","access_level":"public","create_time":"$D2019-04-12T19:04:54.513Z","update_time":"$D2019-04-12T19:18:09.463Z","view_time":null,"first_public_time":"$D2019-04-12T19:18:50.225Z","has_unpublished_edits":null,"fork":{"id":"f3ba45544054b823","slug":"area-chart-with-path-and-circles","title":"Area chart with path and circles","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":195,"publish_version":195,"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":0,"collection":null,"type":"notebook","body":{"title":"Multi layer Area chart","cells":[{"id":0,"value":"md`# Multi layer Area chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`-- SET UP --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"width = 800 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"height = 400 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`-- DATA --`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":24,"value":"xScale = d3.scaleLinear()\n .domain([1,4])\n .rangeRound([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"yScale = d3.scaleLinear()\n .domain([0,d3.max(areaData0.map(d => d.count))])\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"2018\", \"2019\"])\n .range([\"rgba(249, 208, 87, 0.7)\", \"rgba(54, 174, 175, 0.65)\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"xAxis =d3.axisBottom(xScale)\n .tickSize(-height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"yAxis =d3.axisLeft(yScale)\n .tickSize(-width)\n .tickFormat(d3.format(\"d\"))\n .ticks(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"filteredData = dataset.filter(d => d.MOTP_Score >0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"//----------------------- STEP 1. Get distint FiscalYear - employeeID - MOTPscore combination into a new dataset.\ndistinctData = d3.nest()\n .key(d=> d.FiscalYear + d.Fake_EmpID + d.MOTP_Score)\n .entries(filteredData)\n .map(d=> d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"newDistinct = {\n var newDistinct=[];\n distinctData.forEach(d => {\n var el={};\n el.FiscalYear = d.substring(0,4);\n el.Fake_EmpID = d.substring(4,11);\n el.MOTP_Score = d.substring(11,15);\n newDistinct.push(el);\n })\n return newDistinct;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"//----------------------- STEP 2. Roll up to get the count of teachers per MOTP score value\nareaData0 = d3.nest()\n .key(d=> d.FiscalYear + d.MOTP_Score)\n .rollup(ids => {\n return {\n FiscalYear: d3.set(ids.map(d => d.FiscalYear)).values()[0],\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"areaData={\n //convert MOTP_score from text to numeric, and then sort data by MOTP_score from low to high\n areaData0.forEach(d=>{\n d.MOTP_Score = +d.MOTP_Score\n });\n areaData0.sort((a,b) => {return a.MOTP_Score - b.MOTP_Score});\n \n //-------------------------STEP 3. nest() to make FiscalYear as key\n const areaData = d3.nest()\n .key(d=>d.FiscalYear)\n .entries(areaData0);\n return areaData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"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"