2d:null 2e:["$","title",null,{"children":"Unicorn Startup IPO Leader Board | Ray Shan | Observable"}] 33:T898,leaderboard = { const container = DOM.element('div'); container.classList.add("container"); const dateRangeText = updatedAt.toLocaleDateString(undefined, { timeZone: "UTC", month: 'short', day: 'numeric', year: 'numeric' }); // Date is today() in Google Sheet, D3 autotype assumes it's UTC, setting time zone to UTC to avoid conversion const dateRangeTextElement = html`Price return over IPO price, adjusted for S&P 500 performance. Current return as of ${dateRangeText}.`; dateRangeTextElement.classList.add("date-range"); container.appendChild(dateRangeTextElement); // const svg = d3.select(DOM.svg(width, height)); const svg = d3 .select(container) .append("svg") .style("width", width) .style("height", height); svg.append("rect").classed("background", true); // Put gridlines on the bottom svg.append("g").call(xAxis1); svg.append("g").call(xAxis2); // console.log(x(-0.01)) // 1 year bar chart (performance now if not 1 year yet) svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", d => ((d.year1 || d.now) < 0 ? "negative" : "positive")) .classed("pending-year1", d => !d.year1) .attr("x", d => { const _d = d.year1 || d.now; return _d < 0 ? x(_d) : x(0); }) .attr("y", d => y(d.name)) .attr("width", d => { const _d = d.year1 || d.now; return _d < 0 ? x(0) - x(_d) : x(_d) - x(0); }) .attr("height", y.bandwidth()); // 1 day pop line svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", d => (d.day1 < 0 ? "negative" : "positive")) .classed("day1-line", true) .attr("x", d => x(d.day1)) .attr("y", d => y(d.name) - 1) .attr("width", 2) .attr("height", y.bandwidth() + 2); // Company name labels svg .append("g") .selectAll("text") .data(data) .join("text") .attr("x", width - margin.right - 80) .attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.6ex") // .text((d, i) => i >= 5 && i < data.length - 5 ? d.name : null) .text(d => d.name) .classed("label", true); return container; }34:T5c4,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("rect").classed("background", true); // Put gridlines on the bottom svg.append("g").call(xAxis1); svg.append("g").call(xAxis2); // console.log(x(-0.01)) // 1 year bar chart (performance now if not 1 year yet) svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", d => ((d.year1 || d.now) < 0 ? "negative" : "positive")) .classed("pending-year1", d => !d.year1) .attr("x", d => { const _d = d.year1 || d.now; return _d < 0 ? x(_d) : x(0); }) .attr("y", d => y(d.name)) .attr("width", d => { const _d = d.year1 || d.now; return _d < 0 ? x(0) - x(_d) : x(_d) - x(0); }) .attr("height", y.bandwidth()); // 1 day pop line svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("class", d => (d.day1 < 0 ? "negative" : "positive")) .classed("day1-line", true) .attr("x", d => x(d.day1)) .attr("y", d => y(d.name) - 1) .attr("width", 2) .attr("height", y.bandwidth() + 2); // Company name labels svg .append("g") .selectAll("text") .data(data) .join("text") .attr("x", width - margin.right - 80) .attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.6ex") // .text((d, i) => i >= 5 && i < data.length - 5 ? d.name : null) .text(d => d.name) .classed("label", true); return svg.node(); }35:T48e,style = html` `36:[] 31:{"id":"75839a9f2b057a25","slug":"unicorn-startup-ipo-leader-board","title":"Unicorn Startup IPO Leader Board","thumbnail":"fa63225831c5d5d1b66e3962bbe170dcf50792050c98fdaa42447e6520e56d86","access_level":"public","create_time":"$D2019-09-29T17:47:54.940Z","update_time":"$D2019-10-27T00:01:19.937Z","view_time":null,"first_public_time":"$D2019-10-06T23:12:34.134Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"feaed1fcd301c423","login":"rayshan","name":"Ray Shan","avatar_url":"https://avatars-next.observableusercontent.com/d5997968668e4e1f2ea38c91acad6fec56352093ce10ca4231f5962cc87012c9","tier":"starter_2024"},"version":555,"publish_version":555,"role":null,"authored":false,"authors":[{"type":"individual","id":"f98a7daeae7fad6a","login":"rayshan","name":"Ray Shan","avatar_url":"https://avatars-next.observableusercontent.com/d5997968668e4e1f2ea38c91acad6fec56352093ce10ca4231f5962cc87012c9","tier":null}],"members":[{"type":"individual","id":"f98a7daeae7fad6a","login":"rayshan","name":"Ray Shan","avatar_url":"https://avatars-next.observableusercontent.com/d5997968668e4e1f2ea38c91acad6fec56352093ce10ca4231f5962cc87012c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Unicorn Startup IPO Leader Board","cells":[{"id":0,"value":"md`# Unicorn Startup IPO Leader Board`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"html`

WORK IN PROGRESS - a blog post will accompany this leaderboard at shan.io/writing.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = import(\"d3@^5.x\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`## Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`## Data & Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dataUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT_DFViIwthyiYRSVaPyU7arN_X1qQLmZ0l34uvZsPTZ16CtdRDT5aZC6omaEL85xAMfs_33Gr3Ptz1/pub?gid=1927375386&single=true&output=tsv\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"updateDataUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT_DFViIwthyiYRSVaPyU7arN_X1qQLmZ0l34uvZsPTZ16CtdRDT5aZC6omaEL85xAMfs_33Gr3Ptz1/pub?gid=1877493574&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = {\n const parsedData = await d3.tsv(dataUrl, d3.autoType);\n return parsedData\n .sort((a, b) => {\n if (a.year1 > b.year1) return -1;\n if (a.year1 < b.year1) return 1;\n if (a.now > b.now) return -1;\n if (a.now < b.now) return 1;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"updatedAt = {\n const parsedData = await d3.tsv(updateDataUrl, d3.autoType);\n return parsedData[0].updated_at;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"margin = ({\n top: 20,\n right: 60,\n bottom: 50,\n left: 33\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"height = data.length * 20 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`## Chart Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"x = d3.scaleLinear()\n // .domain([-1, d3.max(data, d => d.year1)])\n .domain(d3.extent(data, d => d.year1)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xAxis1 = g =>\n g\n .attr(\"class\", \"grid\")\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .call(\n d3\n .axisTop(x)\n .tickValues([-1, 0, 1, 2, 3])\n .tickFormat(d3.format(\".0%\"))\n .tickSize(0)\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"xAxis2 = g =>\n g\n .attr(\"class\", \"grid\")\n .attr(\"transform\", `translate(0, ${margin.top})`)\n .call(\n d3\n .axisBottom(x)\n .tickValues([-1, 0, 1, 2, 3])\n .tickFormat(d3.format(\".0%\"))\n .tickSize(height - margin.top - margin.bottom)\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"y = d3\n .scaleBand()\n .domain(data.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .round(true)\n .paddingInner(0.4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"