Let's start with an mtcars example dataset from core R. First, we just have the csv file ready and served over http: mtcars.csv.

Load scripts

First, include in your html page the 2 peer dependencies and funkyheatmapjs itself:

<script type="text/javascript" src="https://unpkg.com/d3@7"></script>
<script type="text/javascript" src="https://unpkg.com/lodash@4/lodash.min.js"></script>
<script type="module" src="https://unpkg.com/funkyheatmapjs"></script>

Load and render data

Then, load the data and create the funky heatmap in a div with the corresponding id:

<div id="app"></div>

<script type="module">
import { default as funkyheatmap } from 'https://unpkg.com/funkyheatmapjs';
d3.csv('mtcars.csv').then((data) => {
    data = d3.sort(data, (a, b) => d3.ascending(+b.mpg, +a.mpg));
    data = data.slice(0, 20);
    d3.select("#app").node().appendChild(funkyheatmap(data));
});
</script>

Here we first get the funkyheatmap function from the module, then load the csv file, and take first 20 cars, sorted by their miles per gallon. funkyheatmap function takes the loaded data and outputs an svg DOM element, which we put into the webpage.

Result

An interactive heatmap, you can click the column names to sort and hover the elements to see the values.