From eeadf0599a4b8a92dc0f5475e011435e752feddb Mon Sep 17 00:00:00 2001 From: johannst Date: Sun, 1 Sep 2024 22:49:25 +0000 Subject: deploy: 1070b7b60308925b9c0f98075c354bb05b6f25ca --- web/chartjs.html | 6 +- web/css.html | 2 +- web/html.html | 2 +- web/index.html | 3 +- web/plotly.html | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++++ web/src/plotly.html | 69 ++++++++++++ 6 files changed, 381 insertions(+), 6 deletions(-) create mode 100644 web/plotly.html create mode 100644 web/src/plotly.html (limited to 'web') diff --git a/web/chartjs.html b/web/chartjs.html index f18e7d0..8e7aa99 100644 --- a/web/chartjs.html +++ b/web/chartjs.html @@ -88,7 +88,7 @@ diff --git a/web/css.html b/web/css.html index 1c2adcc..ab84e20 100644 --- a/web/css.html +++ b/web/css.html @@ -88,7 +88,7 @@

diff --git a/web/html.html b/web/html.html index 28d9623..da6adec 100644 --- a/web/html.html +++ b/web/html.html @@ -88,7 +88,7 @@

diff --git a/web/index.html b/web/index.html index 073ba7f..aea1a4a 100644 --- a/web/index.html +++ b/web/index.html @@ -88,7 +88,7 @@

@@ -181,6 +181,7 @@

html

css

chartjs

plotly

diff --git a/web/plotly.html b/web/plotly.html new file mode 100644 index 0000000..888fa73 --- /dev/null +++ b/web/plotly.html @@ -0,0 +1,305 @@ + + + + + + plotly - Notes + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + + + + + + + + + + + + + + + +

+ +

+ + + + +

+ + + +

+ + + + + + + +

+ + + + + + +

Plotly js

Visualization library for javascript based on d3.

Official documentation is here.

Line chart example

The following is an example for a line chart which contains many options that +I frequently use. It is bloated on purpose to document the options for myself.

Rendered html

<div id="plot-1"></div>
+
+<script>
+  const commits = [ "b5a7c219", "72bb8889", "fa9e9079",  "f5178ed1", "e830fa71" ]
+
+  const common_layout  = {
+    xaxis: {
+      // Set range explicitly because of markers+lines mode used.
+      // https://stackoverflow.com/questions/46383368
+      range: [0, commits.length - 1],
+      gridcolor: "ligthgray",
+      rangeslider: {},
+    },
+    yaxis: {
+      title: "runtime in sec",
+      // Disable interactive y-axis zoom.
+      fixedrange: true,
+      gridcolor: "ligthgray",
+    },
+    legend: {
+      orientation: "h",
+      x: 0,
+      y: 1,
+    },
+    modebar: {
+      add: [ "hoverclosest", "hovercompare" ],
+      remove: [ "pan", "lasso", "select", "zoomin", "zoomout" ],
+    },
+    // Transparent plot + paper background.
+    plot_bgcolor: "rgba(0, 0, 0, 0)",
+    paper_bgcolor: "rgba(0, 0, 0, 0)",
+  }
+  const common_config = {
+    // Automatically resize plot when page resizes.
+    responsive: true,
+    // Dont display the plotly logo.
+    displaylogo: false,
+  }
+
+  const plot_1 = document.getElementById("plot-1")
+  const data_10 = {
+    x: commits,
+    y: [ 10.2, 11.4, 10.5, 11.0, 10.0 ],
+    name: "plot 10",
+    mode: "lines+markers",
+  }
+  const data_11 = {
+    x: commits,
+    y: [ 20.2, 21.4, 20.5, 21.0, 20.0 ],
+    name: "plot 11",
+    mode: "lines+markers",
+  }
+
+  Plotly.newPlot(plot_1, [data_10, data_11], {
+    ...common_layout,
+    title: "plot-1",
+  }, common_config)
+
+  plot_1.on("plotly_click", data => {
+    if (data.points.length == 1) {
+      // Change page to following url.
+      window.location = "https://github.com/johannst/notes/commit/" + data.points[0].x
+    } else {
+      console.log("ignore click event, multiple elements selected")
+    }
+  })
+</script>
+

+ +

+ + +

+ + + +

+ + + + + + + + + + + + + + + + + + +

+ + diff --git a/web/src/plotly.html b/web/src/plotly.html new file mode 100644 index 0000000..c665c63 --- /dev/null +++ b/web/src/plotly.html @@ -0,0 +1,69 @@ + + +

+ + -- cgit v1.2.3