Jason data test

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <button id="sonify">Play chart</button>
    <div id="container"></div>
    <p class="highcharts-description">
        Sonifying a CSV dataset from URL.
    </p>
</figure>

CSS

.highcharts-figure {
    max-width: 900px;
    min-width: 320px;
    margin: 0 auto;
    position: relative;
}

#sonify {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #25386f;
    color: #25386f;
    font-size: 0.9rem;
    min-height: 30px;
    line-height: 1rem;
    font-weight: 500;
    border-radius: 4px;
    padding: 0.375rem 0;
    width: 7rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    text-align: center;
    cursor: pointer;
}

#sonify:hover {
    background-color: #25386f;
    color: #fff;
}

@media (max-width: 530px) {
    #sonify {
        position: static;
        margin-bottom: 10px;
    }
}

JavaScript

const dataMin = 3500,
  dataMax = 4600;

const chart = Highcharts.chart('container', {
  data: {
    csvURL: 'https://raw.githubusercontent.com/awalmer/Sonification/main/WHOI/jason_1390_highcharts.csv',
    parsed: (columns) => {
      const startIx = columns[0].indexOf(dataMin),
        endIx = columns[0].indexOf(dataMax);
      columns.forEach(col => col.splice(0, Infinity, ...col.slice(startIx, endIx)));
      for (let i = 0; i < columns[0].length; ++i) {
      	columns[0][i] -= startIx;
      }
      console.log(columns)
    }
  },

  title: {
    text: 'Jason data',
    align: 'left',
    margin: 25
  },

  sonification: {
    duration: 6000,
    defaultInstrumentOptions: {
      mapping: {
        pitch: {
          min: 'c3',
          max: 'd6'
        }
      }
    }
  },

  legend: {
    enabled: false
  },

  tooltip: {
    valueSuffix: '°F'
  },

  yAxis: {
    labels: {
      format: '{value}°F'
    },
    title: {
      enabled: false
    }
  }
});

document.getElementById('sonify').onclick = function() {
  chart.toggleSonify();
};