2d:null 2e:["$","title",null,{"children":"Bar and Line chart | xianwu | Observable"}] 33:T400,html` `34:T1d34,myChart = { //coerce to number //make a new column observation_N_cumSum presents the cumulated sum observations as of the month sortedbarLineData.forEach(function (d) { d.AvgMOTP_Score = +d.AvgMOTP_Score; d.PrincipalActiveYears = +d.PrincipalActiveYears; }); //this line is for observable only const div = html`

`; const ttDiv = d3.select("body").append("div") .attr("id", "myTooltip") //-------------- create SVG -- Scalable Vector Graphics object. const svg = d3.select(div) //tell machine you want the following changes in body tag. selects the HTML body element. use d3.select("body") when outside of observable .append("svg") //append SVG now .attr("width", width + margin.left + margin.right) //set the width attribute by adding margin to your width const .attr("height", height + margin.top + margin.bottom) // set the height attribute by adding margin to your height const .append("g") //appends a g element to the SVG. g element is used to group SVG shapes together. .attr("transform",`translate(${margin.left}, ${margin.top})`) //append a group element and call the xAxis function. so that all components of the x axis will be grouped under the group element. we then apply a translate transformation to align the x axis to move down as much as height from the origin const x = svg.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(xAxis) x.selectAll("text") .style("text-anchor", "end") .attr("dx", "-.2em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); x.selectAll("line") .attr("transform", `translate(${xScale.bandwidth()/2}, 0)`) .attr("stroke","grey") .attr("stroke-width","0.5px"); //append a group element and insert y axis svg.append("g") .attr("class", "y axis") .attr("transform", `translate(${width},0)`) .call(yAxis) svg.append("g") .attr("class", "y axis yAxisLine") .call(yAxisLine) // Data line and dots group const lineAndDots = svg.append("g") .attr("class", "line-and-dots") .attr("transform", `translate(${xScale.bandwidth()/2}, 0)`) // Data line lineAndDots.append("path") .datum(sortedbarLineData) .attr("class", "data-line") .style("stroke-width","3") .style("stroke-opacity","0.5") .attr("d", lineMaker); // an equivalent expression // const path = svg.append('path').attr('d', lineMaker(lineData)); /*Difference between datum() and data() in D3 # selection.data([values[, key]]) Joins the specified array of data with the current selection. The specified values is an array of data values, such as an array of numbers or objects, or a function that returns an array of values. ... # selection.datum([value]) Gets or sets the bound data for each selected element. Unlike the selection.data method, this method does not compute a join (and thus does not compute enter and exit selections).*/ // Data dots lineAndDots.selectAll(".dot") .data(sortedbarLineData) .enter().append("circle") .attr("class", "dot") .style("opacity","0.6") .attr("r", 3) .attr("cx", d=> xScale(d.Fake_DBN)) .attr("cy", d=> yScaleLine(d.AvgMOTP_Score)); // label on Data dots lineAndDots.selectAll("text") .data(sortedbarLineData) .enter().append("text") .style("fill", "purple") .style("text-anchor", "middle") .attr("font-size", 12) .attr("x", d=> xScale(d.Fake_DBN)) .attr("y", d=> yScaleLine(d.AvgMOTP_Score)-1) //move text up by 1 px .text(d=>d.AvgMOTP_Score); //append rectangles (bars) const g = svg.selectAll(".bar-group") .data(sortedbarLineData) .enter().append("g") .attr("class","bar-group"); g.append("rect")// enter() creates the initial join of data to elements, creating one rectangle element for every data element in the data source .attr("class", "bar") .attr("x", d => xScale(d.Fake_DBN)) //x position of the top-left point of the rect .attr("y", d => yScale(d.PrincipalActiveYears)) //y position of the top-left point of the rect .attr("height", d => height - yScale(d.PrincipalActiveYears)) //height starts from the TOP and moves down due to SVG Coordinate system .attr("width", d => xScale.bandwidth()) .style("fill", 'orange') .style("fill-opacity","0.4") //add lables on the bar g.append("text") .attr("class", "barLable") .attr("transform", "rotate(-90)") .style("fill", "black") .style("text-anchor", "middle") //default is anchor on the left .attr("x",d => height - yScale(d.PrincipalActiveYears)-yScale(0)- (height - yScale(d.PrincipalActiveYears))/2) // because of the rotate!!! .attr("y",d=> xScale(d.Fake_DBN)+ xScale.bandwidth()/1.5) // because of the rotate!!! // .attr("x", d => xScale(d.Fake_DBN) + xScale.bandwidth()/2) //middle of the corresponding bar horizontally // .attr("y", d => yScale(d.PrincipalActiveYears)) //middle of the corresponding bar vertically .text(d=>{ return ((height - yScale(d.PrincipalActiveYears))>=25? d.PrincipalActiveYears: '') }); //add tooltip. on event g.selectAll("rect").on("mouseover",function(d){ ttDiv.transition() .duration(200) .style("opacity", 0.9); ttDiv.html(""+d.Fake_DBN+ "
School MOTP score Avg: "+d.AvgMOTP_Score +"
Principal active years: "+d.PrincipalActiveYears +"
" ) .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","orange");//change color of the mouseover element back to original color }); const colorScale = d3.scaleOrdinal() .domain(["MOTP Avg Score to Date","Principal Active Years"]) .range(['purple', 'orange']) 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+20},${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", 10) .attr("height", 10) .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 ==2017? '2017 rating avg.':d) }); return div }35:[] 31:{"id":"a818e841c517929a","slug":"bar-and-line-chart","title":"Bar and Line chart","thumbnail":"6cd189c1868cfae3b3c08188ac2357c90bc9c42077277c6f8f65a37ee6a23598","access_level":"public","create_time":"$D2019-03-08T02:19:44.650Z","update_time":"$D2019-04-02T15:20:20.591Z","view_time":null,"first_public_time":"$D2019-03-12T19:36:08.635Z","has_unpublished_edits":null,"fork":{"id":"7c6921f20c6a747f","slug":"the-simpliest-bar-i-have-ever-seen","title":"the simplest bar I have ever seen","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"07eb89e13a02f14c","login":"xianwu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/401f68373cca3382e0297248a61beae2cfc6bbf34de0b389ca7977d391e485a6","tier":"starter_2024"},"version":424,"publish_version":424,"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":6,"collection":null,"type":"notebook","body":{"title":"Bar and Line chart","cells":[{"id":0,"value":"md`# Bar and Line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"margin = ({top: 20, right: 200, bottom: 80, left: 40});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"width = 900 -margin.left -margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"height = 350 -margin.top -margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/xianwu/85211e5db76c0e87d209fde7ddc8121c/raw/869e002ef472cad57ca2c19cf259ce549236a1af/principalExp_vs_MOTPscore.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"barData=dataset.filter(d=> d.MeasureNames == \"Principal Active Years\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"lineData = dataset.filter(d => d.MeasureNames=='MOTP Avg Score to Date')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"join= function join(lookupTable, mainTable, lookupKey, mainKey, select) {\n var l = lookupTable.length,\n m = mainTable.length,\n lookupIndex = [],\n output = [];\n for (var i = 0; i < l; i++) { // loop through l items\n var row = lookupTable[i];\n lookupIndex[row[lookupKey]] = row; // create an index for lookup table\n }\n for (var j = 0; j < m; j++) { // loop through m items\n var y = mainTable[j];\n var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable\n output.push(select(y, x)); // select only the columns you need\n }\n return output;\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"barLineData = join(lineData, barData, \"Fake_DBN\", \"Fake_DBN\", function(bar, line) {\n return {\n Fake_DBN: bar.Fake_DBN,\n MeasureNames: bar.MeasureNames,\n PrincipalActiveYears: bar.PrincipalActiveYears,\n AvgMOTP_Score: (line !== undefined) ? line.AvgMOTP_Score : null\n };\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"sortedbarLineData= barLineData.sort((a,b) => {return a.PrincipalActiveYears - b.PrincipalActiveYears})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"xScale = d3.scaleBand() \n //.domain(d3.set(tmp.map(d => d.Fake_DBN)).values())\n .domain(d3.set(sortedbarLineData.map(d => d.Fake_DBN)).values())\n .range([0, width])\n //.padding([.1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"yScale = d3.scaleLinear()\n //.domain(d3.extent(sortedbarLineData, d =>d.PrincipalActiveYears)).nice() //nice rounds the domain to ‘nice’ round values\n .domain([0,18])\n .range([height,0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"yScaleLine = d3.scaleLinear()\n .domain([0,4.3])// nice rounds the domain to ‘nice’ round values\n .range([height,0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"xAxis = d3.axisBottom(xScale)\n .tickSize(-height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"yAxis = d3.axisRight(yScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"yAxisLine = d3.axisLeft(yScaleLine)\n .ticks(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":" // Define the line\n//generate any path description from a data array with the line() object (which is simple a path description generator).\nlineMaker = d3.line()\n .x(d=>xScale(d.Fake_DBN))\n .y(d=>yScaleLine(d.AvgMOTP_Score));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"