<p><a href="http://www.chart2music.com" target="_blank">Chart2Music</a> lets you explore a chart using sound. To hear the chart, either tab to it or click on it, and use the arrow keys. If you're running a screen reader, it will speak after the sounds play. Press H to learn about other hotkeys available for each chart.</p>
<div>
<canvas id="canvas"></canvas>
</div>
<p><a href="https://www.cvedetails.com/browse-by-date.php">Original source data</a></p>
canvas ~ div {
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
background-color: #ddd;
max-width: 400px;
}
canvas ~ div:not(:has(div)){
display: none;
}0
import chartjsPluginChart2music from 'https://cdn.jsdelivr.net/npm/chartjs-plugin-chart2music@0.0.3/+esm';
const title = "Number of Common Vulnerabilities and Exposures (CVE) Entries by Year";
const year = [1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021];
const count = [894, 1020, 1677, 2156, 1527, 2451, 4935, 6610, 6520, 5632, 5736, 4653, 4155, 5297, 5191, 7939, 6504, 6454, 14714, 16557, 17344, 18325, 20169];
// Chart.js setup
const config = {
type: "line",
data: {
datasets: [{
backgroundColor: "blue",
borderColor: "blue",
hoverRadius: 10,
data: year.map((value, index) => {
return {
x: value.toString(),
y: count[index]
}
})
}]
},
options: {
plugins: {
title: {
text: title,
display: true
},
legend: {
display: false
}
},
scales: {
x: {
title: {
text: "Year"
}
},
y: {
title: {
text: "Count"
}
}
}
},
plugins: [chartjsPluginChart2music]
};
const myChart = new Chart("canvas", config);
This Pen doesn't use any external CSS resources.