If this is typical raster data (or can be converted into typical raster data), I can think of a couple of options:
Use a map server (like MapServer, GeoServer) to host the raster data, and pull this into Leaflet via WMS
Assuming you can symbolize this the way you want it to look in a GIS (e.g. QGIS), and export as an image, you could then use a tool such as gdal2tiles or MapTiler to cut the image into tiles that you can then use with Leaflet. This blog post goes into the details and requirements for using these tools, but here are some of the most relevant parts:
On success, both tools will output a set of tiles in this format (tiles is just a placeholder for whatever you want to call the parent directory):
tiles/{z}/{x}/{y}.jpg
With this in place, you can use leaflet to display the tiles. Here is some basic html and javascript to get you started:
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map" style="width: 700px; height: 500px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// You can set the view to the coordinates and zoom you need
var map = L.map('map').setView([0, 0], 2);
// make sure to change the tile url to whatever you named your folder
L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
minZoom: 1, // change these as needed
maxZoom: 10,
tms: true
}).addTo(map);
</script>
</body>
</html>
As noted, make sure the tms parameter is set to true.
I assume this will work locally, but of course, you will probably eventually want to put these on a server.
