2e:null 2f:["$","title",null,{"children":"Kickstarter Time Series Analysis (Part 3) | Jianan Li | Observable"}] 34:T1869,chart = { restartButton const svg = d3.select(DOM.svg(width, height)); let barPadding = (height-(margin.bottom+margin.top))/(top_n*5); let title = svg.append('text') .attr("class", "title") .attr("y", 24) .html('Kickstarter Total Funding by Category'); let subTitle = svg.append('text') .attr("class", "subTitle") .attr("y", 55) let caption = svg.append('text') .attr("class", "caption") .attr("x", width) .attr("y", height-5) .style("text-anchor", "end") let year = 2009; brandData.forEach(d => { d.value = +d.value, d.lastValue = +d.lastValue, d.value = isNaN(d.value) ? 0 : d.value, d.year = +d.year, d.colour = color(d.name) }); let yearSlice = brandData.filter(d => d.year == year && !isNaN(d.value)) .sort((a,b) => b.value - a.value) .slice(0,top_n); yearSlice.forEach((d,i) => d.rank = i); let x = d3.scaleLinear() .domain([0, d3.max(yearSlice, d => d.value)]) .range([margin.left, width-margin.right-65-50]); let y = d3.scaleLinear() .domain([top_n, 0]) .range([height-margin.bottom, margin.top]); let xAxis = d3.axisTop() .scale(x) .ticks(width > 500 ? 5:2) .tickSize(-(height-margin.top-margin.bottom)) .tickFormat((d) => "$" + d3.format(",")(d) ); svg.append('g') .attr("class", "axis xAxis") .attr("transform", `translate(0, ${margin.top})`) .call(xAxis) .selectAll('.tick line') .classed('origin', d => d == 0); svg.selectAll('rect.bar') .data(yearSlice, d => d.name) .enter() .append('rect') .attr("class", "bar") .attr("x", x(0)+1) .attr("width", d => x(d.value)-x(0)-1) .attr("y", d => y(d.rank)+5) .attr("height", y(1)-y(0)-barPadding) .style("fill", d => d.colour); svg.selectAll('text.label') .data(yearSlice, d => d.name) .enter() .append('text') .attr("class", "label") .attr("alignment-baseline", "baseline") .attr("x", d => x(d.value)-8+13) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1-5) .style("text-anchor", "start") .style("font-size", height/36.56) .style("fill", "#000") //d => lightOrDark(color(d.name)) === "dark" ? "#fff" : "#000" .html(d => d.name); svg.selectAll('text.valueLabel') .data(yearSlice, d => d.name) .enter() .append('text') .attr("class", "valueLabel") .attr("alignment-baseline", "baseline") .attr("x", d => x(d.value)+5) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1+height/72) .style("font-size", height/60.9375) .text(d => "$" + d3.format(",.0f")(d.lastValue) ); let yearText = svg.append('text') .attr("class", "yearText") .attr("x", width-margin.right) .attr("y", height-25) .style("text-anchor", "end") .html(~~year) .call(halo, 10); let ticker = d3.interval(e => { yearSlice = brandData.filter(d => d.year == year && !isNaN(d.value)) .sort((a,b) => b.value - a.value) .slice(0,top_n); yearSlice.forEach((d,i) => d.rank = i); x.domain([0, d3.max(yearSlice, d => d.value)]); svg.select('.xAxis') .transition() .duration(tickDuration) .ease(d3.easeLinear) .call(xAxis); let bars = svg.selectAll('.bar').data(yearSlice, d => d.name); bars .enter() .append('rect') .attr("class", d => `bar ${d.name.replace(/\s/g,'_')}`) .attr("x", x(0)+1) .attr("width", d => x(d.value)-x(0)-1) .attr("y", d => y(top_n+1)+5) .attr("height", y(1)-y(0)-barPadding) .style("fill", d => d.colour) .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("y", d => y(d.rank)+5) bars .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("width", d => x(d.value)-x(0)-1) .attr("y", d => y(d.rank)+5) bars .exit() .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("width", d => x(d.value)-x(0)-1) .attr("y", d => y(top_n+1)+5) .remove(); let labels = svg.selectAll('.label').data(yearSlice, d => d.name); labels .enter() .append('text') .attr("class", "label") .attr("x", d => x(d.value)-8+13) .attr("y", d => y(top_n+1)+5+((y(1)-y(0))/2)-5) .style("text-anchor", "start") .html(d => d.name) .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1-5) labels .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value)-8+13) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1-5) labels .exit() .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value)-8+13) .attr("y", d => y(top_n+1)+5-5) .remove(); let valueLabels = svg.selectAll('.valueLabel').data(yearSlice, d => d.name); valueLabels .enter() .append('text') .attr("class", "valueLabel") .attr("x", d => x(d.value)+5) .attr("y", d => y(top_n+1)+5+height/72) .text(d => "$"+d3.format(',.0f')(d.lastValue)) .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1+height/72) valueLabels .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value)+5) .attr("y", d => y(d.rank)+5+((y(1)-y(0))/2)+1+height/72) .tween("text", function(d) { let i = d3.interpolateRound(d.lastValue, d.value); return function(t) { this.textContent = "$"+ d3.format(',.0f')(i(t)); }; }); valueLabels .exit() .transition() .duration(tickDuration) .ease(d3.easeLinear) .attr("x", d => x(d.value)+5) .attr("y", d => y(top_n+1)+5+height/72) .remove(); yearText.html(~~year); if(year == 2017) ticker.stop(); year = d3.format('.1f')((+year) + 1); },tickDuration); return svg.node(); }35:T1b3c,csvTotalFunding = `index,launch_year,main_category,usd_pledged_real,rank,last_usd_pledged_real 0,2009,Art,349826.94,3,349826.94 1,2009,Comics,79747.33,7,79747.33 2,2009,Crafts,13089.0,15,13089.0 3,2009,Dance,21561.37,13,21561.37 4,2009,Design,35719.22,12,35719.22 5,2009,Fashion,13543.99,14,13543.99 6,2009,Film & Video,664185.7999999999,2,664185.7999999999 7,2009,Food,83853.05,5,83853.05 8,2009,Games,70035.74,9,70035.74 9,2009,Journalism,53622.12,11,53622.12 10,2009,Music,700861.1699999998,1,700861.1699999998 11,2009,Photography,80797.57,6,80797.57 12,2009,Publishing,220850.49,4,220850.49 13,2009,Technology,75402.07999999999,8,75402.07999999999 14,2009,Theater,66572.17,10,66572.17 15,2010,Art,1345933.4899999998,4,349826.94 16,2010,Comics,460689.55999999994,11,79747.33 17,2010,Crafts,69784.19,15,13089.0 18,2010,Dance,326227.15,12,21561.37 19,2010,Design,1672274.99,3,35719.22 20,2010,Fashion,197121.92,14,13543.99 21,2010,Film & Video,10243987.820000002,1,664185.7999999999 22,2010,Food,788757.8799999999,8,83853.05 23,2010,Games,461431.27,10,70035.74 24,2010,Journalism,276340.14,13,53622.12 25,2010,Music,6431651.690000001,2,700861.1699999998 26,2010,Photography,841419.9099999999,7,80797.57 27,2010,Publishing,885000.2299999997,6,220850.49 28,2010,Technology,747739.7799999999,9,75402.07999999999 29,2010,Theater,1314750.85,5,66572.17 30,2011,Art,5458378.799999993,5,1345933.4899999998 31,2011,Comics,1532276.45,11,460689.55999999994 32,2011,Crafts,118592.23999999999,15,69784.19 33,2011,Dance,1020860.9600000002,13,326227.15 34,2011,Design,12341673.19999999,3,1672274.99 35,2011,Fashion,1195282.93,12,197121.92 36,2011,Film & Video,28755771.939999994,1,10243987.820000002 37,2011,Food,2594624.5499999993,9,788757.8799999999 38,2011,Games,3821336.4599999995,8,461431.27 39,2011,Journalism,522554.63,14,276340.14 40,2011,Music,19447403.099999983,2,6431651.690000001 41,2011,Photography,1745278.5399999993,10,841419.9099999999 42,2011,Publishing,4244131.309999997,6,885000.2299999997 43,2011,Technology,5499397.469999998,4,747739.7799999999 44,2011,Theater,3901589.299999998,7,1314750.85 45,2012,Art,8650052.110000005,8,5458378.799999993 46,2012,Comics,8645455.939999998,9,1532276.45 47,2012,Crafts,312016.76999999996,15,118592.23999999999 48,2012,Dance,1664339.17,13,1020860.9600000002 49,2012,Design,43810178.76000005,3,12341673.19999999 50,2012,Fashion,5331568.159999998,11,1195282.93 51,2012,Film & Video,48150108.10999998,2,28755771.939999994 52,2012,Food,9204632.400000004,7,2594624.5499999993 53,2012,Games,82370836.58999997,1,3821336.4599999995 54,2012,Journalism,1116987.69,14,522554.63 55,2012,Music,31571720.93000001,4,19447403.099999983 56,2012,Photography,2675952.5,12,1745278.5399999993 57,2012,Publishing,12057768.429999994,6,4244131.309999997 58,2012,Technology,24745240.159999993,5,5499397.469999998 59,2012,Theater,6152967.689999998,10,3901589.299999998 60,2013,Art,11380514.58999999,10,8650052.110000005 61,2013,Comics,11641577.409999996,9,8645455.939999998 62,2013,Crafts,1414292.99,14,312016.76999999996 63,2013,Dance,2154871.170000001,13,1664339.17 64,2013,Design,61089640.93999998,4,43810178.76000005 65,2013,Fashion,17239841.179999996,7,5331568.159999998 66,2013,Film & Video,72428388.1499998,2,48150108.10999998 67,2013,Food,17213870.200000003,8,9204632.400000004 68,2013,Games,99073910.21000011,1,82370836.58999997 69,2013,Journalism,1083835.2699999998,15,1116987.69 70,2013,Music,30234284.32999999,5,31571720.93000001 71,2013,Photography,3743951.6900000004,12,2675952.5 72,2013,Publishing,18352704.220000003,6,12057768.429999994 73,2013,Technology,65048693.78999998,3,24745240.159999993 74,2013,Theater,7450357.5,11,6152967.689999998 75,2014,Art,12820139.93999999,9,11380514.58999999 76,2014,Comics,8813945.450000001,10,11641577.409999996 77,2014,Crafts,1735114.9999999998,14,1414292.99 78,2014,Dance,2489310.3900000006,13,2154871.170000001 79,2014,Design,86119277.68999991,2,61089640.93999998 80,2014,Fashion,19181094.800000004,7,17239841.179999996 81,2014,Film & Video,53203375.30000006,4,72428388.1499998 82,2014,Food,23122220.499999978,6,17213870.200000003 83,2014,Games,75857963.25000006,3,99073910.21000011 84,2014,Journalism,1595525.9700000004,15,1083835.2699999998 85,2014,Music,27074279.270000007,5,30234284.32999999 86,2014,Photography,5766409.119999995,12,3743951.6900000004 87,2014,Publishing,18406137.41999998,8,18352704.220000003 88,2014,Technology,103501215.51000005,1,65048693.78999998 89,2014,Theater,7035551.020000004,11,7450357.5 90,2015,Art,13456894.58,9,12820139.93999999 91,2015,Comics,12116763.659999993,10,8813945.450000001 92,2015,Crafts,2770603.8400000012,13,1735114.9999999998 93,2015,Dance,1596042.83,15,2489310.3900000006 94,2015,Design,146332287.50000003,1,86119277.68999991 95,2015,Fashion,25346756.19000001,5,19181094.800000004 96,2015,Film & Video,54221599.49999996,4,53203375.30000006 97,2015,Food,20882166.099999998,7,23122220.499999978 98,2015,Games,133281245.63999978,3,75857963.25000006 99,2015,Journalism,2414389.11,14,1595525.9700000004 100,2015,Music,22277349.439999945,6,27074279.270000007 101,2015,Photography,6342378.029999999,11,5766409.119999995 102,2015,Publishing,19474877.04999999,8,18406137.41999998 103,2015,Technology,140770491.14999992,2,103501215.51000005 104,2015,Theater,5606351.720000002,12,7035551.020000004 105,2016,Art,11923348.429999994,9,13456894.58 106,2016,Comics,11824587.700000001,10,12116763.659999993 107,2016,Crafts,3102777.060000001,13,2770603.8400000012 108,2016,Dance,1691505.7199999997,15,1596042.83 109,2016,Design,166070861.96999973,1,146332287.50000003 110,2016,Fashion,23140416.86000001,5,25346756.19000001 111,2016,Film & Video,34499381.74999996,4,54221599.49999996 112,2016,Food,16466345.620000005,8,20882166.099999998 113,2016,Games,136390248.88999978,2,133281245.63999978 114,2016,Journalism,1927518.9100000001,14,2414389.11 115,2016,Music,20653512.379999995,6,22277349.439999945 116,2016,Photography,6199452.279999994,11,6342378.029999999 117,2016,Publishing,20522360.580000002,7,19474877.04999999 118,2016,Technology,134264306.09,3,140770491.14999992 119,2016,Theater,4526706.3199999975,12,5606351.720000002 120,2017,Art,14861420.839999989,9,11923348.429999994 121,2017,Comics,11399983.589999996,10,11824587.700000001 122,2017,Crafts,2370537.8299999987,13,3102777.060000001 123,2017,Dance,1178890.93,15,1691505.7199999997 124,2017,Design,145674016.48999995,2,166070861.96999973 125,2017,Fashion,21817079.070000008,6,23140416.86000001 126,2017,Film & Video,27382016.390000008,4,34499381.74999996 127,2017,Food,15214570.98999999,8,16466345.620000005 128,2017,Games,147508548.7399998,1,136390248.88999978 129,2017,Journalism,1478315.8799999997,14,1927518.9100000001 130,2017,Music,18755110.939999994,7,20653512.379999995 131,2017,Photography,6023496.819999998,11,6199452.279999994 132,2017,Publishing,21910172.200000037,5,20522360.580000002 133,2017,Technology,121498736.30000003,3,134264306.09 134,2017,Theater,2973616.890000001,12,4526706.3199999975 `36:T47b,// https://awik.io/determine-color-bright-dark-using-javascript/ function lightOrDark(color) { // Variables for red, green, blue values var r, g, b, hsp; // Check the format of the color, HEX or RGB? if (color.match(/^rgb/)) { // If HEX --> store the red, green, blue values in separate variables color = color.match(/^rgba?$(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?$$/); r = color[1]; g = color[2]; b = color[3]; } else { // If RGB --> Convert it to HEX: http://gist.github.com/983661 color = +("0x" + color.slice(1).replace( color.length < 5 && /./g, '$&$&')); r = color >> 16; g = color >> 8 & 255; b = color & 255; } // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) ); // Using the HSP value, determine whether the color is light or dark // default: hsp>127.5 if (hsp>160) { return 'light'; } else { return 'dark'; } }37:T41e,html``38:[] 32:{"id":"b8deb9ac209883a0","slug":"bar-chart-race","title":"Kickstarter Time Series Analysis (Part 3) ","thumbnail":"283b9950b25e1437d55dba07a0d26a2729bcf18719a87cb217f8f86cb764916b","access_level":"public","create_time":"$D2019-03-19T13:35:48.860Z","update_time":"$D2019-04-30T01:39:42.357Z","view_time":null,"first_public_time":"$D2019-03-19T14:57:20.881Z","fork":{"id":"9efb7ba3d196a72e","slug":"bar-chart-race","title":"Bar chart race","owner":{"id":"c72427f1036f62b9","login":"johnburnmurdoch","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"881fc2b256e7c071","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":"starter_2024"},"version":690,"publish_version":690,"role":null,"authored":false,"authors":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null}],"members":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Kickstarter Time Series Analysis (Part 3) ","cells":[{"id":239,"value":"md`# Kickstarter Time Series Analysis (Part 3)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`[Part 1 →](/@jianan-li/kickstarter-time-series-analysis-part-1)
\n[Part 2 →](/@jianan-li/kickstarter-time-series-analysis-part-2)
\n[Colab Notebook →](https://colab.research.google.com/drive/1DAsNmW9fi0t26z0mkQDRTtl_SZNpwDNn)
\n[Data Source →](https://www.kaggle.com/kemical/kickstarter-projects)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"viewof restartButton = {\n const button = html``;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"$$(\"#restartButton\").wrap('

');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"categories = ['Art','Comics','Crafts','Dance','Design','Fashion','Film & Video','Food','Games','Journalism','Music','Photography','Publishing','Technology','Theater']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"color = d3.scaleOrdinal()\n .domain(categories)\n .range(d3.quantize(t => d3.interpolateSpectral(t * 1 + 0.0), categories.length))\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"tickDuration = 2000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"top_n = 15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"margin = ({\n top: 80,\n right: 0,\n bottom: 5,\n left: 0\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"height = width*0.55","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"brandData = d3.csvParse(csvTotalFunding, d => {\n return {\n year: new Date(d.launch_year, 1, 1, 0, 0, 0, 0).getFullYear(),\n name: d.main_category,\n value: +d.usd_pledged_real,\n lastValue: +d.last_usd_pledged_real,\n rank: `${d.rank}`,\n colour: `hsl(0,0.75,0.75)`\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"// brandData = d3.csv('https://gist.githubusercontent.com/johnburnmurdoch/2e5712cce1e2a9407bf081a952b85bac/raw/08cf82f5e03c619f7da2700d1777da0b5247df18/INTERBRAND_brand_values_2000_2018_decimalised.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"// This is a lightly modified version of Mike Bostock’s text halo function from @d3/connected-scatterplot\nhalo = function(text, strokeWidth) {\n text.select(function() { return this.parentNode.insertBefore(this.cloneNode(true), this); })\n .style(\"fill\", '#ffffff')\n .style(\"stroke\", '#ffffff')\n .style('stroke-width', strokeWidth)\n .style('stroke-linejoin', 'round')\n .style(\"opacity\", 1)\n .style(\"fill\", '#ffffff')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"// Use jQuery to select all element on the page and set font family\n$( \"*\" ).css( \"font-family\", \"-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"// Import jQuery for both selection and easy text fade in and fade out transitions\n$ = require(\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"import {button} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"