31:T7c5,md`## Fixed price level

We have historically set a price of £1.70/mile and our average journey is around 5 miles, which gives us an average service price of £8.50. If we measured our supply and demand on an ordinary week, they would look something like the graph below.

__Dependence on day and time of week__. The x axis represents the day of the week and time of the day (we have 12 two-hour intervals for each day). The day labels on this axis are centred at 12pm (so x = 0 corresponds to 12am Monday, and the furthest x to the right is 11.59pm Sunday).

__Supply and Demand for avg. price £8.50__. On the left y axis, we have the frequency or count for both supply and demand. The orange bars represent supply and the light green bars demand. The overlap between the two is coloured in dark green. Our peek supply points are around midday on weekdays, whereas demand peaks are around 5pm on weekdays and around 10pm on the weekend (Thursday through Saturday nights).

__Modifying the price level__. The fact that we have excess in both supply and demand for certain moments during the week denotes an inefficiency in price. For example, for any excess in demand, we could slightly increase the price. This would increase supply and decrease demand, for which we have an excess. The converse also holds: if we have an excess in supply, we can reduce the price to nudge demand while reducing our supply.

We can observe the effect on supply and demand of modifying the price level using the slider below the graph. If we set a really low price, we see a market absolutely dominated by demand, where all supply is matched. On the contrary, if we establish a very high price, all demand is matched by an abundant supply. On the right y axis we see price level plotted using a dashed blue line.

`32:T61a,revenueBar = { const barWidth = 100; const barMargin = 10; const barAlign = 15; return html` Total Weekly revenue: £ 1M ` }33:T757,svg_revenue = { console.log("render svg 2") const svg = d3.select(DOM.svg(frame.width_revenue, frame.height_revenue)) const δ = 1 // small gap size svg.attr("class", "viz") const width_margin = frame.width_revenue-frame.margin_revenue.left-frame.margin_revenue.right // Draw the x and y axes. let axisContainerX = svg.append('g').call(plotVar.xAxisRevenue) let axisContainerY = svg.append('g').call(plotVar.yAxisRevenue) axisContainerX.call(axisTransform) axisContainerY.call(axisTransform) svg .append('circle') .attr('cx', frame.margin_revenue.left + (frame.width_revenue-frame.margin_revenue.left-frame.margin_revenue.right)/5*(price-7)) .attr('cy', frame.height_revenue - frame.margin_revenue.bottom - (frame.height_revenue-frame.margin_revenue.top - frame.margin_revenue.bottom)/250*summary_threshold.revenue/1e4) .attr('r', 5) .attr('stroke', 'black') .attr('fill', 'steelblue') .attr('fill-opacity', .8) svg.line = svg.append("path") .datum(revenue_vector) //.style("stroke-dasharray", "6,6") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") svg.line_horizontal = svg.append("path") .datum(revenue_vector) .style("stroke-dasharray", "3,3") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") svg.line_vertical = svg.append("path") .datum(revenue_vector_vertical) .style("stroke-dasharray", "3,3") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") // Legend // plotVar.legend(svg) return svg }34:T550,svg = { console.log("render svg 1") const svg = d3.select(DOM.svg(frame.width, frame.height)) const δ = 1 // small gap size svg.attr("class", "viz") const width_margin = frame.width-frame.margin.left-frame.margin.right const bars = svg.selectAll("g") .data(data).enter() .append("g"); // Draw the x and y axes. let axisContainerX = svg.append('g').call(plotVar.xAxis) let axisContainerY = svg.append('g').call(plotVar.yAxis) let axisContainerYR = svg.append('g').call(plotVar.yAxisRight) axisContainerX.call(axisTransform) axisContainerY.call(axisTransform) axisContainerYR.call(axisTransform) svg.supplyBars = bars.append("rect") .style("fill", d => frame.palette.supply) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left)// + width/100 * .5) svg.demandBars = bars.append("rect") .style("fill", d => frame.palette.demand) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left); svg.priceLine = svg.append("path") .datum(data) .style("stroke-dasharray", "6,6") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") // Legend plotVar.legend(svg) return svg }35:T735,md`

So far we have seen the effect that modifying the price has on supply and demand. Let's add a level of complexity to our analysis. In this section, we study the _elasticity_ for both supply and demand to find the _optimal_ price curve, understood as the price function where supply exactly matches demand (note that as we mentioned before this might not be the price curve that maximises revenue).

We start with the same average price that we had before, £8.50 per journey. For this price level, the supply and demand functions are given in the graph below.

__Modifying the minimum price.__ By moving the _minimum price_ slider, we allow the price to take values as low as defined by the slider (note how the blue dashed curve, the average price as a function of the time period, varies as the minimum price is modified). In those time slots when we have excess in supply, allowing this price reduction results in a reduction in supply and an increase in demand. When they both meet, the _optimal_ price is found. This definition of optimal price does not imply revenue maximality, as reducing the price of each service has a negative impact on revenue.

__Modifying the maximum price.__ By moving the _maximum price_ slider, we allow the price to take values as low as defined by the slider (note how the blue dashed curve, the average price as a function of the time period, varies as the maximum price is modified). In those time slots when we have excess in demand, allowing this price increase results in a reduction in demand and an increase in supply. When they both meet, the _optimal_ price is found. In this case, this optimum also corresponds to the maximal revenue price.

`36:T46d,revenueBar2 = { const barWidth = 100; const barMargin = 10; const barAlign = 15; return html` ` }37:T55e,svg2 = { const svg = d3.select(DOM.svg(frame.width, frame.height)) const s = 2*1.5e-2 // scale unit const δ = 1 // small gap size svg.attr("class", "viz") const width_margin = frame.width-frame.margin.left-frame.margin.right const bars = svg.selectAll("g") .data(data).enter() .append("g"); // Draw the x and y axes. let axisContainerX = svg.append('g').call(plotVar.xAxis) let axisContainerY = svg.append('g').call(plotVar.yAxis) let axisContainerYR = svg.append('g').call(plotVar.yAxisRight) axisContainerX.call(axisTransform) axisContainerY.call(axisTransform) axisContainerYR.call(axisTransform) var x = bars.data.supply; svg.supplyBars = bars.append("rect") .style("fill", d => frame.palette.supply) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left)// + width/100 * .5) svg.demandBars = bars.append("rect") .style("fill", d => frame.palette.demand) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left); svg.line = svg.append("path") .datum(data) .style("stroke-dasharray", "6,6") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") plotVar.legend(svg) return svg }38:T47a,md`

In the two previous visualisations we discussed __overall__ revenue. This overall revenue corresponds to the total amount exchanged by passengers and taxi drivers when using __TaxiBest__'s services. However, __TaxiBest__'s revenue is only part of this quantity, which is taken in the form of a _commission percentage_ on the price of the service.

In the graph below, we analyse the combined impact of a __price level__ and __commission percentage__ on supply and demand, and we find the best commission percentage curve for each price level. The price level slider allows us to set a specific constant price at the desired level, while the commission percentage slider specifies what maximum percentage of the set price is taken as a commission for __TaxiBest__. The dashed blue horizontal line shows the price level specified by the slider, with values in the right y axis. The dashed red horizontal line shows the commission percentage paid to __TaxiBest__ in each transaction, with scale shown in the left y axis. We discuss in detail three different scenarios.

`39:T5eb,revenueBar3 = { const barWidth = 100; const barMargin = 10; const barAlign = 15; return html` ` }3a:T69b,svg3 = { const svg = d3.select(DOM.svg(frame.width, frame.height)) const s = 2*1.5e-2 // scale unit const δ = 1 // small gap size svg.attr("class", "viz") const width_margin = frame.width-frame.margin.left-frame.margin.right const bars = svg.selectAll("g") .data(data).enter() .append("g"); // Draw the x and y axes. let axisContainerX = svg.append('g').call(plotVar.xAxis) let axisContainerY = svg.append('g').call(plotVar.yAxisCommission) let axisContainerYR = svg.append('g').call(plotVar.yAxisRight) axisContainerX.call(axisTransform) axisContainerY.call(axisTransform) axisContainerYR.call(axisTransform) var x = bars.data.supply; svg.supplyBars = bars.append("rect") .style("fill", d => frame.palette.supply) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left);// + width/100 * .5); svg.demandBars = bars.append("rect") .style("fill", d => frame.palette.demand) .attr("width", width_margin/100) .attr("x", d => d.h * width_margin + frame.margin.left); svg.priceLine = svg.append("path") .datum(data) .style("stroke-dasharray", "6,6") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); svg.commissionLine = svg.append("path") .datum(data) .style("stroke-dasharray", "5,5") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); plotVar.legend(svg) plotVar.legend_commission(svg) return svg }3b:T6b2,md`## Maths

Although the main motivation for this notebook is to explain in a visual way the interactions between price, supply and demand, we also would like to discuss a bit the mathematics behind the graphs.

### No Sensitivity / No Commission Equations We start introducing some notation: - ${tex`s(p)`} is the supply ${tex`s`} as a function of ${tex`p`} - ${tex`d(p)`} is the demand ${tex`d`} as a function of ${tex`p`} - ${tex`s_0`} and ${tex`d_0`} are the observed supply and demand, respectively, which are different for every time period so they implicitly depend on time ${tex`t`} - ${tex`p_0`} is the observed average price, which we assume to be equal to £8.50

Now we need to state our supply and demand functions. The supply function ${tex`s(p)`} should be a non-negative, monotonically increasing function of the price ${tex`p > 0`}, whereas the demand function ${tex`d(p)`} needs to be a non-negative, monotonically decreasing function of the price ${tex`p > 0`}. The most simple pair of equations that satisfy such constraints are

${tex.block` \begin{aligned} s(p) = s_0 \cfrac{p}{p_0}, \hspace{1cm} d(p) = d_0 \cfrac{p_0}{p}, \tag{1} \end{aligned} `}

where ${tex`s(p_0) = s_0`} and ${tex`d(p_0) = d_0`}, as expected. Equating ${tex`s(p)`} to ${tex`d(p)`} we can find the equilibrium price that matches supply and demand for each pair ${tex`s_0`}, ${tex`d_0`} and an observed price ${tex`p_0`},

${tex.block` s_0 \cfrac{p_{\textnormal{opt}}}{p_0} = d_0 \cfrac{p_0}{p_{\textnormal{opt}}} \quad \Longrightarrow \quad p_{\textnormal{opt}} = p_0\sqrt{\cfrac{d_0}{s_0}}. \tag{2} `} `3c:T988,md` ### Sensitivity / No Commission Equations

We introduce and additional parameter ${tex`\Delta > 0`} to allow a more complex relationship between price versus supply and demand. This parameter measures the _elasticity_ of supply and demand versus price. In this model, the price variation ${tex`p-p_0`} is multiplied by ${tex`\Delta`},

${tex.block` s(p, \Delta) = s_0 \cfrac{(p-p_0)\Delta + p_0}{p_0}, \qquad d(p, \Delta) = d_0 \cfrac{p_0}{(p-p_0)\Delta + p_0}. \tag{3} `}

As ${tex`\Delta`} increases, both supply and demand vary at a larger rate with price variations. Conversely, when ${tex`\Delta`} decreases, supply and demand are less sensitive to price variations. When ${tex`\Delta = 1`}, we have the same model as in equation (1). Finally, as ${tex`\Delta \rightarrow 0`}, demand and supply are independent to price variations.

Depending on the value of ${tex`\Delta`}, the model in (3) is valid for different price intervals. In general, we are not interested (and it does not make sense) in building a valid supply-demand model for any price ${tex`p > 0`}. For example, testing the supply when selling a pound of tomatoes at £100 is of limited value, as that scenario is very far (and unrealistic) from the current agreed market price. Hence, when we know market price ${tex`p_0`} for a product or service, we are interested in testing the supply-demand pair for prices in a neighbourhood of ${tex`p_0`}. It is out of the scope of this notebook to discuss the relation between the sensitivity ${tex`\Delta`} and the price range where the model is valid.

To find the equilibrium price we equate supply and demand, ${tex.block` s_0 \cfrac{(p_{\textnormal{opt}}-p_0)\Delta + p_0}{p_0} = d_0 \cfrac{p_0}{(p_{\textnormal{opt}}-p_0)\Delta + p_0}, \tag{4} `} to obtain ${tex.block` p_{\textnormal{opt}} = \cfrac{p_0\left(\sqrt{\cfrac{d_0}{s_0}} - 1 + \Delta\right)}{\Delta}. \tag{5} `} We have ${tex`p_{\textnormal{opt}} \rightarrow p_0`} as ${tex`\Delta \rightarrow \infty`}. Now, if ${tex`d_0 \geq s_0`}, equation (5) gives a valid solution for any value ${tex`\Delta > 0`}, and we have ${tex`p_{\textnormal{opt}} \rightarrow \infty`} as ${tex`\Delta \rightarrow 0`}. However, if ${tex`d_0 < s_0`} then equation (5) is valid as long as ${tex`\Delta > 1 - \sqrt{d_0/s_0} > 0`}. `3d:Tda2,md` ### Sensitivity / Commission Equations In our final model we include the following parameters: - ${tex`\Delta_s`} is the sensitivity of the supply - ${tex`\Delta_d`} is the sensitivity of the demand - ${tex`c`} is the percentage taken as commission for __TaxiBest__, ${tex`1 \geq c \geq 0`}

With this notation, we redefine the sensitivity parameters to account for differences in sensitivity for supply and demand. Also, the commission modifies the final price seen by the suppliers in the form of the multiplicative factor ${tex`(1-c)`}. Therefore, the supply and demand equations read

${tex.block` \begin{aligned} s(p, \Delta_s, c) &= s_0 \cfrac{(p(1-c)-p_0)\Delta_s + p_0}{p_0}, \\[10pt] \tag{6} d(p, \Delta_d) &= d_0 \cfrac{p_0}{(p-p_0)\Delta_d + p_0}. \end{aligned} `}

Note that the demand function ${tex`d(p, \Delta_d)`} is independent of the commission ${tex`c`}, as passengers pay the same regardless of it. The supply-demand intersection for this model is

${tex.block` s_0 \cfrac{(p(1-c)-p_0)\Delta_s + p_0}{p_0} = d_0 \cfrac{p_0}{(p-p_0)\Delta_d + p_0}. \tag{7} `}

__Optimal Commission ${tex`c_{\textnormal{opt}}`}__. We finish the notebook analysing the commission that maximises revenue for a given price ${tex`p`}. We can maximise the revenue ${tex` r(s, d, p, \Delta_s, \Delta_d)`} by solving the optimisation problem:

${tex.block` r(s, d, p, \Delta_s, \Delta_d) = \max_c \left\{\min(s(p, c, \Delta_s), d(p, \Delta_d))cp\right\}. \tag{8} `}

The supply ${tex`s`} and demand ${tex`d`} are functions of the commission, the price and the sensitivies. How do we solve this problem? First, we compute the commission value were supply and demand intersect for a certain price ${tex`p`} ${tex.block` c_i = \cfrac{\cfrac{(p-p_0)\Delta_s + p_0}{p_0} s_0-\cfrac{p_0}{(p-p_0)\Delta_d + p_0} d_0}{\cfrac{p}{p_0}\Delta_s s_0}. \tag{10} `} We assume that the specified values for ${tex`\{p_0, p, \Delta_s, \Delta_d\}`} result in a meaningful ${tex`c_i \in [0, 1]`}. This assumption is realistic, as one can prove that for any ${tex`\Delta_s, \Delta_d > 0`} we can find a neighbourhood of ${tex`p_0`} where ${tex`c_i \in [0, 1]`}. Since the supply is monotonically decreasing with ${tex`c`}, any value ${tex`c > c_i`} will provide a revenue limited by supply, ${tex`\min(s, d) = s`}. Conversely, for ${tex`c \leq c_i`} we have ${tex`\min(s, d) = d`}. We now solve the optimisation problem (8) on each side of ${tex`c_i`} and then join the solutions.

For ${tex`c \leq c_i`}, the value that maximises revenue is precisely ${tex`c_i`}, as demand is independent of ${tex`c_i`} and we want the commission term in (8) to be as high as possible. For ${tex`c > c_i`}, substituting the expression of the supply in terms of the commission, we obtain a quadratic equation. Deriving it with respect to ${tex`c`} and equating it to zero, we obtain the critical point ${tex.block` c_s = \cfrac{(p-p_0)\Delta_s + p_0}{2p\Delta_s}. `}

Finally, we calculate ${tex.block` \begin{aligned} r_d &= d(p, \Delta_d)c_ip,\\[10pt] r_s &= s(p,c_s, \Delta_s)c_sp. \end{aligned}\tag{11} `} Taking the maximum between the two, we find the solution to problem (8), ${tex.block` r_{\textnormal{opt}} = \max\{r_s, r_d\},\quad c_{\textnormal{opt}} = \argmax_{c \in \{c_i, c_s\}} r(s, d, p, \Delta_s, \Delta_d, c).\tag{12} `} `3e:T764,class Transformations { constructor(){ } //==================================================== //==================================================== // Tranformation for Supply - Demand - Sensitivity //==================================================== t_supply_sensitivity(p, d, s) { return d.supply * ((p - p0) * s + p0) / p0 } t_demand_sensitivity(p, d, s) { return d.demand / ((p - p0) * s + p0) * p0 } //==================================================== // Tranformation for Supply - Demand - Optimal //==================================================== // Sensitivity t_supply_optimal_sensitivity(d){ return d.supply / p0 * ((t_optimal_price_sensitivity(d) - p0)*sensitivity + p0) } t_demand_optimal_sensitivity(d){ return d.demand * p0 / ((t_optimal_price_sensitivity(d) - p0)*sensitivity + p0) } //==================================================== // Commission //==================================================== t_commission(d){ let comm = { c1: (this.t_supply_sensitivity(price_commission, d, sensitivity_supply) - this.t_demand_commission(d)) /(price_commission/p0)/sensitivity_supply/d.supply, //c1: (d.supply*price_commission/p0 - this.t_demand_threshold(price_commission, d)) // /(price_commission/p0)/d.supply, c2: ((price_commission-p0)*sensitivity_supply + p0)/2/price_commission/sensitivity_supply } return Math.min(Math.max(Math.max(comm.c1, comm.c2), 0), max_commission) } t_supply_commission(d){ return d.supply / p0 * ((price_commission*(1-this.t_commission(d)) - p0)*sensitivity_supply + p0) //return d.supply / p0 * ((price_commission*(1-this.t_commission(d)) - p0) + p0) } t_demand_commission(d){ return this.t_demand_sensitivity(price_commission, d, sensitivity_demand) } }3f:T1863,class PlotVariables { constructor(){ //=================================================================== // Line plots //=================================================================== // PlotVariables.line_price = d3.line() // .defined(d => !isNaN(d.h)) // .x(d => PlotVariables.xScale(d.h)) // .y(d => PlotVariables.yScale(price)); //=================================================================== // Scale //=================================================================== PlotVariables.xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.h)) .range([frame.margin.left, frame.width - frame.margin.right]); PlotVariables.xScaleRev = d3.scaleLinear() .domain([7, 12]) .range([frame.margin_revenue.left, frame.width_revenue - frame.margin_revenue.right]); PlotVariables.yScale = d3.scaleLinear() .domain([0, 16]).nice() .range([frame.height - frame.margin.bottom, frame.margin.top]); PlotVariables.yScaleCommission = d3.scaleLinear() .domain([0, .5]).nice() .range([frame.height - frame.margin.bottom, frame.margin.top]); PlotVariables.dayScale = d3.scaleBand() .domain(['Mon','Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']) .range([frame.margin.left, frame.width - frame.margin.right]); PlotVariables.countScale = d3.scaleLinear() .domain([0, 13000]) .range([frame.height - frame.margin.bottom, frame.margin.top]); PlotVariables.commissionScale = d3.scaleLinear() .domain([0, .5]) .range([frame.height - frame.margin.bottom, frame.margin.top]); PlotVariables.revenueScale = d3.scaleLinear() .domain([0, 2.5]) .range([frame.height_revenue - frame.margin_revenue.bottom, frame.margin_revenue.top]); } //=================================================================== // Axis //=================================================================== xAxis(g) { g.attr('transform', `translate(0,${frame.height - frame.margin.bottom})`) .call(d3.axisBottom(PlotVariables.dayScale)) // Add label .append('text') .attr('class', 'axis-label') .text('Day of the week') .attr('x', frame.margin.left + (frame.width - frame.margin.left - frame.margin.right) / 2) .attr('y', 50) // Relative to the y axis. } xAxisRevenue(g) { g.attr('transform', `translate(0,${frame.height_revenue - frame.margin_revenue.bottom})`) .call(d3.axisBottom(PlotVariables.xScaleRev)) // Add label .append('text') .attr('class', 'axis-label') .text('Avg. Price (£)') .attr('x', frame.margin_revenue.left + (frame.width_revenue - frame.margin_revenue.left - frame.margin_revenue.right) / 2) .attr('y', 50) // Relative to the y axis. } yAxis(g) { g.attr('transform', `translate(${frame.margin.left},0)`) .call(d3.axisLeft(PlotVariables.countScale)) // Add label .append('text') .attr('class', 'axis-label') .text('Frequency') .attr('transform', 'rotate(-90)') .attr('x', -(frame.margin.top + (frame.height - frame.margin.top - frame.margin.bottom) / 2)) .attr('y', -70) // Relative to the y axis. } yAxisCommission(g) { g.attr('transform', `translate(${frame.margin.left},0)`) .call(d3.axisLeft(PlotVariables.commissionScale)) // Add label .append('text') .attr('class', 'axis-label') .text('Commission') .attr('transform', 'rotate(-90)') .attr('x', -(frame.margin.top + (frame.height - frame.margin.top - frame.margin.bottom) / 2)) .attr('y', -60) // Relative to the y axis. } yAxisRight(g) { g.attr('transform', `translate(${frame.width - frame.margin.right},0)`) .call(d3.axisRight(PlotVariables.yScale)) // Add label .append('text') .attr('class', 'axis-label') //.text('holaquetal') .text('Avg. Price (£)') .attr('transform', 'rotate(-90)') .attr('x', -(frame.margin.top + (frame.height - frame.margin.top - frame.margin.bottom) / 2)) .attr('y', 50) // Relative to the y axis. } yAxisRevenue(g) { g.attr('transform', `translate(${frame.margin_revenue.left},0)`) .call(d3.axisLeft(PlotVariables.revenueScale)) // Add label .append('text') .attr('class', 'axis-label') .text('Revenue (£m)') .attr('transform', 'rotate(-90)') .attr('x', -(frame.margin_revenue.top + (frame.height_revenue - frame.margin_revenue.top - frame.margin_revenue.bottom) / 2)) .attr('y', -60) // Relative to the y axis. } //=================================================================== // Legend //=================================================================== legend(g) { // Demand g.append("rect") .style("fill", d => frame.palette.demand) .attr("height", 10) .attr("width", 10) .attr("y", frame.height/20) .attr("x", frame.width/8); g.append("text") .attr("y", frame.height/20 + 10) .attr("x", frame.width/8 + 20) .text("Demand"); // Supply g.append("rect") .style("fill", d => frame.palette.supply) .attr("height", 10) .attr("width", 10) .attr("y", frame.height/10) .attr("x", frame.width/8); g.append("text") .attr("y", frame.height/10 + 10) .attr("x", frame.width/8 + 20) .text("Supply"); // Price g.append("rect") .style("fill", "steelblue") .attr("height", 2) .attr("width", 20) .attr("y", frame.height/20) .attr("x", frame.width-2*frame.margin.right); g.append("text") .attr("y", frame.height/20 + 8) .attr("x", frame.width-2*frame.margin.right + 25) .text("Price"); return g } //=================================================================== // Legend //=================================================================== legend_commission(g) { // Demand g.append("rect") .style("fill", "red") .attr("height", 2) .attr("width", 20) .attr("y", 3*frame.height/20+3) .attr("x", frame.width/8-5); g.append("text") .attr("y", 3*frame.height/20 + 10) .attr("x", frame.width/8 + 20) .text("Commission"); return g } }40:Tcbb,text_dict = { var text = { 'Scenario 1':["

\ __ Scenario 1 : supply-driven market__. We set a constant price level of £8.20, while keeping the commission percentage to zero. In this situation, demand is well above supply, even without commissions. Also, __TaxiBest__'s revenue is obviously zero, as no quantity is taken as commission. Now let's move the maximum commission slider to the right. As we move it, we observe two effects:

\n", "- A reduction in supply (as the driver's final revenue is reduced due to the commission).", "- An increase in the optimal commission curve.\n", "

\ Also, when the maximum commission allowed goes above 15%, the optimal commission curve stabilises and does not continue increasing. This is because the increase in revenue due to higher percentage does not compensate for the lost supply due to lower revenue per service for drivers. In general, in a supply-driven market, the commission is set to a value that does not inflict a significant loss in supply, as it is scarce. We can therefore expect relatively flat values for the commission percentage.

"].join("\n"), 'Scenario 2': "

\ __ Scenario 2: no clear dominance between supply and demand__. We set a constant price level of £8.50, while keeping the commission percentage to zero. We observe a similar supply-demand situation that we had in the first visualisation, where we have time periods when supply is dominant and vice versa. As we move the maximum percentage slider to the right, we observe how the supply decreases while the optimal curve increases. The main difference is that now the optimal commission curve is not flat. For the periods when supply is in excess, we can allow larger commissions to push it down while obtaining a larger revenue, until demand and supply are matched.

", 'Scenario 3': "

\ __ Scenario 3: demand-driven market__. We set the price level slider to £9.50 while keeping the commission percentage to zero, so supply is clearly dominant in almost all time periods. We start increasing the slider for the maximum commission price up to 50%. What we see is very interesting: there are significant variations (up to 17 percentage points) in the optimal commission curve. Why? Because we have an excess in supply. Depending on the level of excess, we can penalise it by setting one commission level or another one. In those cases where we have a huge supply excess, our commission can be as high as 37%.
\ In general, in a demand-driven market, we can set higher commissions for the supply, as demand is the limiting factor. These commissions will vary greatly depending on that excess in supply, and we can push them until we reach equality between supply and demand. This is a likely scenario in off-peak times.

\ In this exploration we have not described the combined effect of varying prices and varying commission percentages to maximise revenue for any supply-demand pair in time, which is the situation to be addressed in a realistic scenario.

" }; return text }41:Teec,data = [ {h: 0.0, supply: 2603.9, demand: 2600.0}, {h: 0.0119, supply: 2635.0, demand: 2600.0}, {h: 0.02381, supply: 2812.0, demand: 2600.0}, {h: 0.03571, supply: 3459.6, demand: 2600.6}, {h: 0.04762, supply: 4936.5, demand: 2610.0}, {h: 0.05952, supply: 6857.4, demand: 2695.2}, {h: 0.07143, supply: 7800.0, demand: 3148.1}, {h: 0.08333, supply: 6857.4, demand: 4513.0}, {h: 0.09524, supply: 4936.5, demand: 6649.8}, {h: 0.1071, supply: 3459.6, demand: 7800.0}, {h: 0.119, supply: 2812.0, demand: 6649.8}, {h: 0.131, supply: 2635.3, demand: 4513.0}, {h: 0.1429, supply: 2607.8, demand: 3148.1}, {h: 0.1548, supply: 2635.3, demand: 2695.2}, {h: 0.1667, supply: 2812.0, demand: 2610.1}, {h: 0.1786, supply: 3459.6, demand: 2601.3}, {h: 0.1905, supply: 4936.5, demand: 2610.1}, {h: 0.2024, supply: 6857.4, demand: 2695.2}, {h: 0.2143, supply: 7800.0, demand: 3148.1}, {h: 0.2262, supply: 6857.4, demand: 4513.0}, {h: 0.2381, supply: 4936.5, demand: 6649.8}, {h: 0.25, supply: 3459.6, demand: 7800.0}, {h: 0.2619, supply: 2812.0, demand: 6649.8}, {h: 0.2738, supply: 2635.3, demand: 4513.0}, {h: 0.2857, supply: 2607.8, demand: 3148.1}, {h: 0.2976, supply: 2635.3, demand: 2695.2}, {h: 0.3095, supply: 2812.0, demand: 2610.1}, {h: 0.3214, supply: 3459.6, demand: 2601.3}, {h: 0.3333, supply: 4936.5, demand: 2610.1}, {h: 0.3452, supply: 6857.4, demand: 2695.2}, {h: 0.3571, supply: 7800.0, demand: 3148.1}, {h: 0.369, supply: 6857.4, demand: 4513.0}, {h: 0.381, supply: 4936.5, demand: 6649.8}, {h: 0.3929, supply: 3459.6, demand: 7800.0}, {h: 0.4048, supply: 2812.0, demand: 6649.8}, {h: 0.4167, supply: 2635.3, demand: 4513.0}, {h: 0.4286, supply: 2607.8, demand: 3148.1}, {h: 0.4405, supply: 2635.3, demand: 2695.2}, {h: 0.4524, supply: 2812.0, demand: 2610.1}, {h: 0.4643, supply: 3459.6, demand: 2601.3}, {h: 0.4762, supply: 4936.5, demand: 2610.1}, {h: 0.4881, supply: 6857.4, demand: 2695.2}, {h: 0.5, supply: 7800.0, demand: 3148.1}, {h: 0.5119, supply: 6857.4, demand: 4515.5}, {h: 0.5238, supply: 4936.5, demand: 6700.0}, {h: 0.5357, supply: 3459.6, demand: 8317.8}, {h: 0.5476, supply: 2812.0, demand: 9391.2}, {h: 0.5595, supply: 2635.3, demand: 1.1965e+04}, {h: 0.5714, supply: 2607.8, demand: 1.3548e+04}, {h: 0.5833, supply: 2635.3, demand: 1.0147e+04}, {h: 0.5952, supply: 2812.0, demand: 5351.5}, {h: 0.6071, supply: 3459.6, demand: 3119.1}, {h: 0.619, supply: 4936.5, demand: 2660.3}, {h: 0.631, supply: 6857.4, demand: 2697.7}, {h: 0.6429, supply: 7800.0, demand: 3148.2}, {h: 0.6548, supply: 6857.4, demand: 4516.7}, {h: 0.6667, supply: 4936.5, demand: 6725.1}, {h: 0.6786, supply: 3459.6, demand: 8576.7}, {h: 0.6905, supply: 2812.0, demand: 1.0762e+04}, {h: 0.7024, supply: 2635.2, demand: 1.5691e+04}, {h: 0.7143, supply: 2605.8, demand: 1.8748e+04}, {h: 0.7262, supply: 2617.8, demand: 1.3873e+04}, {h: 0.7381, supply: 2706.0, demand: 6722.2}, {h: 0.75, supply: 3029.8, demand: 3377.3}, {h: 0.7619, supply: 3768.3, demand: 2675.3}, {h: 0.7738, supply: 4728.7, demand: 2603.8}, {h: 0.7857, supply: 5200.0, demand: 2600.2}, {h: 0.7976, supply: 4728.7, demand: 2602.5}, {h: 0.8095, supply: 3768.3, demand: 2650.2}, {h: 0.8214, supply: 3029.8, demand: 3117.8}, {h: 0.8333, supply: 2706.0, demand: 5341.4}, {h: 0.8452, supply: 2617.5, demand: 1.0052e+04}, {h: 0.8571, supply: 2601.9, demand: 1.3e+04}, {h: 0.869, supply: 2600.1, demand: 1.0052e+04}, {h: 0.881, supply: 2600.0, demand: 5341.4}, {h: 0.8929, supply: 2600.0, demand: 3117.8}, {h: 0.9048, supply: 2600.0, demand: 2650.2}, {h: 0.9167, supply: 2600.0, demand: 2602.5}, {h: 0.9286, supply: 2600.0, demand: 2600.1}, {h: 0.9405, supply: 2600.0, demand: 2600.0}, {h: 0.9524, supply: 2600.0, demand: 2600.0}, {h: 0.9643, supply: 2600.0, demand: 2600.0}, {h: 0.9762, supply: 2600.0, demand: 2600.0}, {h: 0.9881, supply: 2600.0, demand: 2600.0}, ]42:[] 2f:{"title":" Pricing Algorithm v4 ","cells":[{"id":0,"value":"md`# Pricing Algorithm v4 `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"md` \n

\nIn this Play-ML notebook we explore how revenue is impacted through dynamic pricing for products or services whose supply and demand varies over time.\n

\n\n

\nAssume we are __TaxiBest__, the best fictitious taxi company in the UK. On a typical week, our supply (taxi drivers) and demand (passengers looking for a taxi) vary significantly depending on the day of the week and time of the day. This disparity between supply and demand results in missed revenue so we would like to explore whether we can reduce this disparity through a dynamic pricing strategy - charging less during times of over supply, and charging more at times of increased demand. \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2153,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2234,"value":"svg.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"viewof price = slider({min: 7, \n max: 12,\n value: p0,\n format: v => `£${v.toFixed(2)}`,\n description: 'price'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2250,"value":"s = 2*1.5e-2 // scale unit","pinned":false,"hidden":false,"mode":"ojs"},{"id":2186,"value":"md`\n

\n__Revenue__. The overall revenue generated during a week corresponds to the count of matched supply-demand pairs (dark green bars) for each two-hour period times the average price of the service.\n

\n\n

\nIncreasing the price when we have an excess in demand always has a positive effect on revenue. However, things are a bit more tricky for an excess in supply. When lowering the price, we definitely increase the count of matched supply-demand pairs, however, we also reduce the price paid in each service, so the product between the two (which gives the revenue) could be lower. In the bar below we have the overall revenue generated by a fixed price level (see effect of modifying price on the slider).\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2215,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3143,"value":"svg_revenue.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3138,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2539,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3172,"value":"$$a0 = {\n svg_revenue.line\n .attr(\"d\", line_revenue);\n svg_revenue.line_horizontal\n .attr(\"d\", line_revenue_horizontal);\n svg_revenue.line_vertical\n .attr(\"d\", line_revenue_vertical);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2243,"value":"$$a1 = {\n // update values when price changes\n svg.priceLine.attr(\"d\", d3.line()\n .defined(d => !isNaN(d.h))\n .x(d => PlotVariables.xScale(d.h))\n .y(d => PlotVariables.yScale(price)));\n \n svg.supplyBars\n .attr(\"height\", d => tClass.t_supply_sensitivity(price, d, sensitivity) * s)\n .attr(\"y\", d => frame.height - tClass.t_supply_sensitivity(price, d, sensitivity) * s - frame.margin.bottom);\n \n svg.demandBars\n .attr(\"height\", d => tClass.t_demand_sensitivity(price, d, sensitivity) * s)\n .attr(\"y\", d => frame.height - tClass.t_demand_sensitivity(price, d, sensitivity) * s - frame.margin.bottom);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2271,"value":"$$a2 = {\n // update revenue bar\n d3.select(revenueBar).select(\"#revenue\").attr(\"width\", summary_threshold.revenue/5e3)\n d3.select(revenueBar).select(\"#revenueText\").html(`Weekly revenue: £ ${Math.round(summary_threshold.revenue/1e4)/100}M`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`## Optimal price curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2197,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"svg2.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"viewof min_price = slider({min: 6.5, \n max: 12.5,\n value: p0,\n format: v => `£${v.toFixed(2)}`,\n description: 'Minimum price'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2207,"value":"viewof max_price = slider({min: 6.5,\n max: 12.5,\n value: p0,\n format: v => `£${v.toFixed(2)}`,\n description: 'Maximum price'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"md`\n

\n__Revenue.__\nThe total weekly revenue is defined as the number of matched pairs for supply-demand times the price paid in each transaction. We can use the sliders to play with the minimum and maximum prices allowed and observe the impact of these decisions on the total revenue. As we can see, in this particular case the optimal price curve as we defined it, this is, where demand and supply meet, corresponds to the price curve that maximises revenue.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2418,"value":"$$a3 = {\n svg2.supplyBars\n .attr(\"height\", d => tClass.t_supply_optimal_sensitivity(d) * s)\n .attr(\"y\", d => frame.height - tClass.t_supply_optimal_sensitivity(d) * s - frame.margin.bottom);\n svg2.demandBars\n .attr(\"height\", d => tClass.t_demand_optimal_sensitivity(d) * s)\n .attr(\"y\", d => frame.height - tClass.t_demand_optimal_sensitivity(d) * s - frame.margin.bottom);\n svg2.line\n .attr(\"d\", line_optimal_sensitivity);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2488,"value":"$$a4 = {\n d3.select(revenueBar2).select(\"#revenue\").attr(\"width\", summary_optimal.revenue/1e4)\n d3.select(revenueBar2).select(\"#revenueText\").html(`Total Weekly revenue: £ ${Math.round(summary_optimal.revenue/1e4)/100}M`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1789,"value":"md`## Optimal commission curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3007,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3408,"value":"viewof scenario = radio({\n options:[\"Scenario 1\", \"Scenario 2\", \"Scenario 3\"],\n value: \"Scenario 1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3019,"value":"md`\n${text_dict[scenario]}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2633,"value":"md`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"svg3.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2608,"value":"viewof price_commission = slider({min: 8.2, \n max: 9.5,\n value: price_dict[scenario],\n format: v => `£${v.toFixed(2)}`,\n description: 'Price level'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"viewof max_commission = slider({min: 0, \n max: .5,\n value: 0*price_dict[scenario],\n format: v => `£${v.toFixed(2)}`,\n description: 'Max commission'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2674,"value":"md`\n__Revenue__. The two sliders allow us to compute the weekly revenue obtained from the commission percentage. Once the maximum commission allowed is above the maximum of the optimal commission curve, pushing the slider further does not impact the commission revenue.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1802,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"$$a6 = {\n svg3.supplyBars \n .attr(\"y\", d => frame.height - tClass.t_supply_commission(d) * s - frame.margin.bottom)\n .attr(\"height\", d => tClass.t_supply_commission(d) * s);\n svg3.demandBars\n .attr(\"height\", d => tClass.t_demand_commission(d) * s)\n .attr(\"y\", d => frame.height - tClass.t_demand_commission(d) * s - frame.margin.bottom);\n svg3.priceLine.attr(\"d\", line_price_commission);\n svg3.commissionLine.attr(\"d\", line_commission);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2518,"value":"$$a7 = {\n // update revenue bar 3\n d3.select(revenueBar3).select(\"#revenue\").attr(\"width\", summary_commission.revenue/5e2);\n d3.select(revenueBar3).select(\"#revenueText\").html(`Commission Weekly revenue: £ ${2*Math.round(summary_commission.revenue/1e3)}k`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2617,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2731,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2629,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"$$a8 = md`## Visualisation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1595,"value":"squares = function(w){\n let sqs = [];\n // let w = 10;\n let dxy = w-2;\n let n = width/w | 0;\n for (let i=0; i tClass.t_supply_sensitivity(price, d, sensitivity) > tClass.t_demand_sensitivity(price, d, sensitivity)), d => tClass.t_demand_sensitivity(price, d, sensitivity))),\n lim_supply: Math.floor(d3.sum(data.filter(d => tClass.t_supply_sensitivity(price, d, sensitivity) <= tClass.t_demand_sensitivity(price, d, sensitivity)), d => tClass.t_supply_sensitivity(price, d, sensitivity))),\n }\n cm.total_services = Math.floor(cm.lim_demand + cm.lim_supply)\n cm.revenue = cm.total_services*price\n return cm\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"summary_threshold = cm(price)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1409,"value":"summary_optimal = {\n let cm = {\n rev_demand: Math.floor(d3.sum(data.filter(\n d => tClass.t_supply_optimal_sensitivity(d) > tClass.t_demand_optimal_sensitivity(d)), \n d => tClass.t_demand_optimal_sensitivity(d) * t_optimal_price_sensitivity(d))),\n rev_supply: Math.floor(d3.sum(data.filter(\n d => tClass.t_supply_optimal_sensitivity(d) <= tClass.t_demand_optimal_sensitivity(d)),\n d => tClass.t_supply_optimal_sensitivity(d) * t_optimal_price_sensitivity(d))),\n }\n cm.revenue = Math.floor(cm.rev_demand + cm.rev_supply)\n return cm\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"summary_commission = {\n let cm = {\n rev_demand: Math.max(Math.floor(d3.sum(data.filter(\n d => tClass.t_supply_commission(d) > tClass.t_demand_commission(d)), \n d => tClass.t_demand_commission(d) * price_commission * tClass.t_commission(d))), 0),\n rev_supply: Math.max(Math.floor(d3.sum(data.filter(\n d => tClass.t_supply_commission(d) <= tClass.t_demand_commission(d)),\n d => tClass.t_supply_commission(d) * price_commission * tClass.t_commission(d))), 0),\n }\n cm.revenue = Math.floor(cm.rev_demand + cm.rev_supply)\n return cm\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$$a9 = md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"p0 = 8.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":3101,"value":"price_dict = {\n var price_dict = {\n 'Scenario 1': 8.2,\n 'Scenario 2': 8.5,\n 'Scenario 3': 9.5\n };\n return price_dict\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3113,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"sensitivity = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"sensitivity_supply = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":2006,"value":"sensitivity_demand = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$$a10 = md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@v5\")\n//d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {slider, button, select, text, radio, checkbox, number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"Inputs = require(\"@observablehq/inputs@0.7.17/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}