diff options
Diffstat (limited to 'web/plotly.html')
-rw-r--r-- | web/plotly.html | 305 |
1 files changed, 305 insertions, 0 deletions
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 @@ +<!DOCTYPE HTML> +<html lang="en" class="light" dir="ltr"> + <head> + <!-- Book generated using mdBook --> + <meta charset="UTF-8"> + <title>plotly - Notes</title> + + + <!-- Custom HTML head --> + + <meta name="description" content=""> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="theme-color" content="#ffffff"> + + <link rel="icon" href="../favicon.svg"> + <link rel="shortcut icon" href="../favicon.png"> + <link rel="stylesheet" href="../css/variables.css"> + <link rel="stylesheet" href="../css/general.css"> + <link rel="stylesheet" href="../css/chrome.css"> + <link rel="stylesheet" href="../css/print.css" media="print"> + + <!-- Fonts --> + <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css"> + <link rel="stylesheet" href="../fonts/fonts.css"> + + <!-- Highlight.js Stylesheets --> + <link rel="stylesheet" href="../highlight.css"> + <link rel="stylesheet" href="../tomorrow-night.css"> + <link rel="stylesheet" href="../ayu-highlight.css"> + + <!-- Custom theme stylesheets --> + + </head> + <body class="sidebar-visible no-js"> + <div id="body-container"> + <!-- Provide site root to javascript --> + <script> + var path_to_root = "../"; + var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light"; + </script> + + <!-- Work around some values being stored in localStorage wrapped in quotes --> + <script> + try { + var theme = localStorage.getItem('mdbook-theme'); + var sidebar = localStorage.getItem('mdbook-sidebar'); + + if (theme.startsWith('"') && theme.endsWith('"')) { + localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1)); + } + + if (sidebar.startsWith('"') && sidebar.endsWith('"')) { + localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1)); + } + } catch (e) { } + </script> + + <!-- Set the theme before any content is loaded, prevents flash --> + <script> + var theme; + try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } + if (theme === null || theme === undefined) { theme = default_theme; } + var html = document.querySelector('html'); + html.classList.remove('light') + html.classList.add(theme); + var body = document.querySelector('body'); + body.classList.remove('no-js') + body.classList.add('js'); + </script> + + <input type="checkbox" id="sidebar-toggle-anchor" class="hidden"> + + <!-- Hide / unhide sidebar before it is displayed --> + <script> + var body = document.querySelector('body'); + var sidebar = null; + var sidebar_toggle = document.getElementById("sidebar-toggle-anchor"); + if (document.body.clientWidth >= 1080) { + try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { } + sidebar = sidebar || 'visible'; + } else { + sidebar = 'hidden'; + } + sidebar_toggle.checked = sidebar === 'visible'; + body.classList.remove('sidebar-visible'); + body.classList.add("sidebar-" + sidebar); + </script> + + <nav id="sidebar" class="sidebar" aria-label="Table of contents"> + <div class="sidebar-scrollbox"> + <ol class="chapter"><li class="chapter-item expanded affix "><a href="../intro.html">Introduction</a></li><li class="chapter-item expanded "><a href="../shells/index.html"><strong aria-hidden="true">1.</strong> Shells</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../shells/zsh.html"><strong aria-hidden="true">1.1.</strong> zsh</a></li><li class="chapter-item expanded "><a href="../shells/bash.html"><strong aria-hidden="true">1.2.</strong> bash</a></li><li class="chapter-item expanded "><a href="../shells/fish.html"><strong aria-hidden="true">1.3.</strong> fish</a></li></ol></li><li class="chapter-item expanded "><a href="../cli/index.html"><strong aria-hidden="true">2.</strong> CLI foo</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../cli/awk.html"><strong aria-hidden="true">2.1.</strong> awk</a></li><li class="chapter-item expanded "><a href="../cli/sed.html"><strong aria-hidden="true">2.2.</strong> sed</a></li><li class="chapter-item expanded "><a href="../cli/column.html"><strong aria-hidden="true">2.3.</strong> column</a></li><li class="chapter-item expanded "><a href="../cli/sort.html"><strong aria-hidden="true">2.4.</strong> sort</a></li><li class="chapter-item expanded "><a href="../cli/tr.html"><strong aria-hidden="true">2.5.</strong> tr</a></li><li class="chapter-item expanded "><a href="../cli/tac.html"><strong aria-hidden="true">2.6.</strong> tac</a></li><li class="chapter-item expanded "><a href="../cli/paste.html"><strong aria-hidden="true">2.7.</strong> paste</a></li></ol></li><li class="chapter-item expanded "><a href="../tools/index.html"><strong aria-hidden="true">3.</strong> Tools</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../tools/tmux.html"><strong aria-hidden="true">3.1.</strong> tmux</a></li><li class="chapter-item expanded "><a href="../tools/screen.html"><strong aria-hidden="true">3.2.</strong> screen</a></li><li class="chapter-item expanded "><a href="../tools/emacs.html"><strong aria-hidden="true">3.3.</strong> emacs</a></li><li class="chapter-item expanded "><a href="../tools/gpg.html"><strong aria-hidden="true">3.4.</strong> gpg</a></li><li class="chapter-item expanded "><a href="../tools/radare2.html"><strong aria-hidden="true">3.5.</strong> radare2</a></li><li class="chapter-item expanded "><a href="../tools/qemu.html"><strong aria-hidden="true">3.6.</strong> qemu</a></li><li class="chapter-item expanded "><a href="../tools/pacman.html"><strong aria-hidden="true">3.7.</strong> pacman</a></li><li class="chapter-item expanded "><a href="../tools/dot.html"><strong aria-hidden="true">3.8.</strong> dot</a></li><li class="chapter-item expanded "><a href="../tools/ffmpeg.html"><strong aria-hidden="true">3.9.</strong> ffmpeg</a></li><li class="chapter-item expanded "><a href="../tools/gnuplot.html"><strong aria-hidden="true">3.10.</strong> gnuplot</a></li><li class="chapter-item expanded "><a href="../tools/restic.html"><strong aria-hidden="true">3.11.</strong> restic</a></li><li class="chapter-item expanded "><a href="../tools/qrencode.html"><strong aria-hidden="true">3.12.</strong> qrencode</a></li></ol></li><li class="chapter-item expanded "><a href="../process/index.html"><strong aria-hidden="true">4.</strong> Process management & inspection</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../process/lsof.html"><strong aria-hidden="true">4.1.</strong> lsof</a></li><li class="chapter-item expanded "><a href="../process/pidstat.html"><strong aria-hidden="true">4.2.</strong> pidstat</a></li><li class="chapter-item expanded "><a href="../process/pgrep.html"><strong aria-hidden="true">4.3.</strong> pgrep</a></li><li class="chapter-item expanded "><a href="../process/ps.html"><strong aria-hidden="true">4.4.</strong> ps</a></li><li class="chapter-item expanded "><a href="../process/pmap.html"><strong aria-hidden="true">4.5.</strong> pmap</a></li><li class="chapter-item expanded "><a href="../process/pstack.html"><strong aria-hidden="true">4.6.</strong> pstack</a></li><li class="chapter-item expanded "><a href="../process/taskset.html"><strong aria-hidden="true">4.7.</strong> taskset</a></li><li class="chapter-item expanded "><a href="../process/nice.html"><strong aria-hidden="true">4.8.</strong> nice</a></li></ol></li><li class="chapter-item expanded "><a href="../trace_profile/index.html"><strong aria-hidden="true">5.</strong> Trace and Profile</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../trace_profile/time.html"><strong aria-hidden="true">5.1.</strong> time</a></li><li class="chapter-item expanded "><a href="../trace_profile/strace.html"><strong aria-hidden="true">5.2.</strong> strace</a></li><li class="chapter-item expanded "><a href="../trace_profile/ltrace.html"><strong aria-hidden="true">5.3.</strong> ltrace</a></li><li class="chapter-item expanded "><a href="../trace_profile/perf.html"><strong aria-hidden="true">5.4.</strong> perf</a></li><li class="chapter-item expanded "><a href="../trace_profile/oprofile.html"><strong aria-hidden="true">5.5.</strong> OProfile</a></li><li class="chapter-item expanded "><a href="../trace_profile/callgrind.html"><strong aria-hidden="true">5.6.</strong> callgrind</a></li><li class="chapter-item expanded "><a href="../trace_profile/valgrind.html"><strong aria-hidden="true">5.7.</strong> valgrind</a></li></ol></li><li class="chapter-item expanded "><a href="../debug/index.html"><strong aria-hidden="true">6.</strong> Debug</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../debug/gdb.html"><strong aria-hidden="true">6.1.</strong> gdb</a></li><li class="chapter-item expanded "><a href="../debug/gdbserver.html"><strong aria-hidden="true">6.2.</strong> gdbserver</a></li></ol></li><li class="chapter-item expanded "><a href="../binary/index.html"><strong aria-hidden="true">7.</strong> Binary</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../binary/od.html"><strong aria-hidden="true">7.1.</strong> od</a></li><li class="chapter-item expanded "><a href="../binary/xxd.html"><strong aria-hidden="true">7.2.</strong> xxd</a></li><li class="chapter-item expanded "><a href="../binary/readelf.html"><strong aria-hidden="true">7.3.</strong> readelf</a></li><li class="chapter-item expanded "><a href="../binary/objdump.html"><strong aria-hidden="true">7.4.</strong> objdump</a></li><li class="chapter-item expanded "><a href="../binary/nm.html"><strong aria-hidden="true">7.5.</strong> nm</a></li></ol></li><li class="chapter-item expanded "><a href="../development/index.html"><strong aria-hidden="true">8.</strong> Development</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../development/c++filt.html"><strong aria-hidden="true">8.1.</strong> c++filt</a></li><li class="chapter-item expanded "><a href="../development/c++.html"><strong aria-hidden="true">8.2.</strong> c++</a></li><li class="chapter-item expanded "><a href="../development/glibc.html"><strong aria-hidden="true">8.3.</strong> glibc</a></li><li class="chapter-item expanded "><a href="../development/gcc.html"><strong aria-hidden="true">8.4.</strong> gcc</a></li><li class="chapter-item expanded "><a href="../development/git.html"><strong aria-hidden="true">8.5.</strong> git</a></li><li class="chapter-item expanded "><a href="../development/cmake.html"><strong aria-hidden="true">8.6.</strong> cmake</a></li><li class="chapter-item expanded "><a href="../development/make.html"><strong aria-hidden="true">8.7.</strong> make</a></li><li class="chapter-item expanded "><a href="../development/ld.so.html"><strong aria-hidden="true">8.8.</strong> ld.so</a></li><li class="chapter-item expanded "><a href="../development/symbolver.html"><strong aria-hidden="true">8.9.</strong> symbol versioning</a></li><li class="chapter-item expanded "><a href="../development/python.html"><strong aria-hidden="true">8.10.</strong> python</a></li><li class="chapter-item expanded "><a href="../development/gcov.html"><strong aria-hidden="true">8.11.</strong> gcov</a></li><li class="chapter-item expanded "><a href="../development/pgo.html"><strong aria-hidden="true">8.12.</strong> pgo</a></li></ol></li><li class="chapter-item expanded "><a href="../linux/index.html"><strong aria-hidden="true">9.</strong> Linux</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../linux/systemd.html"><strong aria-hidden="true">9.1.</strong> systemd</a></li><li class="chapter-item expanded "><a href="../linux/coredump.html"><strong aria-hidden="true">9.2.</strong> coredump</a></li><li class="chapter-item expanded "><a href="../linux/ptrace_scope.html"><strong aria-hidden="true">9.3.</strong> ptrace_scope</a></li><li class="chapter-item expanded "><a href="../linux/cryptsetup.html"><strong aria-hidden="true">9.4.</strong> cryptsetup</a></li><li class="chapter-item expanded "><a href="../linux/swap.html"><strong aria-hidden="true">9.5.</strong> swap</a></li><li class="chapter-item expanded "><a href="../linux/input.html"><strong aria-hidden="true">9.6.</strong> input</a></li><li class="chapter-item expanded "><a href="../linux/acl.html"><strong aria-hidden="true">9.7.</strong> acl</a></li><li class="chapter-item expanded "><a href="../linux/zfs.html"><strong aria-hidden="true">9.8.</strong> zfs</a></li><li class="chapter-item expanded "><a href="../linux/cpufreq.html"><strong aria-hidden="true">9.9.</strong> cpufreq</a></li><li class="chapter-item expanded "><a href="../linux/cups.html"><strong aria-hidden="true">9.10.</strong> cups</a></li></ol></li><li class="chapter-item expanded "><a href="../network/index.html"><strong aria-hidden="true">10.</strong> Network</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../network/ssh.html"><strong aria-hidden="true">10.1.</strong> ssh</a></li><li class="chapter-item expanded "><a href="../network/ss.html"><strong aria-hidden="true">10.2.</strong> ss</a></li><li class="chapter-item expanded "><a href="../network/tcpdump.html"><strong aria-hidden="true">10.3.</strong> tcpdump</a></li><li class="chapter-item expanded "><a href="../network/tshark.html"><strong aria-hidden="true">10.4.</strong> tshark</a></li><li class="chapter-item expanded "><a href="../network/firewall-cmd.html"><strong aria-hidden="true">10.5.</strong> firewall-cmd</a></li><li class="chapter-item expanded "><a href="../network/nftables.html"><strong aria-hidden="true">10.6.</strong> nftables</a></li></ol></li><li class="chapter-item expanded "><a href="../web/index.html"><strong aria-hidden="true">11.</strong> Web</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../web/html.html"><strong aria-hidden="true">11.1.</strong> html</a></li><li class="chapter-item expanded "><a href="../web/css.html"><strong aria-hidden="true">11.2.</strong> css</a></li><li class="chapter-item expanded "><a href="../web/chartjs.html"><strong aria-hidden="true">11.3.</strong> chartjs</a></li><li class="chapter-item expanded "><a href="../web/plotly.html" class="active"><strong aria-hidden="true">11.4.</strong> plotly</a></li></ol></li><li class="chapter-item expanded "><a href="../arch/index.html"><strong aria-hidden="true">12.</strong> Arch</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../arch/x86_64.html"><strong aria-hidden="true">12.1.</strong> x86_64</a></li><li class="chapter-item expanded "><a href="../arch/armv8.html"><strong aria-hidden="true">12.2.</strong> armv8</a></li><li class="chapter-item expanded "><a href="../arch/arm64.html"><strong aria-hidden="true">12.3.</strong> arm64</a></li><li class="chapter-item expanded "><a href="../arch/armv7.html"><strong aria-hidden="true">12.4.</strong> armv7</a></li><li class="chapter-item expanded "><a href="../arch/riscv.html"><strong aria-hidden="true">12.5.</strong> riscv</a></li></ol></li></ol> + </div> + <div id="sidebar-resize-handle" class="sidebar-resize-handle"> + <div class="sidebar-resize-indicator"></div> + </div> + </nav> + + <!-- Track and set sidebar scroll position --> + <script> + var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox'); + sidebarScrollbox.addEventListener('click', function(e) { + if (e.target.tagName === 'A') { + sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop); + } + }, { passive: true }); + var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll'); + sessionStorage.removeItem('sidebar-scroll'); + if (sidebarScrollTop) { + // preserve sidebar scroll position when navigating via links within sidebar + sidebarScrollbox.scrollTop = sidebarScrollTop; + } else { + // scroll sidebar to current active section when navigating via "next/previous chapter" buttons + var activeSection = document.querySelector('#sidebar .active'); + if (activeSection) { + activeSection.scrollIntoView({ block: 'center' }); + } + } + </script> + + <div id="page-wrapper" class="page-wrapper"> + + <div class="page"> + <div id="menu-bar-hover-placeholder"></div> + <div id="menu-bar" class="menu-bar sticky"> + <div class="left-buttons"> + <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar"> + <i class="fa fa-bars"></i> + </label> + <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list"> + <i class="fa fa-paint-brush"></i> + </button> + <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu"> + <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li> + <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li> + <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li> + <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li> + <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li> + </ul> + <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar"> + <i class="fa fa-search"></i> + </button> + </div> + + <h1 class="menu-title">Notes</h1> + + <div class="right-buttons"> + <a href="../print.html" title="Print this book" aria-label="Print this book"> + <i id="print-button" class="fa fa-print"></i> + </a> + <a href="https://github.com/johannst/notes" title="Git repository" aria-label="Git repository"> + <i id="git-repository-button" class="fa fa-github"></i> + </a> + + </div> + </div> + + <div id="search-wrapper" class="hidden"> + <form id="searchbar-outer" class="searchbar-outer"> + <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> + </form> + <div id="searchresults-outer" class="searchresults-outer hidden"> + <div id="searchresults-header" class="searchresults-header"></div> + <ul id="searchresults"> + </ul> + </div> + </div> + + <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM --> + <script> + document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible'); + document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible'); + Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) { + link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1); + }); + </script> + + <div id="content" class="content"> + <main> + <h1 id="plotly-js"><a class="header" href="#plotly-js">Plotly js</a></h1> +<p>Visualization library for javascript based on <code>d3</code>.</p> +<p>Official documentation is <a href="https://plotly.com/javascript/">here</a>.</p> +<h2 id="line-chart-example"><a class="header" href="#line-chart-example">Line chart example</a></h2> +<p>The following is an example for a <em>line</em> chart which contains many options that +I frequently use. It is bloated on purpose to document the options for myself.</p> +<p><a href="src/plotly.html">Rendered html</a></p> +<pre><code class="language-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> +</code></pre> + + </main> + + <nav class="nav-wrapper" aria-label="Page navigation"> + <!-- Mobile navigation buttons --> + <a rel="prev" href="../web/chartjs.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left"> + <i class="fa fa-angle-left"></i> + </a> + + <a rel="next prefetch" href="../arch/index.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right"> + <i class="fa fa-angle-right"></i> + </a> + + <div style="clear: both"></div> + </nav> + </div> + </div> + + <nav class="nav-wide-wrapper" aria-label="Page navigation"> + <a rel="prev" href="../web/chartjs.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left"> + <i class="fa fa-angle-left"></i> + </a> + + <a rel="next prefetch" href="../arch/index.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right"> + <i class="fa fa-angle-right"></i> + </a> + </nav> + + </div> + + + + + <script> + window.playground_copyable = true; + </script> + + + <script src="../elasticlunr.min.js"></script> + <script src="../mark.min.js"></script> + <script src="../searcher.js"></script> + + <script src="../clipboard.min.js"></script> + <script src="../highlight.js"></script> + <script src="../book.js"></script> + + <!-- Custom JS scripts --> + + + </div> + </body> +</html> |