Javascript Library

Observable Plot

by

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 %}

jQuery

by

Updated: 13 December 2023

Get version of jQuery from the console

$().jquery

Document ready

$( document ).ready(function() {
    // Will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
    console.log( "ready!" );
});

// equivalent shorthand version
$(function() {
    // Will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
    console.log( "ready!" );
});

Gatsby

by

Updated: 11 November 2023

https://www.gatsbyjs.com/docs/tutorial/getting-started

  • A page (React) Component contains all the UI elements for a specific page of a site.
  • Gatsby automatically creates pages for React components that are the default export of files in the src/pages directory.
  • A Gatsby plugin adds additional features to a Gatsby site. It is a standalone npm package.
  • Gatsby plugin library https://www.gatsbyjs.com/plugins

Data Layer

  • Source plugins pull data from their original location into the Gatsby GraphQL data layer.
  • Use the GraphiQL endpoint (localhost:8000/___graphql) to explore data in the data layer and design GraphQL queries.
  • Write GraphQL queries to pull data out of the data layer and into React components.
  • To pull data into a “building block” component, use the useStaticQuery hook.
  • To pull data into a page component, use a page query.

React

by

Updated: 06 November 2023

  • React is a JS lib used to create user interfaces. With React the UI is broken up into small re-usable pieces called Components.
  • Components can be created from other from other Components – a pattern is called composition.
  • A React component is a function that returns a React element.
  • A React element (written as JSX) is an object that React uses to render DOM elements.

jQuery plugins

by

Updated: 10 September 2022

The javascript in a jQuery plugin like Bootstrap expects there to be a global jQuery variable that it can modify, for example by adding a tooltip() method.

D3

by

Updated: 08 April 2024

Bind data to all p elements in the DOM, even if they don’t exist yet.

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.

https://bost.ocks.org/mike/join/