31:T1665,viewof overview = { fonts; tachyons; const svg = d3.select(DOM.svg(w, height)); const topOfMiddle = ~~(height - margin.bottom - margin.midgap); const bottomOfMiddle = ~~(height - margin.bottom + margin.midgap); svg .append("path") .attr("stroke", "#999") .attr("stroke-width", 1) .attr("d", `M0 ${topOfMiddle} L${w} ${topOfMiddle}`); svg .append("path") .attr("stroke", "#999") .attr("stroke-width", 1) .attr("d", `M0 ${bottomOfMiddle} L${w} ${bottomOfMiddle}`); svg .append("g") .attr("transform", `translate(${w / 2}, ${margin.top})`) .append("text") .text("IPO date") .attr("font-size", 12) .attr("text-anchor", "middle"); svg .append("g") .attr("transform", `translate(${w / 2}, ${height - margin.top})`) .append("text") .text("Founded date") .attr("font-size", 12) .attr("text-anchor", "middle"); const connections = svg.append("g"); // TODO: why do pre-1900 dates look like :00? const a0 = svg .append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisRight(yTop) .tickFormat(t => (t ? t : "")) .tickSize(0) .tickValues(d3.range(100, 700, 100)) ); const a1 = svg .append("g") .attr("class", "axis axis--y") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisRight(yBottom) .tickFormat(t => (t ? t : "")) .tickSize(0) .tickValues(d3.range(100, 700, 100)) ); const axis = svg .append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call( d3 .axisBottom(x) .ticks(width < 500 ? d3.timeYear.every(25) : d3.timeYear.every(10)) .tickSize(0) .tickPadding(0) ); a0.selectAll("path").remove(); a1.selectAll("path").remove(); axis.selectAll("path").remove(); axis .selectAll("text") .attr("alignment-baseline", "middle") .attr("dy", 0); const barWidth = Math.max(2, ~~(width / 120) - 1); const ipoBars = svg .append("g") .attr("fill", blue) .selectAll("rect") .data(nestedIPO) .enter() .append("rect") .attr("x", d => x(d.ipo)) .attr("y", d => yTop(d.companies.length)) .attr("height", d => yTop(0) - yTop(d.companies.length)) .attr("width", barWidth); const mid = height - margin.bottom; const foundingBars = svg .append("g") .attr("fill", orange) .selectAll("rect") .data(nestedFounding) .enter() .append("rect") .attr("x", d => x(d.founding)) .attr("y", d => yBottom(0)) .attr("height", d => yBottom(d.companies.length) - yBottom(0)) .attr("width", barWidth); svg.on("click", () => { const [xCoord, yCoord] = d3.mouse(svg.node()); const top = yCoord > height - margin.bottom; const hoverTime = x.invert(xCoord); const key = d3.timeYear(hoverTime).toString(); if (top) { svg.node().value = nestedFounding.find( ({ founding }) => founding.toString() == key ); } else { svg.node().value = nestedIPO.find(({ ipo }) => ipo.toString() == key); } svg.node().dispatchEvent(new CustomEvent("input")); }); svg.on("mousemove", () => { const [xCoord, yCoord] = d3.mouse(svg.node()); const top = yCoord > height - margin.bottom; const hoverTime = x.invert(xCoord); const key = d3.timeYear(hoverTime).toString(); connections.html(""); let paths; const hbw = ~~(barWidth / 2); if (top) { const found = nestedFounding.find( ({ founding }) => founding.toString() == key ); if (!found) return; const { founding, companies } = found; ipoBars.attr("opacity", 1); foundingBars.attr("opacity", d => { return d3.timeYear(d.founding).toString() === key ? 1 : 0.5; }); paths = connections .selectAll("path") .data(companies) .enter() .append("path") .attr("stroke", orange) .attr("d", company => { const distance = Math.abs(x(company.ipo) - x(founding)); const straightness = 1 - distance / width; return `M${x(founding) + hbw} ${yBottom(0)} Q ${x(founding) + hbw} ${mid + margin.midgap * straightness} ${(x(company.ipo) + x(founding)) * 0.5} ${mid} Q ${x(company.ipo) + hbw} ${mid - margin.midgap * straightness} ${x(company.ipo) + hbw} ${yTop(0)}`; }); } else { const found = nestedIPO.find(({ ipo }) => ipo.toString() == key); if (!found) return; const { ipo, companies } = found; foundingBars.attr("opacity", 1); ipoBars.attr("opacity", d => { return d3.timeYear(d.ipo).toString() === key ? 1 : 0.5; }); paths = connections .selectAll("path") .data(companies) .enter() .append("path") .attr("stroke", blue) .attr("d", company => { const distance = Math.abs(x(company.founding) - x(ipo)); const straightness = 1 - distance / width; return `M${x(ipo) + hbw} ${yTop(0)} Q ${x(ipo) + hbw} ${mid - margin.midgap * straightness} ${(x(company.founding) + x(ipo)) * 0.5} ${mid} Q ${x(company.founding)} ${mid + margin.midgap * straightness} ${x(company.founding)} ${yBottom(0)}`; }); } paths .attr("fill", "none") .attr("opacity", "0.5") .attr("stroke-width", 1); }); svg.on("mouseout", () => { connections.html(""); foundingBars.attr("opacity", 1); ipoBars.attr("opacity", 1); }); return svg.node(); }32:T48b,{ if (!overview) return html`

Click on the chart to see in-depth data

`; const { founding, ipo, companies } = overview; let header; let companyfn; if (founding) { header = html`

IPOs by ${ companies.length } companies founded in ${founding.getFullYear()}`; companyfn = company => html`${company.ipo.getFullYear()}${ company.company }`; } else { header = html`

Founding dates of ${ companies.length } companies that IPO’ed in ${ipo.getFullYear()}`; companyfn = company => html`${company.founding.getFullYear()}${ company.company }`; } const companyList = html`

${header}

${companies.map(companyfn)}

`; return companyList; }33:T4f8,md`## About this dataset Jay R. Ritter at the University of Florida has collected lots of very interesting data on IPOs, which has been useful for a wide range of analyses, like [Wealthfront’s recent writing about selling employee shares](https://blog.wealthfront.com/sell-employee-stock/). One of the cool datasets is this one - the founding dates of companies that posted an IPO after 1975. I dug in because it’s a fun visualization challenge, visualizing data that’s more like intervals than simple data points. One key limitation of this dataset is founding time: it only includes founding _year_, though it includes the precise day and month of IPOs. Also, for these charts, I’ve excluded the outlier [MF Global](https://en.wikipedia.org/wiki/MF_Global), which was founded in 1783 and went bankrupt around 2010. I also highly recommend reviewing the [PDF description of the dataset](https://site.warrington.ufl.edu/ritter/files/2018/04/FoundingDates.pdf), which explains at detail the difficulty of establishing a _one true founding date_ for companies that may be agglomerations of other companies via acquisitions, renamings, and rollups. _Data source: [Field-Ritter dataset of company founding dates](https://site.warrington.ufl.edu/ritter/ipo-data/)._`34:[{"id":"cd4cffa8ed38d4e372384870ad66453dd0675aa568aa6791e5161b4a4fd97fa7a02864c5eba01b55266376b4c9e20a2143cd0142d77903b82138fdf323b3fb8c","href":"https://static.observableusercontent.com/files/cd4cffa8ed38d4e372384870ad66453dd0675aa568aa6791e5161b4a4fd97fa7a02864c5eba01b55266376b4c9e20a2143cd0142d77903b82138fdf323b3fb8c","name":"ipo-ages.csv","type":"application/octet-stream","lastModified":1572392624539.794,"size":335892}] 2f:{"title":"How old are companies when they IPO?","cells":[{"id":0,"value":"md`# How old are companies when they IPO?\n\nThis works like two bar charts, with a [parallel coordinate](https://en.wikipedia.org/wiki/Parallel_coordinates) or [slope chart](http://datavizproject.com/data-type/slope-chart/) in the middle on interaction. Hover over bars on the top to see the founding dates of companies with a certain IPO year, or hover over the bottom to see IPO dates of companies with a specific founding year. Click to show a list of specific companies below, using Observable’s [viewof](https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof) idea.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`## Age at time of IPO\n\nHere’s another perspective: how long have companies been in business at the time that they IPO? Will we see a bump of startups that post IPOs a few years after they start to exist?\n\nFor this one, I’ll start with a simple histogram of months in existence before IPO’ing, using [Mike’s D3 Histogram notebook](https://beta.observablehq.com/@mbostock/d3-histogram) as a starting point.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`Indeed, it looks like a lot of companies IPO shortly after they are founded. Is this a recent trend?\n\n## Age of companies at time of IPO, by year of IPO\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"ageByIpo","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"md`Not really! That 6-ish year sweet spot is pretty constant.\n\nAnd, yep, 1975 is a pretty weird outlier here: there were only 12 companies that were founded in 1975, likely because of the [1973-1975 recession](https://en.wikipedia.org/wiki/1973%E2%80%9375_recession), and they were all quite old. At least that’s the best I can see in the data — if you're a real economist and have a better explanation, I’d love to hear it!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"md`---\n\n## Appendix\n\nBelow is all of the roughly-categorized recordkeeping code for how this all works.\n\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\n const parseIpo = d3.timeParse(\"%Y%m%d\");\n const parseYear = d3.timeParse(\"%Y\");\n return (await d3.csv(\n await FileAttachment(\"ipo-ages.csv\").url(),\n ({ company, ipo, founding }, i) => ({\n i,\n company,\n founding: parseYear(founding),\n ipo: parseIpo(ipo),\n elem: html`
${parseYear(\n founding\n ).getFullYear()} – ${parseIpo(ipo).getFullYear()} ${company}
`\n })\n )).filter(d => d.founding.getFullYear() > 1890);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"md`### Transformed data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"nestedIPO = d3\n .nest()\n .key(d => d3.timeYear(d.ipo))\n .entries(data)\n .map(({ key, values }) => ({\n ipo: new Date(key),\n companies: values.sort((a, b) => a.founding - b.founding)\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"nestedFounding = d3\n .nest()\n .key(d => d3.timeYear(d.founding))\n .entries(data)\n .map(({ key, values }) => ({\n founding: new Date(key),\n companies: values.sort((a, b) => a.ipo - b.ipo)\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"medianYearsInExistenceByIpo = d3\n .nest()\n .key(d => d3.timeYear(d.ipo))\n .entries(data)\n .map(({ key, values }) => ({\n name: new Date(key).getFullYear(),\n value: d3.median(\n values.map(({ founding, ipo }) => d3.timeYear.count(founding, ipo))\n )\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"yearsInExistence = {\n const d = data\n .map(d => d3.timeYear.count(d.founding, d.ipo))\n .sort((a, b) => a - b);\n d.x = \"Years before IPO\";\n d.y = \"Companies\";\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"md`### Imported charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"import {chart as ageByIpo, x as barX, margin as barMargin} with {barHeight as height, medianYearsInExistenceByIpo as data, barXAxis as xAxis} from \"@mbostock/d3-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"import {chart} with {yearsInExistence as data, barHeight as height} from \"@mbostock/d3-histogram\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`### Transcluded tweaks to imported charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"barXAxis = g =>\n g.attr(\"transform\", `translate(0,${barHeight - barMargin.bottom})`).call(\n d3\n .axisBottom(barX)\n .tickSizeOuter(0)\n .tickFormat(t => (t % 5 ? \"\" : t))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"barHeight = width > 500 ? width / 4 : width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"md`### Scales for main charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"yTop = d3\n .scaleLinear()\n .range([height - margin.bottom - margin.midgap, margin.top])\n .domain([0, overallMax])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"yBottom = d3\n .scaleLinear()\n .range([margin.bottom + margin.midgap, height])\n .domain([0, overallMax])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(data.map(d => d.ipo).concat(data.map(d => d.founding))))\n .range([margin.left, w - margin.left - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"md`### Assorted globals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"height = width < 500 ? width * 1.5 : width / 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"orange = \"rgb(234, 170, 97)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"blue = \"rgb(125, 191, 230)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"yBottom(new Date(\"1/1/2000\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"overallMax = d3.max(nestedFounding.concat(nestedIPO), d => d.companies.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"margin = ({\n top: 40,\n right: 0,\n bottom: height / 2,\n left: 0,\n midgap: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"fonts = new Promise(active =>\n WebFont.load({\n google: {\n families: [\"Cousine\"]\n },\n active\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"tachyons = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"WebFont = require(\"https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`---\n\nNotes\n\n- The original dataset is pretty good, but needed a little massaging:\n - It claims that 'Security Group Inc' was founded in 991. That should be 1991.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}