30:T1a10,chordChart = { const chordData = chordMatrix const opacityDefault = 0.8 const width = 640 const height = Math.min(640, width) const outerRadius = Math.min(width, height) * 0.5 - 50 const innerRadius = outerRadius - 20 const color = d3.scaleOrdinal() .domain(sharks) .range([' #edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#0c2c84'].reverse()) // .range(['#ece2f0','#d0d1e6','#a6bddb','#67a9cf','#3690c0','#02818a','#016450']) const ribbon = d3.ribbon() .radius(innerRadius - 4) const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) const chord = d3.chord() .padAngle(0.05) .sortSubgroups(d3.descending) function groupTicks(d, step) { const k = (d.endAngle - d.startAngle) / d.value; return d3.range(0, d.value, step).map(value => { return {value: value, angle: value * k + d.startAngle}; }); } const formatValue = d => d const svg = d3.create("svg") .attr('width', width) .attr('height', height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("font-size", 10) .attr("font-family", "sans-serif"); const chords = chord(chordData); function getGradID(d){ return "linkGrad-" + d.source.index + "-" + d.target.index; } //Create the gradients definitions for each chord const grads = svg.append("defs").selectAll("linearGradient") .data(chords) .enter().append("linearGradient") .attr("id", getGradID) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", function(d,i) { return innerRadius * Math.cos((d.source.endAngle-d.source.startAngle)/2 + d.source.startAngle - Math.PI/2); }) .attr("y1", function(d,i) { return innerRadius * Math.sin((d.source.endAngle-d.source.startAngle)/2 + d.source.startAngle - Math.PI/2); }) .attr("x2", function(d,i) { return innerRadius * Math.cos((d.target.endAngle-d.target.startAngle)/2 + d.target.startAngle - Math.PI/2); }) .attr("y2", function(d,i) { return innerRadius * Math.sin((d.target.endAngle-d.target.startAngle)/2 + d.target.startAngle - Math.PI/2); }) //Set the starting color (at 0%) grads.append("stop") .attr("offset", "0%") .attr("stop-color", function(d){ return color(d.source.index); }); //Set the ending color (at 100%) grads.append("stop") .attr("offset", "100%") .attr("stop-color", function(d){ return color(d.target.index); }); const group = svg.append("g") .selectAll("g") .data(chords.groups) .join("g") .attr('class', 'group') .on("mouseover", fade(.1)) .on("mouseout", fade(opacityDefault)); group.append("path") .attr("fill", d => color(d.index)) .attr("stroke", d => d3.rgb(color(d.index)).darker()) .attr("d", arc) group.append("path") .style("fill", function(d) { return color(d.index); }) .attr("d", arc) .each(function(d,i) { //Search pattern for everything between the start and the first capital L var firstArcSection = /(^.+?)L/; //Grab everything up to the first Line statement var newArc = firstArcSection.exec( d3.select(this).attr("d") )[1]; //Replace all the comma's so that IE can handle it newArc = newArc.replace(/,/g , " "); //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2) //flip the end and start position const centerAngle = (d.endAngle + d.startAngle) / 2 if (centerAngle > 90*Math.PI/180 && centerAngle < 270*Math.PI/180) { var startLoc = /M(.*?)A/, //Everything between the first capital M and first capital A middleLoc = /A(.*?)0 0 1/, //Everything between the first capital A and 0 0 1 endLoc = /0 0 1 (.*?)$/; //Everything between the first 0 0 1 and the end of the string (denoted by $) //Flip the direction of the arc by switching the start en end point (and sweep flag) //of those elements that are below the horizontal line var newStart = endLoc.exec( newArc )[1]; var newEnd = startLoc.exec( newArc )[1]; var middleSec = middleLoc.exec( newArc )[1]; //Build up the new arc notation, set the sweep-flag to 0 newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd; } //Create a new invisible arc that the text can flow along svg.append("path") .attr("class", "hiddenArcs") .attr("id", "arc"+i) .attr("d", newArc) .style("fill", "none"); }); group.append("text") .attr("class", "titles") .attr("dy", function(d,i) { const centerAngle = (d.endAngle + d.startAngle) / 2 return (centerAngle > 90*Math.PI/180 && centerAngle < 270*Math.PI/180 ? 30 : -23); }) .append("textPath") .attr("startOffset","50%") .style("text-anchor","middle") .attr("xlink:href",function(d,i){return "#arc"+i;}) .text(function(d,i){ return sharks[i]; }) .style('font-size', 12) .style('font-weight', 'bold') .style('fill', '#656') const groupTick = group.append("g") .selectAll("g") .data(d => groupTicks(d, 1)) .join("g") .attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`); groupTick.append("line") .attr("stroke", "#000") .attr("x2", 6); groupTick .filter(d => d.value % 5 === 0) .append("text") .attr("x", 8) .attr("dy", ".35em") .attr("transform", d => d.angle > Math.PI ? "rotate(180) translate(-16)" : null) .attr("text-anchor", d => d.angle > Math.PI ? "end" : null) .text(d => formatValue(d.value)); svg.append("g") .attr("fill-opacity", 0.67) .selectAll("path") .data(chords) .join("path") .on("mouseover", mouseoverChord) .on("mouseout", mouseoutChord) .attr('class', 'chord') .attr("d", ribbon) .style("fill", function(d){ return "url(#" + getGradID(d) + ")"; }) // .attr("fill", d => color(d.target.index)) // .attr("stroke", d => d3.rgb(color(d.target.index)).darker()); function fade(opacity) { return function(d,i) { svg.selectAll("path.chord") .filter(function(d) { return d.source.index !== i && d.target.index !== i; }) .transition() .style("opacity", opacity); }; } //Highlight hovered over chord function mouseoverChord(d,i) { //Decrease opacity to all svg.selectAll("path.chord") .transition() .style("opacity", 0.1); //Show hovered over chord with full opacity d3.select(this) .transition() .style("opacity", 1); }//mouseoverChord //Bring all chords back to default opacity function mouseoutChord(d) { //Set opacity back to default for all svg.selectAll("path.chord") .transition() .style("opacity", opacityDefault); } return svg.node(); }31:Tb2c,sankeyChart = { const nodeSort = (a, b) => { const valuationOrder = ['Increased Valuation', 'Same Valuation', 'Decreased Valuation'] if (a.name.includes('Valuation') && b.name.includes('Valuation')) { return d3.ascending(valuationOrder.indexOf(a.name), valuationOrder.indexOf(b.name)) } return d3.descending(a.name, b.name) } const colorScale = d3.scaleOrdinal(["Deal"], ["rgba(125,128,238,0.8)"]).unknown("#ddd") const valuationColorScale = d3.scaleOrdinal(["Increased Valuation", "Same Valuation", "Decreased Valuation"], ['#225ea8aa','#1d91c0aa','#41b6c4aa']).unknown("#ddd") const accentColor = 'rgba(125, 128, 238, 0.8)' const color = (d) => { // deal vs no deal if (d.names.length === 2) { if (+d.target.name[0] > 0) { return accentColor } } if (d.names.length === 3) { if (+d.source.name[0] > 0) { return accentColor } } if (d.names.length === 3) { return valuationColorScale(d.target.name) } if (d.names.length === 4) { return accentColor return valuationColorScale(d.source.name) } return '#ddd' } const height = 400 const width = 975 const sankey = d3.sankey() .nodeSort(nodeSort) .linkSort(null) .nodeWidth(4) .nodePadding(20) .extent([[0, 5], [width, height - 5]]) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const {nodes, links} = sankey({ nodes: sankeyGraph.nodes.map(d => Object.assign({}, d)), links: sankeyGraph.links.map(d => Object.assign({}, d)) }) svg.append("g") .selectAll("rect") .data(nodes.filter(d => !(d.name === 'No Deal' || d.name === 'N/A'))) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links.filter(d => !d.names.includes('N/A'))) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", color) .attr("stroke-width", d => d.width) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes.filter(d => !(d.name === 'No Deal' || d.name === 'N/A'))) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }32:Tc43,data = { const mappedData = ds.map(row => { const show = { season: row.Season, episode: row.Episode, yearsSinceAir: 11 - row.Season, airDateEstimate: d3.timeYear.offset(d3.timeWeek.offset(new Date('2009', '8', '15'), row.Episode), row.Season - 1), } const company = { name: row.Company, gender: row.Entrepreneur_Gender, count: row.Entrepreneur_Count, city: row.Entrepreneur_City, state: row.Entrepreneur_State.slice(0, 2), stateId: stateNamesMap[row.Entrepreneur_State.slice(0, 2)], subcategory: row.Company_Subcategory, description: row.Company_Description, status: row.Company_2020Status, } const ask = { amount: row.Ask_Amount, equity: row.Ask_Equity, valuation: row.Ask_Valuation, } const deal = { closed: row['Deal?'] === "Yes" ? true : false, count: row.Deal_Count, withBarbara: !!row.Deal_BarbaraCorcoran, withMark: !!row.Deal_MarkCuban, withLori: !!row.Deal_LoriGreiner, withRobert: !!row.Deal_RobertHerjavec, withDaymond: !!row.Deal_DaymondJohn, withKevin: !!row.Deal_KevinOleary, withGuest: !!row.Deal_GuestShark, amount: row.Deal_Amount === 'N/A' ? null : row.Deal_Amount, amountPerShark: row.Deal_AmountPerShark === 'N/A' ? null : row.Deal_AmountPerShark, equity: row.Deal_Equity === 'N/A' ? null : row.Deal_Equity, valuation: row.Deal_Valuation === 'N/A' ? null : row.Deal_Valuation, royalty: row['Deal_Royalty?'] === 'N' ? null : row['Deal_Royalty?'] === 'N' ? false: true, loan: row['Deal_Loan?'] === 'N/A' ? null : row['Deal_Loan?'] === 'N' ? false: true, } const offer = { count: row.Offer_Count, withBarbara: !!row.Offer_BarbaraCorcoran, withMark: !!row.Offer_MarkCuban, withLori: !!row.Offer_LoriGreiner, withRobert: !!row.Offer_RobertHerjavec, withDaymond: !!row.Offer_DaymondJohn, withKevin: !!row.Offer_KevinOleary, withGuest: !!row.Offer_GuestShark, alternateDetails: row.OfferAlternateDetails === "N/A" ? null : row.OfferAlternateDetails, } return { show, company, ask, offer, deal } }) mappedData.forEach(row => { if (row.deal.closed) { row.deal.valuationRatio = +(row.deal.valuation / row.ask.valuation).toFixed(2) row.deal.amountRatio = +(row.deal.amount / row.ask.amount).toFixed(2) row.deal.equityRatio = +(row.deal.equity / row.ask.equity).toFixed(2) row.deal.valuationDiff = row.deal.valuation - row.ask.valuation row.deal.amountDiff = row.deal.amount - row.ask.amount row.deal.equityDiff = row.deal.equity - row.ask.equity row.deal.valuationChange = row.deal.valuationRatio > 1 ? 'Increase' : row.deal.valuationRatio < 1 ? 'Decrease' : 'Equal' } const dealPartners = [] const sharks = ['Barbara', 'Mark', 'Lori', 'Robert', 'Daymond', 'Kevin', 'Guest'] sharks.forEach(shark => { if (row.deal[`with${shark}`]) { dealPartners.push(shark) } }) row.deal.partners = dealPartners }) return mappedData } 33:T877,sankeyGraph = { const sankeyKeys = ['OfferCount', 'DealCount', 'ValuationChange', 'DealClosed', ]//,'CompanyState'] let index = -1; const getValuationChange = (d) => { if (!d.deal.closed) { return 'N/A' } if (d.deal.valuation === d.ask.valuation) { return 'Same Valuation' } if (d.deal.valuation > d.ask.valuation) { return 'Increased Valuation' } if (d.deal.valuation < d.ask.valuation) { return 'Decreased Valuation' } } let selectedData = data.map(d => ({ 'DealClosed': d.deal.closed ? 'Deal' : 'No Deal', 'CompanyGender': d.company.gender, 'CompanyState': d.company.state, 'ShowSeason': d.show.season, 'offers': d.offer.count, 'deals': d.deal.count, 'OfferCount': `${d.offer.count} offer${d.offer.count === 1 ? '' : 's'}`, 'DealCount': `${d.deal.count} deal${d.deal.count === 1 ? '' : 's'}`, 'CompanySubcategory': d.company.subcategory, 'ValuationChange': getValuationChange(d), })) .sort((a, b) => d3.descending(a.offers, b.offers) || d3.descending(a.deals, b.deals)) const nodes = []; const nodeByKey = new Map; const indexByKey = new Map; const links = []; const keys = sankeyKeys for (const k of keys) { for (const d of selectedData) { const key = JSON.stringify([k, d[k]]); if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map; for (const d of selectedData) { const names = prefix.map(k => d[k]); const key = JSON.stringify(names); const value = d.value || 1; let link = linkByKey.get(key); if (link) { link.value += value; continue; } link = { source: indexByKey.get(JSON.stringify([a, d[a]])), target: indexByKey.get(JSON.stringify([b, d[b]])), names, value }; links.push(link); linkByKey.set(key, link); } } return {nodes, links}; }34:T1ced,class StackedSingleBar { constructor(config) { this.series = config.series; this.valueAccessor = config.valueAccessor || ((d) => d.percentage || 0); this.valueFormatter = config.valueFormatter || ((value, percentage) => `${d3.format('.1f')(percentage)}%`); const width = config.width || 350; const height = config.height || 100; const barHeight = 24; this.labelFontSize = 14; this.size = { width, height: height, }; this.margin = { top: height - barHeight, bottom: 0, left: 5, right: 5, }; this.chartSize = { width: width - this.margin.left - this.margin.right, height: height - this.margin.top - this.margin.bottom, }; return this.draw(); } draw() { // initial drawing of SVG components if (!this.svg) { this.svg = d3 .create('svg') .classed('stacked-single-bar', true) .attr('height', this.size.height) .attr('width', this.size.width); this.chartSelection = this.svg.append('g').attr('transform', `translate(${this.margin.left}, ${this.margin.top})`); this.annotationSelection = this.svg.append('g').attr('transform', `translate(${this.margin.left}, ${this.margin.top})`); this.labelsSelection = this.svg.append('g').attr('transform', `translate(${this.margin.left}, ${this.margin.top})`); } this.layout(); this.drawBars(); this.drawLabels(); return this.svg.node() } layout() { this.xScale = d3 .scaleLinear() .domain([0, 100]) .range([0, this.chartSize.width]); const seriesTotal = d3.sum(this.series, this.valueAccessor); let cumulative = 0; this.layoutSeries = this.series.map((item) => { const normalizedPercentage = (this.valueAccessor(item) / seriesTotal) * 100; const itemCumulative = cumulative; cumulative += normalizedPercentage; const labelGroup = this.labelsSelection.append('g').attr('class', 'label'); labelGroup .append('text') .attr('class', 'label-text') .text(item.label) .style('font-family', 'sans-serif') .attr('dy', '0.35em') .attr('y', 10) .attr('x', 10) .style('font-size', this.labelFontSize); labelGroup .append('text') .attr('class', 'percentage-text') .text(`${this.valueFormatter(this.valueAccessor(item), normalizedPercentage)}`) .style('font-family', 'sans-serif') .style('fill', '#647492') .attr('y', 10 + this.labelFontSize * 1.4) .attr('x', 10) .attr('dy', '0.35em') .style('font-size', this.labelFontSize); labelGroup .append('circle') .attr('r', 4) .attr('cx', 0) .attr('cy', 10) // .style('fill', '#0A71D0') .style('fill', item.color) .style('stroke', 'white') .style('stroke-width', 2); const labelWidth = item.label.length * this.labelFontSize const xAnchor = this.xScale(cumulative - normalizedPercentage / 2) + labelWidth / 2; // center of the bar to match left side of label return Object.assign(Object.assign({}, item), { cumulative: itemCumulative, labelGroup, xAnchor, percentage: normalizedPercentage, labelWidth, x: xAnchor, y: 0 }); }); const boundedTick = (simulation) => { simulation.tick(); simulation.nodes().forEach((d) => { d.x = Math.max(d.labelWidth / 2, Math.min(this.chartSize.width - d.labelWidth / 2, d.x)); d.y = 0; }); }; const simulation = d3 .forceSimulation(this.layoutSeries) .force('x', d3.forceX((d) => d.xAnchor).strength(0.3)) .force('y', d3.forceY(0).strength(1)) .force('collide', d3 .forceCollide() .radius((d) => d.labelWidth / 2) .strength(1) .iterations(3)) .stop(); for (let i = 0; i < 200; ++i) { boundedTick(simulation); } this.layoutSeries.forEach((item) => { item.labelGroup.attr('transform', `translate(${item.x - item.labelWidth / 2}, ${-this.margin.top})`); }); } drawBars() { this.svg.select('defs').html('') const defs = this.svg.append('defs'); defs .append('clipPath') .attr('id', 'bar-clip') .append('rect') .attr('width', this.chartSize.width) .attr('height', this.chartSize.height) .attr('rx', 4) .attr('ry', 4); this.chartSelection .attr('clip-path', 'url(#bar-clip)') .selectAll('rect.bar') .data(this.layoutSeries) .join('rect') .attr('class', 'bar') .attr('x', (d) => this.xScale(d.cumulative)) // ILayoutItem .attr('width', (d) => this.xScale(d.percentage)) // ILayoutItem .attr('height', this.chartSize.height) .style('fill', (d) => d.color); // ILayoutItem } drawLabels() { for (let i = 0; i < this.layoutSeries.length; i++) { const item = this.layoutSeries[i]; const y2 = -this.margin.top + 15; const leftBound = this.xScale(item.cumulative); const rightBound = this.xScale(item.cumulative + item.percentage); const labelPlacementLeft = item.x - item.labelWidth / 2; if (labelPlacementLeft < leftBound) { const sourceX = this.xScale(item.cumulative) + this.xScale(item.percentage) * 0.2; this.annotationSelection .append('path') .attr('d', drawPath(sourceX, 10, labelPlacementLeft, y2)) .style('fill', 'none') .style('stroke', '#F0F3F7') .style('stroke-width', 2); } else if (labelPlacementLeft > rightBound) { const sourceX = this.xScale(item.cumulative) + this.xScale(item.percentage) * 0.8; this.annotationSelection .append('path') .attr('d', drawPath(sourceX, 10, labelPlacementLeft, y2)) .style('fill', 'none') .style('stroke', '#F0F3F7') .style('stroke-width', 2); } else { this.annotationSelection .append('line') .attr('x1', labelPlacementLeft) .attr('x2', labelPlacementLeft) .attr('y1', 5) .attr('y2', y2) .style('stroke', '#F0F3F7') .style('stroke-width', 2); } } } updateData(series) { this.clear(); this.series = series; this.draw(); } clear() { d3.select(this.target).html(''); } }35:Tc10,customChordLayout = { return function() { var ε = 1e-6, ε2 = ε * ε, π = Math.PI, τ = 2 * π, τε = τ - ε, halfπ = π / 2, d3_radians = π / 180, d3_degrees = 180 / π; var chord = {}, chords, groups, matrix, n, padding = 0, sortGroups, sortSubgroups, sortChords; function relayout() { var subgroups = {}, groupSums = [], groupIndex = d3.range(n), subgroupIndex = [], k, x, x0, i, j; var numSeq; chords = []; groups = []; k = 0, i = -1; while (++i < n) { x = 0, j = -1, numSeq = []; while (++j < n) { x += matrix[i][j]; } groupSums.push(x); ////////////////////////////////////// ////////////// New part ////////////// ////////////////////////////////////// for(var m = 0; m < n; m++) { numSeq[m] = (n+(i-1)-m)%n; } subgroupIndex.push(numSeq); ////////////////////////////////////// ////////// End new part ///////////// ////////////////////////////////////// k += x; }//while k = (τ - padding * n) / k; x = 0, i = -1; while (++i < n) { x0 = x, j = -1; while (++j < n) { var di = groupIndex[i], dj = subgroupIndex[di][j], v = matrix[di][dj], a0 = x, a1 = x += v * k; subgroups[di + "-" + dj] = { index: di, subindex: dj, startAngle: a0, endAngle: a1, value: v }; }//while groups[di] = { index: di, startAngle: x0, endAngle: x, value: (x - x0) / k }; x += padding; }//while i = -1; while (++i < n) { j = i - 1; while (++j < n) { var source = subgroups[i + "-" + j], target = subgroups[j + "-" + i]; if (source.value || target.value) { chords.push(source.value < target.value ? { source: target, target: source } : { source: source, target: target }); }//if }//while }//while if (sortChords) resort(); }//function relayout function resort() { chords.sort(function(a, b) { return sortChords((a.source.value + a.target.value) / 2, (b.source.value + b.target.value) / 2); }); } chord.matrix = function(x) { if (!arguments.length) return matrix; n = (matrix = x) && matrix.length; chords = groups = null; return chord; }; chord.padding = function(x) { if (!arguments.length) return padding; padding = x; chords = groups = null; return chord; }; chord.sortGroups = function(x) { if (!arguments.length) return sortGroups; sortGroups = x; chords = groups = null; return chord; }; chord.sortSubgroups = function(x) { if (!arguments.length) return sortSubgroups; sortSubgroups = x; chords = null; return chord; }; chord.sortChords = function(x) { if (!arguments.length) return sortChords; sortChords = x; if (chords) resort(); return chord; }; chord.chords = function() { if (!chords) relayout(); return chords; }; chord.groups = function() { if (!groups) relayout(); return groups; }; return chord; }; }36:[{"id":"972c32aea47c63c33713474f48e34ee262f27e56928baeace83c6f09cb29d6a285981348676eaae997ca55325136f5d5ed67ccc163f7432e568c4bd6f5294258","href":"https://static.observableusercontent.com/files/972c32aea47c63c33713474f48e34ee262f27e56928baeace83c6f09cb29d6a285981348676eaae997ca55325136f5d5ed67ccc163f7432e568c4bd6f5294258","name":"SharkTankDataCleaned@1.csv","type":"text/csv","lastModified":1591436769775.01,"size":25582},{"id":"47fb622a8502cbff3ffe234c19e8dfd41d3d6d7d920ca68faf2eaf6ae4211be3378bb58adb89f8edb03f2128cd8c96b11b05a478acd41240743a086381103a5b","href":"https://static.observableusercontent.com/files/47fb622a8502cbff3ffe234c19e8dfd41d3d6d7d920ca68faf2eaf6ae4211be3378bb58adb89f8edb03f2128cd8c96b11b05a478acd41240743a086381103a5b","name":"us-state-names.tsv","type":"text/tab-separated-values","lastModified":1591445121521.82,"size":1033}] 2e:{"title":"Shark Tank: Tech Pitches Exploration","cells":[{"id":0,"value":"md`# Shark Tank: Tech Pitches Exploration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"md`\n

**A quick note on Observable**

If you have experience with Jupyter notebooks, Observable will look familiar. The biggest difference is that Observable notebooks don't flow from the top down. Instead, a dependency graph is built based on variable relationships. When variables are updated, all downstream cells will automatically update. You can view the dependency chart to the right of the page.

As is common with Observable notebooks, some of the \"business logic\" for this notebook is tucked away in an [**Appendix**](#appendix) at the end of the page.

**You can view the code which generates each cell by clicking to the left of the cell.**

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"md`\n## An Introduction to the Data\nJust below is what the cleaned data looks like. Each element in the array corresponds to a tech pitch and a row from the [original data set](https://docs.google.com/spreadsheets/d/1aw-NyMdyvzrrHKhAcskj-fKJfMlwA3mvGVQY961xSRE/edit?usp=sharing). Every element contains the original information cleaned plus some additional data, for instance an air date estimate based on the season and episode number.\n\nNote that there were [**a few errors spotted**](#errors) in the original dataset which have been adjusted for here.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`\n## Deal Partnerships\nThe first thing we're going to look at is the partnerships between sharks. For this, I've created a chord diagram. Each chord between two sharks is sized based on the number of deals where the two sharks were both part of the deal. Note that this chart shows the total number of \"partnerships\", not the total number of deals. If there was a three-shark deal including Mark, Lori, and Daymond, it will be represented as a partnership between Mark-Lori, Mark-Daymond, and Lori-Daymond, thus appearing 3 times instead of just once. \n\n\n**We see a surprisingly well distributed set of partnerships!** It doesn't seem like the sharks have a heavy preference for pairing with (or not pairing with) specific other sharks. One thing we can take away is that it looks like **Lori prefers partnerships, whereas Daymond and Robert are most likely to strike a deal alone.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"md`\nTo explore this a bit further, below is a breakdown by shark of the number of partners in each deal that they made. As anticipated, **Lori makes (by a significant margin), the least number of solo tech deals (~20%).** On the other end, Daymond, Robert and Barbara all make at least half of their deals solo.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"vl.markBar({ cornerRadius: 2 })\n .data(partnerDeals)\n .encode(\n vl.y().fieldN('partner').axis({ title: 'Shark' }).sort(['Daymond', 'Robert', 'Barbara', 'Mark', 'Kevin', 'Lori','Guest'].reverse()),\n vl.x().count().stack(\"normalize\").axis({ format: \"%\", title: 'Proportion of Investents' }),\n vl.color().fieldO('deal.count').legend({ title: 'Partners in Deal'})\n )\n .config(defaultChartConfig)\n .width(450)\n .height(300)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"md`\n## Strike a Deal: Hot or Cheap\nNext, we'll look at if each shark prefers to make deals when they can get in cheap (below asking valuation), or when they're excited and willing to pay above valuation.\n\n**Barbara and Lori are most likely to pay below the asking valuation price**, with Lori making 40% of her deals investing below the company's offered valuation. In comparison, Daymond makes 75% of his deals below the company's initial valuation. Interestingly, they also both make 25% of their investments above the initial valuation. The difference comes from Lori making close to 35% of her investments at exactly valuation, while Daymond makes none of his at exact valuation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"vl.markBar()\n .data(partnerDeals)\n .encode(\n vl.y().fieldN('partner').axis({ title: 'Shark' }).sort(['Daymond', 'Guest', 'Kevin', 'Mark', 'Robert', 'Barbara', 'Lori'].reverse()),\n vl.x().count().stack(\"normalize\").axis({ format: \"%\", title: 'Proportion of Investments' }),\n vl.color().fieldN('deal.valuationChange').scale({ domain: ['Decrease', 'Equal', 'Increase'], range: ['#636CE9', '#e8e8e8', '#41b6c4aa'] }).legend({ title: 'Valuation Change'})\n )\n .config(defaultChartConfig)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"md`\nTo further investigate when sharks like to make a deal (hot or cheap), below is a chart which shows every investment placed according to the investment amount per shark, and colored according to whether the valuation is below, at, or above the company's initially proposed valuation.\n\nAgain, small sample size, but it looks like Kevin likes to get a good deal and invest small amounts. And **Mark is willing to invest more money if he's able to get a good deal on the valuation.**\n\nYou can view the chart as stacked or as separate charts grouped by increased/decreased/equal valuations by selecting from the **dropdown below.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"viewof valuationLayout = select([\"Rows\", \"Stacked\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"vl.markCircle({ size: 70, opacity: 0.8 })\n .data(partnerDeals.filter(d => d.deal.valuationRatio < 5))\n .encode(\n vl.x().fieldQ(\"deal.amountPerShark\").axis({ title: 'Investment Per Shark' }),\n vl.color().fieldQ(\"deal.valuationRatio\").title('Valuation Ratio').scale({ range: ['#636CE9', '#ddd', '#41b6c4aa'], domain: [0, 1, 3]}),\n // vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }).legend(null),\n vl.y().fieldN(\"partner\").axis({ title: 'Shark' }),\n vl.tooltip(['company.name', 'deal.valuationRatio', 'deal.amount']),\n valuationLayout === 'Stacked' ? undefined : vl.row().fieldN(\"deal.valuationChange\").title('Valuation Change')\n ).config(defaultChartConfig)\n .render()\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"md`\n## Valuation & Equity Ratios by Founding Team Gender\nFirst, a quick look at the team breakdowns. Of the 103 tech companies, there were 83 male teams, 9 mixed teams, and 11 female teams. \n

\nOn a technical aside, while the \"pie-bar\" chart below looks simple, the implementation turns out to be pretty complex due to the label placement. To make sure none of the labels overlap, I run a physics simulation with D3 to space them out while making sure they are as close to the bar segment they are labeling as possible.\n
\n
\nThe code can be found under the [**StackedSingleBar cell**](#StackedSingleBar).\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"genderBreakdown = new StackedSingleBar({ series: [\n { label: 'Male', count: data.filter(d => d.company.gender === 'Male').length, color: 'rgba(101,223,255,1)' },\n { label: 'Mixed', count: data.filter(d => d.company.gender === 'Mixed Team').length, color: '#8ab1ff' },\n { label: 'Female', count: data.filter(d => d.company.gender === 'Female').length, color: ' rgba(175,104,254,1)' },\n ], \n width: 560, valueAccessor: d => d.count, valueFormatter: (d, p) => `${d}` }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"md`\nThe scatterplots below show each deal's equity ratio (deal equity / proposed equity) and valuation ratio (deal valuation / proposed valuation). Across all team genders, the **sharks tend to come away with more equity than the founder's initially propose.** This can be seen on the below scatterplots as all of the points above \"1\" on the y-axis. \n\nDue to the small sample size, its difficult to draw any conclusions of each closed deal's valuation and equity ratio as related to team gender. The **dropdown below** allows you to stack the different scatterplots on top of each other to better see how each distribution compares to one another.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"viewof genderValuation = select([\"Columns\", \"Stacked\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"scatter = vl.markCircle({ size: 50, opacity: 0.8 })\n .data(data.filter(d => d.deal.closed && d.deal.valuationRatio < 2.5))\n .encode(\n vl.x().fieldQ('deal.valuationRatio').axis({ title: 'Valuation Ratio' }), // .timeUnit('utcmonthdate'),\n vl.y().fieldQ('deal.equityRatio').axis({ title: 'Equity ratio', orient: 'left' }),\n genderValuation === 'Stacked' ? null : vl.column().fieldN(\"company.gender\").title(null),\n vl.color().fieldN(\"company.gender\").legend(genderValuation === 'Stacked' ? { title: 'Team Gender' } : null).scale({ domain: ['Male', 'Mixed Team', 'Female'], range: ['rgba(101,223,255,1)', '#8ab1ff', 'rgba(175,104,254,1)']}),\n vl.tooltip(['company.name', 'deal.valuationRatio', 'deal.equityRatio'])\n // vl.shape().fieldN(\"condition\")\n ).config(defaultChartConfig)\n .height(180)\n .width(220)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`## Episode Airing Date\nI estimated each show's air date based on the season and episode numbers. Overall, from 2009 to present, there have been 103 tech pitches. 55 have closed a deal, while the remaining 48 companies have left with no deal. A \"rug\" plot shows a marker for every pitch, in blue on the bottom row for closed deals, and in grey on the top row for pitches with no deal. You can mouseover each mark to see which company was pitching.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"dealBreakdown = new StackedSingleBar({ series: [\n { label: 'Deal', count: data.filter(d => d.deal.closed).length, color: '#584Cf2' },\n { label: 'No Deal', count: data.filter(d => !d.deal.closed).length, color: '#bbb' }\n ], \n width: 460, valueAccessor: d => d.count, valueFormatter: (d, p) => `${d} companies` }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"vl.markTick({ thickness: 1, height: 20 })\n .data(data)\n .encode(\n vl.x().fieldT(\"show.airDateEstimate\").axis({ title: 'Air Date (estimate)' }),\n // vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }),\n vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }).legend(null),\n vl.y().fieldN(\"deal.closed\").axis({ title: 'Deal Closed', orient: 'right' }),\n vl.tooltip(['company.name'])\n )\n .config(defaultChartConfig)\n .width(450)\n .height(60)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"md`\nBecause the marks are small and tend to overlap, its difficult to get an immediate sense of if there were any trends over time. Below, each mark is widened and its opacity lowered to create a time-based heatmap effect. We can see tech deals went on a **hot streak in late 2017 to the beginning of 2018 (season 9).**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"vl.markTick({ thickness: 30, opacity: 0.1, height: 50, cornerRadius: 0 })\n .data(data)\n .encode(\n vl.x().fieldT(\"show.airDateEstimate\").axis({ title: 'Air Date (estimate)' }).scale({ padding: 20}),\n // vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }),\n vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }).legend(null),\n vl.y().fieldN(\"deal.closed\").axis({ title: 'Deal Closed', orient: 'right' }),\n // vl.tooltip(['company.name'])\n )\n .config(defaultChartConfig)\n .height(100)\n .width(450)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"md`\n## Offer To Deal To Valuation Flow\nThe visualization below shows the flow from offers to deals, separating by number of offers, number of deals, and finally, if the closed deal was an increase or decrease in valuation. If you mouseover any flow, it will show the number of deals (or non-deals) that followed that path.\n\nOf the no deals, 37 were not offered a deal. 9 companies were offered 1 deal and declined, and 2 companies were offered 2 deals and declined both. A higher number of offers/deals has a slight correlation with increased (or same) valuation as initially proposed, but regardless, the deals tend to have a decrease in valuation.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"md`\nThe chart below shows every deal grouped into rows based on the number of offers. As speculated from the Sankey diagram above, **a higher number of offers is some indication of a better deal valuation** in comparison to the company's proposed valuation. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"vl.markCircle({ size: 70, opacity: 0.8 })\n .data(partnerDeals.filter(d => d.deal.valuationRatio < 5))\n .encode(\n vl.x().fieldQ(\"deal.amountPerShark\").axis({ title: 'Investment Per Shark' }),\n vl.color().fieldQ(\"deal.valuationRatio\").title('Valuation Ratio').scale({ range: ['#636CE9', '#eee', '#41b6c4aa'], domain: [0, 1, 3]}),\n // vl.color().fieldN(\"deal.closed\").title('Deal?').scale({ range: ['grey', 'blue'] }).legend(null),\n vl.y().fieldO(\"offer.count\").axis({ title: 'Number of Offers' }).sort('descending'),\n vl.tooltip(['company.name', 'offer.count', 'deal.amount', 'deal.valuationRatio'])\n ).config(defaultChartConfig)\n .width(450)\n .render()\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`## Additional Deal Breakdowns\nSince all the data cleaning has been done, below are a couple more ways to view the deals. Choose the dimension to chart with the first dropdown, and the sort order with the second dropdown.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"md`**Breakdown Dimension**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"viewof breakdown = select([\"State\", \"Subcategory\", \"First Letter of Company\", \"Company Size\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"md`**Chart Sort**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"viewof breakdownSort = select([\"Default\", \"Amount\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"vl.markBar({ cornerRadius: 2 })\n .data(data)\n .encode(\n vl.y().fieldN(breakdownConfig.field).axis({ title: breakdownConfig.label }).sort(breakdownSort === 'Amount' ? '-x' : 'ascending'),\n vl.x().count().axis({ title: 'Number of Appearances' }),\n vl.color().fieldO(\"deal.closed\").scale({ domain: [true, false], range: ['#584Cf2', '#bbc'] }).legend({ title: 'Deal Closed' })\n )\n .config(defaultChartConfig)\n .render() ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1435,"value":"md`\n## Twitter Word Clouds\nI built a service to generate Twitter word clouds based on a **users' previous 500 Tweets**. The service builds on top of this open source Python word cloud generator. \n\nNote the word cloud is based on absolute count (minus stop words), not tf-idf.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"errors = md`### Errors in original dataset\n- **Aira** - Deal amount per shark should be 166667\n- **Circadian Optics** - Deal amount per shark should be 400000\n- **Gallant** - Deal amount per shark should be 250000\n- **IReTron** - Total deal amount should be 100000\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"md`#### Data Import and Cleaning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"ds = d3.csvParse(await FileAttachment(\"SharkTankDataCleaned@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"stateCount = data.reduce((acc, row) => {\n if (acc[row.company.state]) {\n acc[row.company.state]++\n } else {\n acc[row.company.state] = 1\n }\n return acc\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"sharks = ['Barbara', 'Mark', 'Lori', 'Robert', 'Daymond', 'Kevin', 'Guest']","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"partnerDeals = dealsByShark.reduce((acc, sharkDeals) => {\n const deals = sharkDeals.deals.map(d => ({\n partner: sharkDeals.name,\n ...d\n }))\n return acc.concat(deals)\n}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`#### Vis Libraries and Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-sankey@0.12\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"import {usa} from '@uwdata/cartographic-visualization'","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"defaultChartConfig = ({\n font: 'lato',\n background: 'white',\n title: { fontSize: 13 },\n axis: { labelFont: 'lato', gridColor: 'white', gridWidth: 2.5, domain: false, tickColor: '#c4b4d2', labelColor: '#647492', tickSize: 3, tickCount: 6, titlePadding: 10, labelPadding: 5, titleColor: '#344462', titleFontSize: 13 },\n padding: 10,\n view: { fill: '#F7FAFF', stroke: 'white' },\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"stateNames = d3.tsvParse(await FileAttachment(\"us-state-names.tsv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"stateNamesMap = stateNames.reduce((acc, st) => {\n acc[st.code] = st.id\n return acc\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"import {select} from \"@robert-moore/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"breakdownConfig = {\n if (breakdown === 'First Letter of Company') {\n return {\n field: \"company.name[0]\",\n label: \"Company Name\"\n }\n } else if (breakdown === 'Subcategory') {\n return {\n field: \"company.subcategory\",\n label: \"Company Subcategory\",\n }\n } else if (breakdown === 'Company Size') {\n return {\n field: \"company.count\",\n label: \"Company Size\",\n }\n }\n return {\n field: \"company.state\",\n label: \"Company State\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"dealsByShark = sharks.map(shark => {\n return {\n name: shark,\n deals: data.filter(d => d.deal.partners.includes(shark))\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"md`#### Vis Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"drawPath = (x1, y1, x2, y2) => {\n const breadcrumbs = [];\n breadcrumbs.push(`M${x1},${y1}`);\n breadcrumbs.push(`L${x1}, ${y1 - 20}`);\n breadcrumbs.push(`L${x2}, ${y1 - 20}`);\n breadcrumbs.push(`L${x2}, ${y2}`);\n return breadcrumbs.join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"// who is hungry for equity vs lower money\npartnershipMatrix = {\n const partnerships = data.filter(d => d.deal.closed).map(d => d.deal.partners)\n const sharks = ['Barbara', 'Mark', 'Lori', 'Robert', 'Daymond', 'Kevin', 'Guest']\n const matrix = {}\n sharks.forEach(primaryShark => {\n matrix[primaryShark] = { Barbara: 0, Mark: 0, Lori: 0, Robert: 0, Daymond: 0, Kevin: 0, Guest: 0 }\n partnerships.filter(p => p.includes(primaryShark)).forEach(partnership => {\n const otherPartners = partnership.filter(s => s!== primaryShark)\n if (otherPartners.length) {\n otherPartners.forEach(secondaryShark => {\n matrix[primaryShark][secondaryShark]++\n })\n } else {\n matrix[primaryShark][primaryShark]++\n }\n })\n })\n return matrix\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"chordMatrix = {\n return sharks.map(s1 => {\n return sharks.map(s2 => partnershipMatrix[s1][s2])\n })\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}