Old school D3 from simpler times

All examples By author By category About

wei2517

Full window Github gist

PPG signal (sampling f=100HZ)

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <title>Vega Lite Bar Chart</title>
  <meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js"></script>

<style media="screen">
    /* Add space between Vega-Embed links  */
    .vega-actions a {
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <h1>PPG signal</h1>
  <h3>Photoplethysmogram (PPG) is an optically obtained plethysmogram, a volumetric measurement of an organ. A PPG is often obtained by using a pulse oximeter which illuminates the skin and measures changes in light absorption.
The change in volume caused by the pressure pulse is detected by illuminating the skin with the light from a light-emitting diode (LED) and then measuring the amount of light either transmitted or reflected to a photodiode.
<h3>
These two figures show the PPG waveform from three subjects that helps you to compare the waveform between each other.
  </h3>
  
  
  <div id="vis"></div>

<script>
  // Assign the specification to a local variable vlSpec.
  var vlSpec = {
     "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
 
  "data": {
    "url": "https://raw.githubusercontent.com/wei2517/around-Yintung-community/master/ppgtest_vega2222.csv"
  },
 
  "vconcat": [
    {
  "title":"PPG signal(sampling f=100HZ) for three subjects",
  "width": 500,
  "height": 250,
      "mark": "line",
  "encoding": {
    "x": {"field": "Time", "type": "quantitative"},
    "y": {"field": "Voltage", "type": "quantitative"},
    "color": {"field": "Name", "type": "nominal"}
  }
    },
    {
  "width": 500,
  "height": 100,
  "mark": "line",
  "encoding": {
      "x": {
          "field": "Time",
          "type": "quantitative"
      },
      "y": {
          "field": "Voltage",
          "type": "quantitative"
      },
      "color": {
          "field": "Name",
          "type": "nominal",
          "legend": null
      },
      "row": {
          "title":null,
          "field": "Name",
          "type": "nominal"
      }
      }
    }
  ]
  };
  // Embed the visualization in the container with id `vis`
  vegaEmbed("#vis", vlSpec);
  </script>
  
  
</body>
</html>

https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js

https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js

https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js