Воронкообразная диаграмма: методы и примеры кода на Python, R и JavaScript

Диаграмма-воронка – это инструмент визуализации, используемый для представления постепенного сокращения данных по мере их прохождения через различные этапы. Его часто используют для описания процесса продаж или маркетинга, где данные начинаются с большего числа и сужаются на каждом этапе до достижения конечного результата. Вот несколько методов создания диаграмм-воронок с примерами кода на разных языках программирования:

  1. Python (с использованием Matplotlib и Plotly):

    import matplotlib.pyplot as plt
import plotly.graph_objects as go
# Data for funnel chart
labels = ['Stage 1', 'Stage 2', 'Stage 3', 'Stage 4']
values = [1000, 800, 500, 200]
# Matplotlib funnel chart
plt.figure(figsize=(6, 4))
plt.gca().invert_yaxis()
plt.barh(range(len(labels)), values, color='skyblue')
plt.yticks(range(len(labels)), labels)
plt.xlabel('Number of Leads')
plt.title('Funnel Chart - Matplotlib')
plt.show()
# Plotly funnel chart
fig = go.Figure(go.Funnel(
y=labels,
x=values,
textinfo="value+percent previous"))
fig.update_layout(title='Funnel Chart - Plotly')
fig.show()

  2. R (с использованием ggplot2):

    library(ggplot2)
# Data for funnel chart
labels <- c('Stage 1', 'Stage 2', 'Stage 3', 'Stage 4')
values <- c(1000, 800, 500, 200)
# Create funnel chart
df <- data.frame(labels, values)
df <- df[order(df$values, decreasing = TRUE), ]
df$ymax <- c(tail(cumsum(df$values), -1), 0)
df$ymin <- c(0, head(cumsum(df$values), -1))
# Plot funnel chart
ggplot(df, aes(fill = labels, ymax = ymax, ymin = ymin, xmax = 4, xmin = 3)) +
geom_rect() +
coord_flip() +
theme_void() +
labs(x = "Number of Leads", y = NULL, title = "Funnel Chart - ggplot2")

  3. JavaScript (с использованием Chart.js):

    <!DOCTYPE html>
<html>
<head>
<title>Funnel Chart - Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
  max-width: 500px;
  margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="funnelChart"></canvas>
<script>
// Data for funnel chart
const labels = ['Stage 1', 'Stage 2', 'Stage 3', 'Stage 4'];
const values = [1000, 800, 500, 200];
// Create funnel chart
const ctx = document.getElementById('funnelChart').getContext('2d');
new Chart(ctx, {
  type: 'horizontalFunnel',
  data: {
    labels: labels,
    datasets: [{
      data: values,
      backgroundColor: 'skyblue'
    }]
  },
  options: {
    aspectRatio: 1,
    responsive: true,
    title: {
      display: true,
      text: 'Funnel Chart - Chart.js'
    },
    legend: {
      display: false
    }
  }
});
</script>
</body>
</html>