Symmetric funnel

The code for this example can be used in the Markdown visualization to create a funnel with multiple sequential steps.

Setup

This visualization is built on having multiple measures which are then swapped rows and columns, with a calculation built to get stage by stage conversion metrics. For example, in cell C2, enter the formula =B2/B1.

Example code

<style>

.parentView {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trapezoid {
  background: #ff6666;
  width: 100%;
  display: flex;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.trapezoid2 {
  background: #ee6021;
  width: 85%;
  display: flex;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.trapezoid3 {
  background: #f6c62d;
  width: 75%;
  display: flex;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.trapezoid4 {
  background: #9de24f;
  width: 65%;
  display: flex;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}
  
.text {
  color: white;
  display: flex;
  line-height: 1.5;
  font-size: 20px;
}
.conv{
  font-size: 15px;
  line-height: 3;
  font-weight: bold;
}
</style>
<div class = "parentView">
  <div class="trapezoid">
    <h1 class="text"> {{result.0.measure_value.value}} Stage 1 </h1>
  </div>
  <div class="conv"> ↓ {{result.1.calc_1.value}} </div>
  <div class="trapezoid2">
    <h1 class="text"> {{result.1.measure_value.value}} Stage 2 </h1>
  </div>
  <div class="conv"> ↓ {{result.2.calc_1.value}} </div>
  <div class="trapezoid3">
    <h1 class="text"> {{result.2.measure_value.value}} Stage 3 </h1>
  </div>
  <div class="conv"> ↓ {{result.3.calc_1.value}} </div>
  <div class="trapezoid4">
    <h1 class="text"> {{result.3.measure_value.value}} Stage 4 </h1>
</div>