2d:null 2e:["$","title",null,{"children":"Bar data | anndawn | Observable"}] 33:T542,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const updateBars = bars(svg); // const updateAxis = axis(svg); // const updateLabels = labels2(svg) // const updateTicker = ticker(svg); invalidation.then(() => svg.interrupt()); return Object.assign(svg.node(), { update(da) { const transition = svg.transition() .duration(duration) .ease(d3.easeLinear); // Extract the top bar’s value. const data_keyframe=da[1].slice(0,n) const min_x=d3.min(data_keyframe.map(d=>d.cur_value))<0?Math.ceil(d3.min(data_keyframe.map(d=>d.cur_value))/(-0.1))*(-0.1):0 const max_x = Math.ceil (da[1][0].cur_value/0.1)*0.1 x.domain([min_x,max_x]); // const key_length= data_keyframe.filter(d=>d.value2!=-50).length // console.log(key_length,n) // if (key_lengthd.value2!=-50).map(d=>d.name)) // } // else // {y.domain(d3.range(n + 1)) // y2.domain(data_keyframe.map(d=>d.name)) // } // updateAxis(da, transition); updateBars(da, transition); // updateLabels(da, transition); // updateTicker(da, transition); } }); }34:T8a6,function bars(svg) { let bar = svg.append("g") .attr("fill-opacity", 0.6) .selectAll("rect"); return ([date, data], transition) => bar = bar .data(data.slice(0, n), d => d.name) .join( enter => enter.append("rect") .attr("fill", color) .attr("height", y.bandwidth()) .attr("x", d => d.pre_value <0? x(d.pre_value): x(0)) .attr("y", d => y(d.pre_rank)) .attr("width", d => Math.abs(x(d.pre_value) - x(0))), update => update.transition(transition) .attr("x", d => d.cur_value<0? x(d.cur_value): x(0)) .attr("y", d => y(d.cur_rank)) .attr("width", d => Math.abs( x(d.cur_value) - x(0))), exit => exit.transition(transition) .attr("x", d => d.next_value<0? x(d.next_value): x(0)) .attr("y", d => y(n)) .attr("width", d => Math.abs( x(d.next_value) - x(0))) .remove() )} // .join(enter => enter.append("rect") // .attr("fill", color) // .attr("height", y.bandwidth()) // .attr("x", d =>d.pre_value <0? x(d.pre_value): x(0)) // .attr("y", d => y(d.pre_rank)) // .attr("width", d => Math.abs(x(d.pre_value) - x(0))), // update => update.transition(transition) // .attr("x", d => d.cur_value<0? x(d.cur_value): x(0)) // .attr("y", d => y(d.cur_rank)) // .attr("width", d => Math.abs( x(d.cur_value) - x(0))), // exit => exit.transition(transition).remove() // .attr("x", d => d.next_value<0? x(d.next_value): x(0)) // .attr("y", d => y(n)) // .attr("width", d => Math.abs( x(d.next_value) - x(0))) // ) // .call(bar => bar.transition(transition) // .attr("x", d => d.cur_value<0? x(d.cur_value): x(0)) // .attr("y", d => y(d.cur_rank)) // .attr("width", d => Math.abs( x(d.cur_value) - x(0))) // ); // }35:Taa1,function labels(svg) { let label = svg.append("g") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x(0)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", 0) .attr("dy", "0.35em") .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .text(d => d.name.substring(0, d.name.length - 2)) .call(text => text.append("tspan").attr("dx", d=> ((prev.get(d) || d).value>0?(x((prev.get(d) || d).value)-x(0))+(y.bandwidth()>14? 12: y.bandwidth())*4:(x((prev.get(d) || d).value)-x(0)))) .attr("fill-opacity", 0.7) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .attr("x", 0) .attr("dy", "0.1em") ), update => update, exit => exit.transition(transition).remove() // .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .attr("transform", d => `translate(${x(0)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan") .attr("dx", d => (next.get(d) || d).value>0? (x((next.get(d) || d).value)-x(0))+(y.bandwidth()>14? 12: y.bandwidth())*4:(x((next.get(d) || d).value)-x(0))) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar // I added this line .attr("transform", d => (prev.get(d)|n>100)?`translate(${x(0)},${y((prev.get(d) || d).rank)})`:`translate(${x(0)},${y(d.rank)})`) .transition(transition) .attr("transform", d => `translate(${x(0)},${y(d.rank)})`) // .attr("dy",d=>y(d.rank)-y((prev.get(d) || d).rank)) .attr("y", y.bandwidth() / 2) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .attr('x',0) .call(g => g.select("tspan") .attr("dx", d => d.value>0?(x(d.value)-x(0)+(y.bandwidth()>14? 12: y.bandwidth())*4):(x(d.value)-x(0))) .tween("text", d => textTween((prev.get(d) || d).value, d.value)) .attr("font-weight", "bold") .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) )); }36:T9ff,function labels2(svg) { let label = svg.append("g") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(0,${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", x(0)) .attr("dy", "0.35em") .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .text(d => d.name.substring(0, d.name.length - 2)) .call(text => text.append("tspan") .attr("dx", d=> ((prev.get(d) || d).value>0?(x((prev.get(d) || d).value)-x(0))+(y.bandwidth()>14? 12: y.bandwidth())*4:(x((prev.get(d) || d).value)-x(0)))) .attr("fill-opacity", 0.7) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr('font-weight','bold') .attr("x", x(0)) .attr("dy", "0.1em") ) , update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(0,${y((next.get(d) || d).rank)})`) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) .call(g => g.select("tspan") .attr("dx", d => (next.get(d) || d).value>0? (x((next.get(d) || d).value)-x(0))+(y.bandwidth()>14? 12: y.bandwidth())*4:(x((next.get(d) || d).value)-x(0))) .tween("text", d => textTween(d.value, (next.get(d) || d).value)) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) ) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(0,${y(d.rank)})`) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) .call(g => g.select("tspan") .attr("dx", d => d.value>0?(x(d.value)-x(0)+(y.bandwidth()>14? 12: y.bandwidth())*4):(x(d.value)-x(0))) .tween("text", d => textTween((prev.get(d) || d).value, d.value)) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) ) ) }37:T4cc,function axis(svg) { const g = svg.append("g") .attr("transform", `translate(0,${margin.top})`) .attr('font-weight','bold') .attr('font-size',12) // const g_y = svg.append("g") // .attr("transform", `translate(${margin.left},0)`); const axis = d3.axisTop(x) .ticks(width / 80) .tickSizeOuter(0) .tickSizeInner(-barSize * (n + y.padding())); g.call(axis) const axitxt=g.append('g').attr('class','textaxis') .attr("text-anchor", "end") .attr('fill','black') axitxt.append("text") .attr("y",0) .attr("x", width) .attr("font", "18px") .attr('fill','black') .attr('font-weight','bold') // .attr("dx","-1em") // .attr("dy", "1em") .text("Increase"); return (_, transition) => { g.transition(transition).call(axis); // g_y.transition(transition).call(axis_y); // g.select(".tick:first-of-type text").remove(); g.selectAll(".tick line").attr("stroke", "none"); // :not(:first-of-type) g.select(".domain").remove(); }; }38:[{"id":"39dc9ce5928ad1738ca9fd33f0b9932999b1486a997e3f2693bdc805f64b03ce9edf56685837e961781e126f4b3895bf1647bd3888bf53b69aaa4af25ac308cb","href":"https://static.observableusercontent.com/files/39dc9ce5928ad1738ca9fd33f0b9932999b1486a997e3f2693bdc805f64b03ce9edf56685837e961781e126f4b3895bf1647bd3888bf53b69aaa4af25ac308cb","name":"untitled.json","type":"application/json","lastModified":1612240324330.693,"size":48763}] 31:{"id":"28ba0871d7db707e","slug":"bar-data","title":"Bar data","thumbnail":"7381bab60c45515ea7def4e9361b3f7592a6f01acecb9cbe878e1f7202ad1be0","access_level":"public","create_time":"$D2021-01-29T05:43:26.054Z","update_time":"$D2021-02-12T20:09:03.423Z","view_time":null,"first_public_time":"$D2021-02-07T02:46:05.408Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":413,"publish_version":413,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null}],"members":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bar data","cells":[{"id":0,"value":"md`# Bar data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"viewof n_string = select({\n title: \"Show top\",\n description: \"Select Number of bars to show\",\n options: [parseInt(10),20,50,100,500,1000],\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"n=parseInt(n_string)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"duration=1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"formatDate = d3.utcFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof keyframe = Scrubber(timef, {\n format: (date) => date,\n delay: duration,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"keyframe","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3=require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data_load = d3.csv('https://ann-cors.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vSSbzPs4_34pfTJmr41be7q2dZIZb5MJyfqN3AdwYIdP78stoFhnn1EP0KgrtWPVwnFnyaVcLA1pIM9/pub?gid=2131265611&single=true&output=csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"data={return data_load.map(obj => {\n let rObj = {}\n rObj.value = (obj.value_fill=='-50')? 0 :(+obj.value_fill)\n rObj.Ticker=obj.Ticker\n rObj.date=obj.date\n rObj['Model Type']=obj['Model Type']\n return rObj\n})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"names = new Set(data.map(d => d.Ticker))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"timeparser = d3.timeParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"datevalues = Array.from(d3.rollup(data, ([d]) =>d.value, d => timeparser(d.date), d => d.Ticker))\n .map(([date, data]) => [date, data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"data_p2=d3.pairs(datevalues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"data_p2[360]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"cal=(key)=>{\n let ka, a, kb, b;\n let t,data_between,date_between;\n for ([[ka, a], [kb, b]] of data_p2){\n if ((key.getTime() >ka.getTime() )&(key.getTime() ((a.get(name)|| 0) * (1 - t) + (b.get(name) || 0) * t))\n date_between = new Date(ka * (1 - t) + kb * t)\n console.log(ka,kb,t,a,b,data_between,date_between)\n return [date_between,data_between]\n }\n if (ka.getTime()===key.getTime()){\n return [ka,rank(name => a.get(name))]\n }\n else if (kb.getTime()===key.getTime()){\n return [kb,rank(name => b.get(name))]\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"pre_key=timef[!timef.indexOf(keyframe)-1<0?timef.indexOf(keyframe)-1:0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"next_key=timef[timef.indexOf(keyframe)<(timef.length-1)?timef.indexOf(keyframe)+1:(timef.length-1)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"current_data=[cal(pre_key),cal(keyframe),cal(next_key)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"single_data={\n let new_Data=[];\n new_Data[0]=current_data[1][0]\n new_Data[1]=current_data[1][1].map(obj=>{\n let newobj={}\n newobj.name=obj.name\n newobj.value2=obj.value2\n newobj.cur_rank=obj.rank\n newobj.cur_value=obj.value\n newobj.pre_value=current_data[0][1].filter(d=>d.name==obj.name)[0].value\n newobj.pre_rank=current_data[0][1].filter(d=>d.name==obj.name)[0].rank\n newobj.next_value=current_data[2][1].filter(d=>d.name==obj.name)[0].value\n newobj.next_rank=current_data[2][1].filter(d=>d.name==obj.name)[0].rank\n return newobj\n })\n return new_Data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"nameframes = d3.groups(current_data.flatMap(([,data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.map(d=>d.value2 = (d.value==0?-50:d.value))\n data.sort((a, b) => d3.descending(a.value2, b.value2));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(i,n);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"keyframes2=FileAttachment(\"untitled.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"timef=keyframes2.map(d=>new Date(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"y2 = y.copy()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .range([margin.top, margin.top +600])\n .padding(0.3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"color_scale = d3.scaleOrdinal().domain(['Quant','Quark','Quint']).range(['green','blue','orange'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"margin = ({top: 35, right: 45, bottom: 6, left: 45})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"color = {\n const scale = d3.scaleOrdinal().domain(['Quant','Quark','Quint']).range(['green','blue','orange']);\n const categoryByName = new Map(data.map(d => [d.Ticker, d['Model Type']])) \n return d => scale(categoryByName.get(d.name))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n \n return function(t) {\n if (i(t)>10){this.textContent = d3.format(\".0%\")(i(t));}\n else if( i(t)>1){this.textContent = d3.format(\".1%\")(i(t));}\n else {this.textContent = formatNumber(i(t));}\n \n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .attr('class','ticker')\n .attr(\"font-size\", 48)\n // .attr(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", height-barSize-margin.bottom)\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframe));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"formatNumber = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"height = margin.top + 600 + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"barSize = 48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"update = chart.update(single_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"