An example d3.js visualization of soccer team data. This shows the spatial distribution of shots by Manchester United over the first four games of the 2015-16 season. The heatmap is made using the excellent heatmap.js library. Many thanks to Patrick Wied for developing and providing support for heatmap.js . This visualization suffers from not having sufficient data points, but a clear pattern does emerge. Manchester United are shooting a lot from the left hand side and often from distance. This seems to be a Depay effect. On the right hand side there aren't as many shots particularly from the right-center. Perhaps Juan Mata isn't providing enough support in this area.
This is just a demonstration of the possibility of using d3 and heatmap together. Much future tweaking and prettifying can be done. Code and data are available here . Please get in touch via twitter if you have any feedback - @jalapic