2e:null 2f:["$","title",null,{"children":"Kickstarter Time Series Analysis (Part 1) | Jianan Li | Observable"}] 34:T622,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append('g') .attr('class', 'y-axis') .interrupt() .transition(t) .attr("transform", `translate(${ margin.left },0)`) .call(yAxis); svg.append('g') .attr('class', 'x-axis-label') .attr("transform", `translate(${ width - margin.right },${ height - 10 })`) .append('text') .attr("text-anchor", "end") svg.append('g') .attr('class', 'y-axis-label') .attr("transform", `rotate(-90) translate(-5,30)`) .append('text') .attr("text-anchor", "end") .text('Project Funding Goal (USD)'); svg.append('g') .attr('class', 'x-axis') .attr("transform", `translate(0,${ height - margin.bottom })`) .call(xAxis) .selectAll('text') .attr("transform", "translate(0,20)") svg.select(".x-axis").selectAll(".tick").selectAll("text") .attr("fill","hsl(0, 0%, 50%)") .style("font-size","1rem") svg.select(".y-axis").selectAll(".tick").selectAll("text") .attr("fill","hsl(0, 0%, 50%)") .style("font-size","0.8rem") svg.select(".y-axis-label").select("text") .attr("fill","hsl(0, 0%, 30%)") .style("font-size","1.2rem") let selection = svg.append('g').attr('class', 'boxplots').selectAll('.boxplot').data(data); selection.exit().remove(); selection.call(boxplot); selection.enter() .append("g") .attr("class", "boxplot") .attr("transform", (d) => `translate(${ x(d.group) }, 0)`) .attr("data-season", (d) => d.group) .call(boxplot); return svg.node(); }35:T7bb,boxplot = (g) => { g.append("line") .attr("class", "guide") .attr("x1", bandwidth / 2) .attr("y1", (d) => y(d.min)) .attr("x2", bandwidth / 2) .attr("y2", (d) => y(d.max)) .attr("stroke", "steelblue"); g.append("line") .attr("class", "whisker") .attr("x1", bandwidth / 2) .attr("y1", (d) => y(d.range[1])) .attr("x2", bandwidth / 2) .attr("y2", (d) => y(d.range[0])) .attr("stroke", "green"); g.append("line") .attr("class", "range-bot") .attr("x1", 0) .attr("y1", (d) => y(d.range[0])) .attr("x2", bandwidth) .attr("y2", (d) => y(d.range[0])) .attr("stroke", "steelblue"); g.append("line") .attr("class", "range-bot") .attr("x1", 0) .attr("y1", (d) => y(d.range[1])) .attr("x2", bandwidth) .attr("y2", (d) => y(d.range[1])) .attr("stroke", "steelblue"); g.append("path") .attr("class", "quartile") .attr("d", (d) => `M0,${ y(d.quartiles[2]) }h${ bandwidth }V${ y(d.quartiles[0]) }H0Z`) .attr("data-tooltip", (d) => quartileTooltip(d)) .attr("data-pid", (d) => d.pid) .on("mouseover", onMouseOverQuartile) .on("mousemove", onMouseMoveQuartile) .on("mouseout", onMouseOutQuartile); g.append("line") .attr("class", "median") .attr("x1", 0) .attr("y1", (d) => y(d.quartiles[1])) .attr("x2", bandwidth) .attr("y2", (d) => y(d.quartiles[1])); g.selectAll('.outlier') .data(d => d.outliers) .enter() .append('circle') .attr('class', 'outlier') .attr('r', 3) .attr('cx', (d, i) => { // alternate the x position of each // outlier so they overlap less return (bandwidth/2) + offsets[i%6]; }) .attr('cy', (d) => y(d['usd_goal_real'])) .attr("data-tooltip", (d) => title(d)) .attr("data-pid", (d) => d['ID']) .on("mouseover", onMouseOverOutlier) .on("mousemove", onMouseMoveOutlier) .on("mouseout", onMouseOutOutlier); }36:T5cf,styles = html` `37:[] 32:{"id":"488424c7dba81b66","slug":"kickstarter-time-series-analysis-part-1","title":"Kickstarter Time Series Analysis (Part 1) ","thumbnail":"d74ac73a955b48a04a42d3882fad39fcadef29e39071204b4363abca45109f9c","access_level":"public","create_time":"$D2019-03-17T21:58:40.571Z","update_time":"$D2019-04-30T01:25:02.549Z","view_time":null,"first_public_time":"$D2019-03-18T02:19:02.899Z","fork":false,"stars":1,"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":381,"publish_version":381,"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":0,"collection":null,"type":"notebook","body":{"title":"Kickstarter Time Series Analysis (Part 1) ","cells":[{"id":0,"value":"md`# Kickstarter Time Series Analysis (Part 1)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`[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":204,"value":"md `### The Ambitious Project Creators
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md `How has the distribution of project funding goal changed since the beginning of Kickstarter?

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md `Note: it takes a few seconds for the graph to load both upon initial page load and when switching between the two view options due to downloading and rendering the large amount of data (~372,000 entries).

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof yAxisZoom = radio({\n title: 'I want to ...',\n description: '',\n options: [\n { label: 'get a sense of the distribution of the majority of Kickstarter projects', value: \"0\" },\n { label: 'see the most ambitious Kickstarter projects ever launched (for shits and giggles)', value: \"1\" },\n ],\n value: \"0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"data = (await fetch(`https://raw.githubusercontent.com/Jianan-Li/Kickstarter-Time-Series-Analysis/master/df_1.json`)).json().then((json) => json.map(histogram))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"offsets = [-15,-9,-3,3,9,15]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"function onMouseOutQuartile (d) {\n tooltip.text(\"\");\n // d3.selectAll(`circle.outlier[data-pid=\"${ d.pid }\"]`).classed('active', false);\n return tooltip.style(\"visibility\", \"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"function onMouseMoveQuartile (d) {\n return tooltip.style(\"top\", (d3.event.pageY+20)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"function onMouseOverQuartile (d) {\n tooltip.text(this.dataset.tooltip);\n // d3.selectAll(`circle.outlier[data-pid=\"${ d.pid }\"]`).classed('active', true);\n return tooltip.style(\"visibility\", \"visible\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function onMouseOutOutlier (d) {\n tooltip.text(\"\");\n d3.selectAll(`circle.outlier[data-pid=\"${ d['ID'] }\"]`).classed('active', false);\n return tooltip.style(\"visibility\", \"hidden\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function onMouseMoveOutlier (d) {\n return tooltip.style(\"top\", (d3.event.pageY+20)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function onMouseOverOutlier (d) {\n tooltip.text(this.dataset.tooltip);\n d3.selectAll(`circle.outlier[data-pid=\"${ d['ID'] }\"]`).classed('active', true);\n return tooltip.style(\"visibility\", \"visible\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .text(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"bandwidth = x.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"t = d3.transition().duration(250)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"x = d3.scaleBand()\n .range([margin.left, width - margin.right])\n .padding(0.3)\n .domain(data.map((s) => s.group))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"y = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain([0, (yAxisZoom === '0' ? 50000 : d3.max(data, (d) => d.max))]).nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"xAxis = d3.axisBottom(x).tickSize(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"yAxis = d3.axisLeft(y).tickSize(-width+margin.left+margin.right).tickFormat((d) => \"$\" + d3.format(\",\")(d) );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"quartileTooltip = (d) => \n`Max: $${ d3.format(\",.0f\")(d.range[1])}\nQ3: $${ d3.format(\",.0f\")(d.quartiles[2]) }\nMedian: $${ d3.format(\",.0f\")(d.quartiles[1]) }\nQ1: $${ d3.format(\",.0f\")(d.quartiles[0]) }\nMin: $${ d3.format(\",.0f\")(d.range[0]) }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"title = (d) => \n`${ d.name }\n${ d.main_category } / ${ d.category }\n${ (d.currency==='USD') ? 'US$ '+numberWithCommas(d.goal) : d.currency + ' ' + numberWithCommas(d.goal) + ' (US$ '+numberWithCommas(d['usd_goal_real'])+')' }\nLaunched on ${new Date(d.launched).getMonth()+'/'+new Date(d.launched).getDate()+'/'+new Date(d.launched).getFullYear()}\n${ capitalize(d.state) }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"capitalize = (s) => {\n if (typeof s !== 'string') return ''\n return s.charAt(0).toUpperCase() + s.slice(1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// this function maps each season \n// to individual box & whisker plots\nfunction histogram (year) {\n \n // sort players by points asc\n let projects = year.projects.sort((a,b) => a['usd_goal_real'] - b['usd_goal_real']);\n\n // map points to an array\n let stat = projects.map((sk) => sk['usd_goal_real']);\n\n // get the min and max\n let min = stat[0];\n let max = stat[stat.length-1];\n \n // quantiles\n let q1 = d3.quantile(stat, 0.25);\n let q2 = d3.quantile(stat, 0.50);\n let q3 = d3.quantile(stat, 0.75);\n\n // interquartile range\n let iqr = q3 - q1; \n \n // range\n let r0 = Math.max(min, q1 - iqr * 1.50);\n let r1 = Math.min(max, q3 + iqr * 1.50);\n \n let group = {\n group: year.launch_year,\n projects,\n min,\n max,\n quartiles: [q1,q2,q3],\n range: [r0,r1],\n iqr,\n outliers: projects.filter(sk => sk['usd_goal_real'] > r1)\n }\n \n return group;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = width * 0.55","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"margin = ({ top:20, right:80, bottom:100, left:120 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"graphWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"graphHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"function numberWithCommas(x) {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import {slider, radio, button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"