2d:null 2e:["$","title",null,{"children":"Bar Chart Race | anndawn | Observable"}] 33:T553,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr('font-family','Cambria, Georgia, serif') .attr("preserveAspectRatio", "xMinYMin meet"); const updateBars = bars(svg); const updateAxis = axis(svg); const updateLabels = labels3(svg); const updateTicker = ticker(svg); invalidation.then(() => svg.interrupt()); yield Object.assign(svg.node(), { update(keyframe) { const transition = svg.transition() .duration(duration) .ease(d3.easeLinear); // Extract the top bar’s value. const data_keyframe=keyframe[1].slice(0,n) const min_x=d3.min(data_keyframe.map(d=>d.value))<0?Math.ceil(d3.min(data_keyframe.map(d=>d.value))/(-0.1))*(-0.1):0 const max_x = Math.ceil (keyframe[1][0].value/0.1)*0.1 x.domain([min_x,max_x]); const key_length= data_keyframe.filter(d=>d.value2!=-50).length 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(keyframe, transition); updateBars(keyframe, transition); updateLabels(keyframe, transition); updateTicker(keyframe, transition); } }) }34:Td9a,linechart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, line_height]) .attr('font-family','Cambria, Georgia, serif') .attr("preserveAspectRatio", "xMinYMin meet"); const x = d3.scaleUtc() .domain(d3.extent(line_data.map(d=>d.date))) .range([margin2.left, width - margin2.right]) let y = d3.scaleLinear() .domain([d3.min(line_data, d =>d.value), d3.max(line_data, d =>d.value)]).nice() .range([line_height - margin2.bottom, margin2.top]) const xAxis = (g, scale = x) => g .attr("transform", `translate(0,${line_height - margin2.bottom})`) .call(d3.axisBottom(x).ticks(d3.utcWeek.every(3)).tickSizeOuter(0)) .call(g=>g.selectAll('text').attr('font-family','Cambria, Georgia, serif')) const yAxis = (g, scale = y) => g .attr("transform", `translate(${margin2.left},0)`) .call(d3.axisLeft(y).ticks(10) .tickFormat(x=>d3.format('.0%')(x))) .call(g=>g.selectAll('text').attr('font-family','Cambria, Georgia, serif')) .call(g => g.select(".domain").remove()) svg.append('text').attr("x", margin2.left+4) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr('font-family','Cambria, Georgia, serif') .attr('y',margin2.top) .attr('dy',2) .attr('font-size','0.6rem') .text('Maximum Gain (%)') const line = d3.line() .x(d => x(d.date)) .y(d => y(d.value)); // const zy = y.copy(); // x, but with a new domain. const gx = svg.append("g").call(xAxis, x); const gy = svg.append("g").call(yAxis, y); const ticker= svg.append('g').attr('class','ticker') const counter=ticker.append('text') .text('xxx') .attr('text-anchor','end') .attr("x", width - 12) .attr("y", line_height-margin2.bottom) .attr('dy','-0.35em') .attr('font-size','2.5rem') // .attr("dy", "0.32em") const color=d3.scaleOrdinal(['Quant','Quark','Quint'],['#f9c804','#dd4f24','#0085ff']) const lines= svg.append('g').attr('class','line') const path = lines.selectAll("path") .data(line_g) .join('path', exit=>exit.remove()) .attr("fill", "none") .attr('class',d=>d[0].Model) .attr("stroke", '#00cd37') .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", d=>line(d)); return Object.assign(svg.node(), { update(keyframe) { const t = svg.transition().duration(duration); let index=keyframes.indexOf(keyframe) const data = line_g_k.map(d=>d.filter((d,i)=>!(i>index))) let current_value=data[0][data[0].length-1].value y.domain([d3.min(data[0], d =>d.value), Math.ceil(d3.max(data[0], d =>d.value)/0.1)*0.1>1? Math.ceil(d3.max(data[0], d =>d.value)/0.1)*0.1:1]).nice() gy.transition(t).call(yAxis, y); ticker.select('text').transition(t) .text(d=>d3.format('.1%')(current_value)) .attr('fill','#e3e3e3') path.data(data).transition(t).attr("d", d=>line(d)); } } ); }35:T6d5,viewof keyframes = { let arc = d3.arc() .innerRadius(height/6) .outerRadius((height/4)) .startAngle(([startAngle, endAngle]) => startAngle) .endAngle(([startAngle, endAngle]) => endAngle) let startAngle=0 let endAngle=0 const div = html`

`; (async () => { const keyframes = []; let ka, a, kb, b; for (let x in d3.pairs(datevalues)) { [[ka, a], [kb, b]] = d3.pairs(datevalues)[x] for (let i = 0; i < k; ++i) { const t = i / k; keyframes.push([ new Date(ka * (1 - t) + kb * t), rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t) ]); } endAngle = (x-10) / (d3.pairs(datevalues).length) * 2 * Math.PI let range= [0,endAngle] d3.select('.oo').attr('d',arc(range)) d3.select('.oo').attr('stroke','none') await new Promise(requestAnimationFrame); } keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]); div.value=keyframes div.dispatchEvent(new CustomEvent("input")); d3.select('.oo').attr('d',arc([0, 2 * Math.PI])) await new Promise(requestAnimationFrame) d3.select('.bg').remove() // setTimeout(function(){ d3.select('.bg').remove() }, 100); })(); return div; }36:T4a5,function bars(svg) { let bar = svg.append("g") // .attr("fill-opacity", 0.9) .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 => { return (d.value)<0? x(d.value): x(0)}) .attr("y", d => y((prev.get(d) || d).rank>n?n:(prev.get(d) || d).rank)) .attr("width", d => Math.abs(x((prev.get(d) || d).value) - x(0))), update => update, exit => exit.transition(transition).remove() .attr("y", d => y((next.get(d) || d).rank>n?n:(next.get(d) || d).rank)) .attr("height", y.bandwidth()) .attr("width", d => Math.abs( x((next.get(d) || d).value) - x(0)))) .call(bar => bar.transition(transition) .attr("x", d => { return (d.value)<0? x(d.value): x(0)}) .attr("y", d => y(d.rank>n?n:d.rank)) .attr("height", y.bandwidth()) .attr("width", d => Math.abs( x(d.value) - x(0)))); }37:Taaa,function labels3(svg) { let label = svg.append("g") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n).filter(d=>d.value2!=-50), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(0,${y((prev.get(d) || d).rank>n?n:(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>n?n:(next.get(d) || d).rank)})`) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) .attr("y", y.bandwidth() / 2) .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("x", x(0)) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(0,${y(d.rank>n?n:d.rank)})`) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .attr("x", x(0)) .attr("y", y.bandwidth() / 2) .call(g => g.select("tspan") .attr("x", x(0)) .attr("font-size", y.bandwidth()>14? 14: y.bandwidth()) .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)) ) ) }38:T5f0,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())) .tickFormat(x => d3.format('.0%')(x)) const axitxt=g.append('g').attr('class','textaxis') .attr("text-anchor", "end") .attr('fill','black') axitxt.append("text") .attr("y",0) .attr("x", margin.left) .attr("font", "18px") .attr('fill','black') .attr('font-weight','bold') .attr('font-family','Cambria, Georgia, serif') .attr("dx","-0.7rem") .attr("dy", "-0.2rem") .text("change"); return (_, transition) => { g.transition(transition).call(axis); // g_y.transition(transition).call(axis_y); g.selectAll(".tick:nth-of-type(odd) line").attr("stroke", "white"); g.selectAll(".tick:nth-of-type(even) line").attr("stroke", "none"); // // not(:first-of-type) // g.select(".tick:first-of-type text").remove(); // g.selectAll(".tick line").attr("stroke", "none"); // :not(:first-of-type) g.select(".domain").remove(); }; }39:[{"id":"b9a0afc66b6dffe358183aada1992c2e28f0f15a272a0cfc38129a446d98413bc035100631244597e953489a40bd56518e05dd77327c3c6df8f4efa6e3cd9857","href":"https://static.observableusercontent.com/files/b9a0afc66b6dffe358183aada1992c2e28f0f15a272a0cfc38129a446d98413bc035100631244597e953489a40bd56518e05dd77327c3c6df8f4efa6e3cd9857","name":"line_final@2.csv","type":"text/csv","lastModified":1613162013224.355,"size":4962},{"id":"b78949c2eadb3a57dc14735893ca3a8e18cbc75e4c2e9616348b0c701ce7acef26a8912dab5523817857e780e46cdf2bc5b1bc2f01cf9c7a5f46e588e25489be","href":"https://static.observableusercontent.com/files/b78949c2eadb3a57dc14735893ca3a8e18cbc75e4c2e9616348b0c701ce7acef26a8912dab5523817857e780e46cdf2bc5b1bc2f01cf9c7a5f46e588e25489be","name":"data_final.csv","type":"text/csv","lastModified":1613701638277.911,"size":13985560}] 31:{"id":"c88fd8f2d21bc219","slug":"bar-chart-race","title":"Bar Chart Race","thumbnail":"334cf7f2f190e71da154c5ab5f876a88c598557d3f8ac7600efc70f16cbb326c","access_level":"public","create_time":"$D2021-01-22T01:35:27.266Z","update_time":"$D2021-02-25T02:02:13.504Z","view_time":null,"first_public_time":"$D2021-01-22T01:36:17.209Z","has_unpublished_edits":null,"fork":{"id":"3ff9fa2c6593d814","slug":"bar-chart-race","title":"Bar Chart Race","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":4117,"publish_version":4117,"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":1,"collection":null,"type":"notebook","body":{"title":"Bar Chart Race","cells":[{"id":239,"value":"md`# Bar Chart Race\n\nThis chart animates the value (in $M) of the top global brands from 2000 to 2019. Color indicates sector. See [the explainer](/d/e9e3929cf7c50b45) for more. Data: [Interbrand](https://www.interbrand.com/best-brands/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3614,"value":"data_load = FileAttachment(\"data_final.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"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']=obj['query']\n return rObj\n})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3359,"value":"line_int = FileAttachment(\"line_final@2.csv\").csv({typed: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4028,"value":"line_data={return line_int.map(obj => {\n let timeparser2= d3.timeParse(\"%Y-%m-%d\")\n let rObj = {}\n rObj.value = +obj.value\n rObj.date=timeparser2(obj.date)\n return rObj\n})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3368,"value":"line_g = d3.groups(line_data,d=>d.Model).map(d=>d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3384,"value":"date_range=line_g_k[0].map(d=>d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3767,"value":"Title=md`### 2020 Quiver Stock Selections`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3884,"value":"subtitle=md`##### Maximum Gains`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3554,"value":"n=parseInt(n_string)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"viewof n_string = select({\n // title: \"Show top\",\n description: \"Select Top 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":3149,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3156,"value":"update = chart.update(keyframe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"viewof keyframe_date = Scrubber(timef, {\n format: (date) => formatDate(date),\n delay: duration,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3654,"value":"keyframe=keyframes.filter(d=>d[0].getTime()==keyframe_date.getTime())[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3268,"value":"import {swatches} from \"@d3/color-legend\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3270,"value":"legend=swatches({\n color: d3.scaleOrdinal(['Alpha','Beta','Delta'],['#367bea','#d83d3d','#e9e34d'])\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3158,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3386,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3424,"value":"current_date= new Date(keyframe[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3416,"value":"line_g_k={\n const line_g_k=[]\n for (const line_d of line_g){\n const data0=d3.groups(line_d,d=>d.date)\n line_g_k.push(keyframes_line(data0,k))\n }\n return line_g_k\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3388,"value":"update2 = linechart2.update(keyframe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":" viewof duration= slider({\n min: 100, \n max: 1000, \n step: 100, \n format: v => `${v/1000} second`,\n description: \"Set your update transition time in seconds\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3619,"value":"timeparser = d3.timeParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"names = new Set(data.map(d => d.Ticker))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => timeparser(d.date), d => d.Ticker))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"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 const len=data.filter(d=>d.value2!=-50).length\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,len);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"// k = n>100?1:Math.ceil((26-n/20)/4)\nk = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4065,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3800,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3813,"value":"keyframes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3862,"value":"timef=keyframes.map(d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"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":734,"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":1530,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3622,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"formatNumber = d3.format(\".2%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"formatNumber2= d3.format(\".1%\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3538,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .attr('class','ticker')\n .attr(\"font-size\", '5rem')\n // .attr(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"fill\",\"#e3e3e3\")\n .attr(\"x\", width - 6)\n .attr(\"y\", height-barSize-margin.bottom)\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\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":1287,"value":"formatDate = d3.utcFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3278,"value":"color_scale = d3.scaleOrdinal(['Quant','Quark','Quint'],['#f9c804','#dd4f24','#0085ff'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"color = {\n const scale = d3.scaleOrdinal(['Quant','Quark','Quint'],['#f9c804','#dd4f24','#0085ff']);\n const categoryByName = new Map(data.map(d => [d.Ticker, d.Model])) \n return d => scale(categoryByName.get(d.name))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .range([margin.top, margin.top +height])\n .padding(0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3232,"value":"y2 = d3.scaleBand()\n .domain(d3.range(n + 1))\n .range([margin.top, margin.top +height])\n .padding(0.3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"barSize = 38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"margin = ({top: height/35, right:Math.max(width/40,25), bottom: height/40, left:Math.max(width/20,50)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3438,"value":"margin2 = ({top: height/35, right:Math.max(width/40,25), bottom:height/20, left: Math.max(width/20,50)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4092,"value":"height= width/2.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3442,"value":"line_height= width/6.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3051,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3478,"value":"keyframes_line= (data_,k) => {\n const keyframes = [];\n\n let ka, a, kb, b;\n for ([[ka, [a]], [kb, [b]]] of d3.pairs(data_)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n let obj={}\n obj.date=new Date(ka * (1 - t) + kb * t)\n obj.value=a.value*(1-t)+b.value*t\n obj.Model=data_[0][1][0].Model\n console.log(new Date(ka * (1 - t) + kb * t),obj)\n keyframes.push(obj);\n }\n }\n keyframes.push(data_[data_.length-1][1][0]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3498,"value":"yx = d3.scaleBand()\n .domain(d3.range(500))\n .range([35, 935])\n .paddingInner(0.3)\n .paddingOuter(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3502,"value":"import {button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3549,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"