D3 Archives

Updated: 21 February 2026

Display an Observable dot plot in a Symfony framework Twig template

{% extends 'secure-area.html.twig' %}
{% block title %}CTD Observable Plot example{% endblock %}
{% block content %}
<div class='container-fluid'>
  <div id="myplot"></div>
  <script type="module">
  import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";

  const llm_charges = [
    {date: new Date("2026-06-21"), val: 1709.21},
    {date: new Date("2025-09-13"), val: 2114.67},
    {date: new Date("2024-10-17"), val: 979.82},
    {date: new Date("2023-08-07"), val: 1388.13},
  ]

  const plot = Plot.plot({
    width: 1600,
    height: 800,
    x: {
      type: "utc",
      grid: true,
      ticks: "month"
    },
    y: {
      grid: true,
      label: "value / £",
    },
    marks: [
      Plot.dot(llm_charges, {
        x: "date",
        y: "val",
        tip: true,
        fill: "green",
        r: 4,
      }),
      Plot.ruleY([0])
    ]
  })

  const div = document.querySelector("#myplot");
  div.append(plot);
  </script>
</div>
{% endblock %}

d3.select("body") // Find body, pass reference to next step in chain. .selectAll("p") // Selects all p in DOM. Returns empty selection. .data(mydata) // Parse and count data. Following methods called n times. .enter() // Creates n new placeholder elements apparently. .append("p") // Swap placeholder for p element. .text("Hello World"); // Insert text value to p.