Forced Scatter Plot

README.md

A demonstration of scatterplot with force directed points, so that maximum overlap is avoided. Furter, each of the axes can be filtered dynamically from the input fields provided at the top of the plot.

data.js

var data = [[15, 0.3], [15, 0.4], [15, 0.6], [15, 0.7], [15, 0.9], [15, 1.0], [15, 1.2], [15, 1.3], [15, 1.7], [15, 1.8], [15, 2.1], [15, 2.2], [15, 2.3], [15, 3.5], [15, 3.8], [15, 3.9], [15, 4.2], [15, 4.4], [15, 4.8], [15, 5.3], [15, 5.8], [15, 5.9], [15, 7.2], [17, 0.3], [17, 0.4], [17, 0.5], [17, 0.6], [17, 0.7], [17, 0.8], [17, 0.9], [17, 1.0], [17, 1.1], [17, 1.2], [17, 1.3], [17, 1.4], [17, 1.5], [17, 1.6], [17, 1.7], [17, 1.8], [17, 1.9], [17, 2.0], [17, 2.1], [17, 2.2], [17, 2.3], [17, 2.4], [17, 2.5], [17, 2.6], [17, 2.8], [17, 3.0], [17, 3.1], [17, 3.2], [17, 3.3], [17, 3.8], [17, 3.9], [17, 4.0], [17, 4.2], [17, 4.6], [17, 4.8], [17, 5.0], [17, 5.6], [17, 5.7], [17, 5.8], [17, 5.9], [17, 6.3], [17, 6.4], [17, 7.3], [17, 7.4], [17, 7.5], [17, 7.6], [17, 7.9], [17, 8.1], [17, 8.2], [17, 8.4], [17, 8.8], [17, 9.1], [17, 9.4], [17, 9.5], [17, 9.6], [17, 9.8], [17, 10.2], [17, 10.3], [17, 12.2], [17, 13.1], [17, 13.7], [17, 13.8], [17, 14.5], [17, 15.0], [17, 15.4], [17, 16.7], [17, 19.4], [17, 19.8], [17, 24.2], [17, 24.6], [17, 26.7], [17, 30.0], [18, 0.3], [18, 0.4], [18, 0.5], [18, 0.6], [18, 0.7], [18, 0.8], [18, 0.9], [18, 1.0], [18, 1.1], [18, 1.2], [18, 1.3], [18, 1.4], [18, 1.5], [18, 1.6], [18, 1.7], [18, 1.8], [18, 1.9], [18, 2.0], [18, 2.1], [18, 2.2], [18, 2.3], [18, 2.4], [18, 2.5], [18, 2.6], [18, 2.7], [18, 2.8], [18, 2.9], [18, 3.0], [18, 3.1], [18, 3.2], [18, 3.3], [18, 3.4], [18, 3.5], [18, 3.6], [18, 3.7], [18, 3.8], [18, 4.0], [18, 4.1], [18, 4.2], [18, 4.3], [18, 4.4], [18, 4.5], [18, 4.6], [18, 4.7], [18, 4.8], [18, 5.1], [18, 5.2], [18, 5.4], [18, 5.6], [18, 5.7], [18, 5.8], [18, 5.9], [18, 6.3], [18, 6.5], [18, 6.6], [18, 6.7], [18, 6.8], [18, 6.9], [18, 7.3], [18, 7.6], [18, 7.9], [18, 8.2], [18, 8.4], [18, 8.5], [18, 8.7], [18, 9.1], [18, 10.1], [18, 10.2], [18, 10.4], [18, 10.7], [18, 12.8], [18, 13.1], [18, 13.8], [18, 14.5], [18, 15.0], [18, 15.4], [18, 16.7], [18, 19.4], [18, 19.8], [18, 24.2], [18, 24.6], [18, 26.7], [1, 0.4], [1, 0.5], [1, 0.6], [1, 0.7], [1, 0.8], [1, 0.9], [1, 1.0], [1, 1.1], [1, 1.2], [1, 1.3], [1, 1.4], [1, 1.5], [1, 1.6], [1, 1.7], [1, 1.8], [1, 1.9], [1, 2.0], [1, 2.1], [1, 2.2], [1, 2.3], [1, 2.4], [1, 2.5], [1, 2.6], [1, 2.7], [1, 2.8], [1, 2.9], [1, 3.0], [1, 3.1], [1, 3.2], [1, 3.3], [1, 3.4], [1, 3.5], [1, 3.6], [1, 3.7], [1, 3.8], [1, 3.9], [1, 4.0], [1, 4.1], [1, 4.2], [1, 4.3], [1, 4.4], [1, 4.5], [1, 4.6], [1, 4.7], [1, 4.8], [1, 4.9], [1, 5.0], [1, 5.1], [1, 5.2], [1, 5.3], [1, 5.4], [1, 5.5], [1, 5.6], [1, 5.7], [1, 5.8], [1, 5.9], [1, 6.0], [1, 6.1], [1, 6.2], [1, 6.3], [1, 6.4], [1, 6.5], [1, 6.6], [1, 6.7], [1, 6.8], [1, 6.9], [1, 7.0], [1, 7.1], [1, 7.2], [1, 7.3], [1, 7.4], [1, 7.5], [1, 7.6], [1, 7.7], [1, 7.8], [1, 7.9], [1, 8.0], [1, 8.1], [1, 8.2], [1, 8.3], [1, 8.4], [1, 8.5], [1, 8.6], [1, 8.7], [1, 8.8], [1, 8.9], [1, 9.0], [1, 9.1], [1, 9.2], [1, 9.3], [1, 9.4], [1, 9.5], [1, 9.6], [1, 9.7], [1, 9.8], [1, 9.9], [1, 10.0], [1, 10.1], [1, 10.2], [1, 10.3], [1, 10.4], [1, 10.5], [1, 10.6], [1, 10.7], [1, 10.8], [1, 10.9], [1, 11.0], [1, 11.1], [1, 11.2], [1, 11.3], [1, 11.4], [1, 11.5], [1, 11.6], [1, 11.7], [1, 11.8], [1, 11.9], [1, 12.0], [1, 12.1], [1, 12.2], [1, 12.3], [1, 12.4], [1, 12.5], [1, 12.6], [1, 12.7], [1, 12.8], [1, 12.9], [1, 13.0], [1, 13.1], [1, 13.2], [1, 13.3], [1, 13.4], [1, 13.6], [1, 13.7], [1, 13.8], [1, 13.9], [1, 14.0], [1, 14.1], [1, 14.2], [1, 14.3], [1, 14.4], [1, 14.5], [1, 14.6], [1, 14.7], [1, 14.8], [1, 14.9], [1, 15.0], [1, 15.1], [1, 15.2], [1, 15.3], [1, 15.4], [1, 15.5], [1, 15.6], [1, 15.7], [1, 15.8], [1, 15.9], [1, 16.0], [1, 16.1], [1, 16.2], [1, 16.3], [1, 16.4], [1, 16.5], [1, 16.6], [1, 16.7], [1, 16.9], [1, 17.0], [1, 17.1], [1, 17.2], [1, 17.3], [1, 17.4], [1, 17.5], [1, 17.6], [1, 17.7], [1, 17.8], [1, 17.9], [1, 18.0], [1, 18.1], [1, 18.3], [1, 18.4], [1, 18.5], [1, 18.6], [1, 18.7], [1, 18.8], [1, 18.9], [1, 19.0], [1, 19.1], [1, 19.2], [1, 19.3], [1, 19.4], [1, 19.6], [1, 19.7], [1, 19.8], [1, 19.9], [1, 20.0], [1, 20.1], [1, 20.2], [1, 20.4], [1, 20.5], [1, 20.6], [1, 20.7], [1, 20.8], [1, 20.9], [1, 21.0], [1, 21.1], [1, 21.4], [1, 21.6], [1, 21.7], [1, 21.8], [1, 21.9], [1, 22.1], [1, 22.4], [1, 22.5], [1, 22.6], [1, 22.7], [1, 22.8], [1, 23.0], [1, 23.3], [1, 23.4], [1, 23.5], [1, 23.6], [1, 23.7], [1, 23.8], [1, 23.9], [1, 24.0], [1, 24.1], [1, 24.2], [1, 24.4], [1, 24.5], [1, 24.6], [1, 24.7], [1, 25.0], [1, 25.1], [1, 25.2], [1, 25.3], [1, 25.4], [1, 25.5], [1, 25.7], [1, 25.8], [1, 26.0], [1, 26.1], [1, 26.3], [1, 26.5], [1, 26.7], [1, 26.8], [1, 26.9], [1, 27.3], [1, 27.6], [1, 27.7], [1, 28.0], [1, 28.1], [1, 28.5], [1, 29.0], [1, 29.1], [1, 29.2], [1, 29.3], [1, 29.7], [1, 29.8], [1, 29.9], [1, 30.0], [1, 30.1], [1, 30.2], [1, 30.3], [1, 30.6], [1, 30.7], [1, 31.0], [1, 31.2], [1, 31.3], [1, 31.5], [1, 31.6], [1, 31.7], [1, 31.8], [1, 32.0], [1, 32.2], [1, 32.3], [1, 32.4], [1, 32.7], [1, 33.2], [1, 33.3], [1, 33.6], [1, 34.1], [1, 34.9], [1, 35.0], [1, 35.1], [1, 35.6], [1, 36.2], [1, 37.2], [1, 38.9], [1, 39.0], [1, 39.1], [1, 39.2], [1, 39.9], [1, 40.9], [1, 41.3], [1, 41.4], [1, 41.5], [1, 42.7], [1, 42.9], [1, 43.5], [1, 43.7], [1, 43.8], [1, 43.9], [1, 44.1], [1, 45.0], [1, 45.5], [1, 45.6], [1, 46.2], [1, 46.3], [1, 46.5], [1, 47.6], [1, 47.7], [1, 47.9], [1, 48.2], [1, 48.8], [1, 49.0], [1, 49.4], [1, 50.0], [1, 50.2], [1, 51.2], [1, 52.7], [1, 53.1], [1, 53.7], [1, 55.4], [1, 55.6], [1, 56.5], [1, 56.9], [1, 57.4], [1, 57.6], [1, 58.4], [1, 59.0], [1, 59.6], [1, 60.5], [1, 61.8], [1, 62.0], [1, 62.6], [1, 63.1], [1, 63.9], [1, 69.1], [1, 70.0], [1, 72.8], [1, 73.8], [1, 74.4], [1, 75.8], [1, 75.9], [1, 76.0], [1, 76.8], [1, 77.1], [1, 78.1], [1, 80.1], [1, 83.4], [1, 84.8], [1, 92.8], [1, 94.0], [1, 102.1], [2, 0.3], [2, 0.4], [2, 0.5], [2, 0.6], [2, 0.7], [2, 0.8], [2, 0.9], [2, 1.0], [2, 1.1], [2, 1.2], [2, 1.3], [2, 1.4], [2, 1.5], [2, 1.6], [2, 1.7], [2, 1.8], [2, 1.9], [2, 2.0], [2, 2.1], [2, 2.2], [2, 2.3], [2, 2.4], [2, 2.5], [2, 2.6], [2, 2.7], [2, 2.8], [2, 2.9], [2, 3.0], [2, 3.1], [2, 3.2], [2, 3.3], [2, 3.4], [2, 3.5], [2, 3.6], [2, 3.7], [2, 3.8], [2, 3.9], [2, 4.0], [2, 4.1], [2, 4.2], [2, 4.3], [2, 4.4], [2, 4.5], [2, 4.6], [2, 4.7], [2, 4.8], [2, 4.9], [2, 5.0], [2, 5.1], [2, 5.2], [2, 5.3], [2, 5.4], [2, 5.5], [2, 5.6], [2, 5.7], [2, 5.8], [2, 5.9], [2, 6.0], [2, 6.1], [2, 6.2], [2, 6.3], [2, 6.4], [2, 6.5], [2, 6.6], [2, 6.7], [2, 6.8], [2, 6.9], [2, 7.0], [2, 7.1], [2, 7.2], [2, 7.3], [2, 7.4], [2, 7.5], [2, 7.6], [2, 7.7], [2, 7.8], [2, 7.9], [2, 8.0], [2, 8.1], [2, 8.2], [2, 8.3], [2, 8.4], [2, 8.5], [2, 8.6], [2, 8.7], [2, 8.8], [2, 8.9], [2, 9.0], [2, 9.1], [2, 9.2], [2, 9.3], [2, 9.4], [2, 9.5], [2, 9.6], [2, 9.7], [2, 9.8], [2, 9.9], [2, 10.0], [2, 10.1], [2, 10.2], [2, 10.3], [2, 10.4], [2, 10.5], [2, 10.6], [2, 10.7], [2, 10.8], [2, 10.9], [2, 11.1], [2, 11.2], [2, 11.3], [2, 11.4], [2, 11.5], [2, 11.6], [2, 11.7], [2, 11.8], [2, 11.9], [2, 12.0], [2, 12.2], [2, 12.3], [2, 12.4], [2, 12.5], [2, 12.6], [2, 12.8], [2, 12.9], [2, 13.0], [2, 13.1], [2, 13.2], [2, 13.3], [2, 13.5], [2, 13.6], [2, 13.7], [2, 13.8], [2, 14.0], [2, 14.1], [2, 14.2], [2, 14.3], [2, 14.5], [2, 14.9], [2, 15.0], [2, 15.1], [2, 15.2], [2, 15.4], [2, 15.5], [2, 15.6], [2, 15.7], [2, 15.8], [2, 15.9], [2, 16.0], [2, 16.1], [2, 16.2], [2, 16.4], [2, 16.7], [2, 16.9], [2, 17.0], [2, 17.1], [2, 17.2], [2, 17.3], [2, 17.4], [2, 17.6], [2, 17.7], [2, 17.9], [2, 18.2], [2, 18.9], [2, 19.1], [2, 19.2], [2, 19.3], [2, 19.4], [2, 19.5], [2, 19.6], [2, 19.7], [2, 19.8], [2, 20.0], [2, 20.1], [2, 20.2], [2, 20.3], [2, 20.5], [2, 20.6], [2, 20.8], [2, 20.9], [2, 21.0], [2, 21.2], [2, 21.3], [2, 21.4], [2, 21.5], [2, 21.7], [2, 21.9], [2, 22.0], [2, 22.4], [2, 22.5], [2, 22.6], [2, 22.7], [2, 22.9], [2, 23.3], [2, 23.4], [2, 23.6], [2, 23.7], [2, 24.2], [2, 24.4], [2, 24.5], [2, 24.6], [2, 25.1], [2, 25.2], [2, 25.3], [2, 25.5], [2, 25.6], [2, 25.8], [2, 26.7], [2, 26.8], [2, 27.2], [2, 27.7], [2, 28.3], [2, 28.4], [2, 28.6], [2, 29.0], [2, 29.3], [2, 29.8], [2, 29.9], [2, 30.8], [2, 31.4], [2, 31.6], [2, 31.7], [2, 32.0], [2, 32.3], [2, 34.3], [2, 35.5], [2, 35.9], [2, 36.6], [2, 37.1], [2, 37.2], [2, 38.1], [2, 39.0], [2, 39.5], [2, 39.9], [2, 40.1], [2, 40.3], [2, 40.7], [2, 41.3], [2, 43.5], [2, 43.8], [2, 44.4], [2, 46.4], [2, 49.8], [2, 50.3], [2, 50.4], [2, 54.8], [2, 59.3], [2, 60.1], [2, 62.0], [2, 73.9], [3, 0.3], [3, 0.4], [3, 0.5], [3, 0.6], [3, 0.7], [3, 0.8], [3, 0.9], [3, 1.0], [3, 1.1], [3, 1.2], [3, 1.3], [3, 1.4], [3, 1.5], [3, 1.6], [3, 1.7], [3, 1.8], [3, 1.9], [3, 2.0], [3, 2.1], [3, 2.2], [3, 2.3], [3, 2.4], [3, 2.5], [3, 2.6], [3, 2.7], [3, 2.8], [3, 2.9], [3, 3.0], [3, 3.1], [3, 3.2], [3, 3.3], [3, 3.4], [3, 3.5], [3, 3.6], [3, 3.7], [3, 3.8], [3, 3.9], [3, 4.0], [3, 4.1], [3, 4.2], [3, 4.3], [3, 4.4], [3, 4.5], [3, 4.6], [3, 4.7], [3, 4.8], [3, 4.9], [3, 5.0], [3, 5.1], [3, 5.2], [3, 5.3], [3, 5.4], [3, 5.5], [3, 5.6], [3, 5.7], [3, 5.8], [3, 5.9], [3, 6.0], [3, 6.1], [3, 6.2], [3, 6.3], [3, 6.4], [3, 6.5], [3, 6.6], [3, 6.7], [3, 6.8], [3, 6.9], [3, 7.0], [3, 7.2], [3, 7.3], [3, 7.4], [3, 7.5], [3, 7.6], [3, 7.8], [3, 7.9], [3, 8.0], [3, 8.1], [3, 8.2], [3, 8.3], [3, 8.4], [3, 8.5], [3, 8.6], [3, 8.7], [3, 8.8], [3, 8.9], [3, 9.0], [3, 9.1], [3, 9.2], [3, 9.3], [3, 9.4], [3, 9.5], [3, 9.7], [3, 9.8], [3, 9.9], [3, 10.0], [3, 10.1], [3, 10.2], [3, 10.3], [3, 10.4], [3, 10.5], [3, 10.6], [3, 10.7], [3, 10.8], [3, 10.9], [3, 11.0], [3, 11.1], [3, 11.3], [3, 11.4], [3, 11.6], [3, 11.7], [3, 11.8], [3, 11.9], [3, 12.0], [3, 12.2], [3, 12.3], [3, 12.6], [3, 12.8], [3, 13.0], [3, 13.3], [3, 13.6], [3, 13.7], [3, 13.8], [3, 14.1], [3, 14.2], [3, 14.3], [3, 14.4], [3, 14.6], [3, 14.7], [3, 14.9], [3, 15.1], [3, 15.3], [3, 15.5], [3, 15.8], [3, 15.9], [3, 16.4], [3, 16.5], [3, 16.6], [3, 16.8], [3, 16.9], [3, 17.2], [3, 17.3], [3, 17.4], [3, 17.7], [3, 17.8], [3, 18.2], [3, 18.8], [3, 19.1], [3, 19.2], [3, 19.3], [3, 19.4], [3, 19.6], [3, 19.7], [3, 19.8], [3, 19.9], [3, 20.2], [3, 20.7], [3, 21.0], [3, 21.2], [3, 21.4], [3, 21.6], [3, 21.8], [3, 21.9], [3, 22.0], [3, 22.2], [3, 22.4], [3, 22.5], [3, 22.9], [3, 23.1], [3, 23.2], [3, 23.7], [3, 23.8], [3, 25.1], [3, 25.7], [3, 26.1], [3, 26.2], [3, 26.3], [3, 27.0], [3, 27.1], [3, 27.2], [3, 27.6], [3, 27.9], [3, 28.0], [3, 28.3], [3, 28.6], [3, 29.2], [3, 29.8], [3, 30.7], [3, 31.6], [3, 32.4], [3, 32.5], [3, 33.7], [3, 34.1], [3, 35.0], [3, 35.4], [3, 36.4], [3, 36.9], [3, 37.1], [3, 38.5], [3, 40.0], [4, 0.3], [4, 0.4], [4, 0.5], [4, 0.6], [4, 0.7], [4, 0.8], [4, 0.9], [4, 1.0], [4, 1.1], [4, 1.2], [4, 1.3], [4, 1.4], [4, 1.5], [4, 1.6], [4, 1.7], [4, 1.8], [4, 1.9], [4, 2.0], [4, 2.1], [4, 2.2], [4, 2.3], [4, 2.4], [4, 2.5], [4, 2.6], [4, 2.7], [4, 2.8], [4, 2.9], [4, 3.0], [4, 3.1], [4, 3.2], [4, 3.3], [4, 3.4], [4, 3.5], [4, 3.6], [4, 3.7], [4, 3.8], [4, 3.9], [4, 4.0], [4, 4.1], [4, 4.2], [4, 4.3], [4, 4.4], [4, 4.5], [4, 4.6], [4, 4.7], [4, 4.8], [4, 4.9], [4, 5.0], [4, 5.1], [4, 5.2], [4, 5.3], [4, 5.4], [4, 5.5], [4, 5.6], [4, 5.7], [4, 5.8], [4, 5.9], [4, 6.0], [4, 6.1], [4, 6.2], [4, 6.3], [4, 6.4], [4, 6.5], [4, 6.6], [4, 6.7], [4, 6.8], [4, 6.9], [4, 7.0], [4, 7.1], [4, 7.2], [4, 7.3], [4, 7.4], [4, 7.5], [4, 7.6], [4, 7.7], [4, 7.8], [4, 7.9], [4, 8.0], [4, 8.1], [4, 8.2], [4, 8.3], [4, 8.4], [4, 8.5], [4, 8.6], [4, 8.7], [4, 8.8], [4, 8.9], [4, 9.0], [4, 9.1], [4, 9.2], [4, 9.3], [4, 9.4], [4, 9.5], [4, 9.6], [4, 9.7], [4, 9.8], [4, 9.9], [4, 10.0], [4, 10.1], [4, 10.2], [4, 10.3], [4, 10.4], [4, 10.5], [4, 10.6], [4, 10.7], [4, 10.8], [4, 10.9], [4, 11.0], [4, 11.1], [4, 11.2], [4, 11.3], [4, 11.4], [4, 11.5], [4, 11.6], [4, 11.7], [4, 11.8], [4, 11.9], [4, 12.0], [4, 12.1], [4, 12.3], [4, 12.4], [4, 12.5], [4, 12.6], [4, 12.7], [4, 12.8], [4, 12.9], [4, 13.0], [4, 13.2], [4, 13.3], [4, 13.6], [4, 13.7], [4, 13.9], [4, 14.0], [4, 14.1], [4, 14.2], [4, 14.3], [4, 14.4], [4, 14.6], [4, 14.7], [4, 14.8], [4, 14.9], [4, 15.0], [4, 15.1], [4, 15.2], [4, 15.5], [4, 15.6], [4, 15.7], [4, 15.8], [4, 15.9], [4, 16.0], [4, 16.1], [4, 16.3], [4, 16.5], [4, 16.8], [4, 16.9], [4, 17.3], [4, 17.4], [4, 17.5], [4, 17.6], [4, 17.7], [4, 17.8], [4, 18.5], [4, 18.7], [4, 18.8], [4, 19.2], [4, 19.6], [4, 19.9], [4, 20.0], [4, 20.1], [4, 20.2], [4, 20.4], [4, 20.5], [4, 20.6], [4, 20.7], [4, 20.8], [4, 20.9], [4, 21.9], [4, 22.0], [4, 22.4], [4, 22.9], [4, 23.4], [4, 23.5], [4, 23.7], [4, 24.0], [4, 24.4], [4, 24.7], [4, 25.1], [4, 25.2], [4, 25.4], [4, 25.5], [4, 25.7], [4, 26.2], [4, 26.6], [4, 26.9], [4, 27.7], [4, 27.9], [4, 28.0], [4, 28.3], [4, 29.1], [4, 30.3], [4, 30.7], [4, 31.0], [4, 31.2], [4, 31.4], [4, 31.6], [4, 32.3], [4, 32.8], [4, 33.3], [4, 38.6], [4, 39.2], [4, 42.9], [5, 0.3], [5, 0.4], [5, 0.5], [5, 0.6], [5, 0.7], [5, 0.8], [5, 0.9], [5, 1.0], [5, 1.1], [5, 1.2], [5, 1.3], [5, 1.4], [5, 1.5], [5, 1.6], [5, 1.7], [5, 1.8], [5, 1.9], [5, 2.0], [5, 2.1], [5, 2.2], [5, 2.3], [5, 2.4], [5, 2.5], [5, 2.6], [5, 2.7], [5, 2.8], [5, 2.9], [5, 3.0], [5, 3.1], [5, 3.2], [5, 3.3], [5, 3.4], [5, 3.5], [5, 3.6], [5, 3.7], [5, 3.8], [5, 3.9], [5, 4.0], [5, 4.1], [5, 4.2], [5, 4.3], [5, 4.4], [5, 4.5], [5, 4.6], [5, 4.7], [5, 4.8], [5, 4.9], [5, 5.0], [5, 5.1], [5, 5.2], [5, 5.3], [5, 5.4], [5, 5.5], [5, 5.6], [5, 5.7], [5, 5.8], [5, 5.9], [5, 6.0], [5, 6.1], [5, 6.4], [5, 6.5], [5, 6.6], [5, 6.7], [5, 6.8], [5, 6.9], [5, 7.1], [5, 7.2], [5, 7.4], [5, 7.6], [5, 7.9], [5, 8.1], [5, 8.2], [5, 8.5], [5, 8.8], [5, 8.9], [5, 9.0], [5, 9.1], [5, 9.2], [5, 9.3], [5, 9.4], [5, 9.5], [5, 9.7], [5, 9.8], [5, 10.0], [5, 10.1], [5, 10.2], [5, 10.3], [5, 10.4], [5, 10.6], [5, 10.8], [5, 11.0], [5, 11.3], [5, 11.5], [5, 11.6], [5, 11.7], [5, 11.8], [5, 12.3], [5, 12.4], [5, 12.5], [5, 12.6], [5, 12.7], [5, 12.8], [5, 12.9], [5, 13.0], [5, 13.3], [5, 13.4], [5, 13.6], [5, 13.7], [5, 13.8], [5, 14.0], [5, 14.2], [5, 15.8], [5, 16.0], [5, 16.9], [5, 17.3], [5, 17.5], [5, 18.7], [5, 19.6], [5, 20.5], [5, 20.7], [5, 20.8], [5, 23.5], [5, 23.7], [5, 26.2], [5, 29.1], [5, 31.2], [5, 31.4], [5, 32.3], [5, 38.6], [5, 42.9], [6, 0.3], [6, 0.4], [6, 0.5], [6, 0.6], [6, 0.7], [6, 0.8], [6, 0.9], [6, 1.0], [6, 1.1], [6, 1.2], [6, 1.3], [6, 1.4], [6, 1.5], [6, 1.6], [6, 1.7], [6, 1.8], [6, 1.9], [6, 2.0], [6, 2.1], [6, 2.2], [6, 2.3], [6, 2.4], [6, 2.5], [6, 2.6], [6, 2.7], [6, 2.8], [6, 2.9], [6, 3.0], [6, 3.1], [6, 3.2], [6, 3.3], [6, 3.4], [6, 3.5], [6, 3.6], [6, 3.7], [6, 3.8], [6, 3.9], [6, 4.0], [6, 4.1], [6, 4.2], [6, 4.3], [6, 4.4], [6, 4.5], [6, 4.6], [6, 4.7], [6, 4.8], [6, 4.9], [6, 5.0], [6, 5.1], [6, 5.2], [6, 5.3], [6, 5.4], [6, 5.5], [6, 5.6], [6, 5.7], [6, 5.8], [6, 5.9], [6, 6.0], [6, 6.1], [6, 6.3], [6, 6.4], [6, 6.5], [6, 6.9], [6, 7.0], [6, 7.1], [6, 7.2], [6, 7.3], [6, 7.4], [6, 7.5], [6, 7.6], [6, 7.7], [6, 7.8], [6, 7.9], [6, 8.0], [6, 8.1], [6, 8.2], [6, 8.3], [6, 8.4], [6, 8.5], [6, 8.6], [6, 8.7], [6, 8.8], [6, 9.0], [6, 9.2], [6, 9.3], [6, 9.4], [6, 9.5], [6, 9.6], [6, 9.7], [6, 9.9], [6, 10.0], [6, 10.1], [6, 10.2], [6, 10.3], [6, 10.4], [6, 10.5], [6, 10.6], [6, 10.7], [6, 10.8], [6, 10.9], [6, 11.0], [6, 11.2], [6, 11.3], [6, 11.4], [6, 11.9], [6, 12.0], [6, 12.1], [6, 12.2], [6, 12.5], [6, 12.8], [6, 12.9], [6, 13.0], [6, 13.1], [6, 13.2], [6, 13.3], [6, 13.6], [6, 13.7], [6, 13.9], [6, 14.0], [6, 14.2], [6, 14.7], [6, 15.0], [6, 15.3], [6, 16.2], [6, 16.4], [6, 16.5], [6, 16.6], [6, 16.9], [6, 17.3], [6, 18.2], [6, 18.3], [6, 18.7], [6, 18.8], [6, 18.9], [6, 19.4], [6, 19.5], [6, 19.9], [6, 20.1], [6, 20.2], [6, 20.3], [6, 20.6], [6, 20.8], [6, 21.0], [6, 21.3], [6, 21.5], [6, 21.8], [6, 22.0], [6, 23.4], [6, 24.0], [6, 24.4], [6, 24.5], [6, 24.9], [6, 25.7], [6, 26.1], [6, 26.2], [6, 26.6], [6, 26.8], [6, 27.2], [6, 30.5], [6, 30.9], [6, 31.0], [6, 31.6], [6, 32.3], [6, 32.5], [6, 32.8], [6, 33.5], [6, 35.3], [6, 37.3], [6, 38.5], [6, 39.2], [6, 39.6], [6, 40.1], [6, 42.9], [6, 49.9], [6, 50.9], [6, 62.3], [6, 63.1], [6, 68.5], [7, 0.3], [7, 0.4], [7, 0.5], [7, 0.6], [7, 0.7], [7, 0.8], [7, 0.9], [7, 1.0], [7, 1.1], [7, 1.2], [7, 1.3], [7, 1.4], [7, 1.5], [7, 1.6], [7, 1.7], [7, 1.8], [7, 1.9], [7, 2.0], [7, 2.1], [7, 2.2], [7, 2.3], [7, 2.4], [7, 2.5], [7, 2.6], [7, 2.7], [7, 2.8], [7, 2.9], [7, 3.0], [7, 3.1], [7, 3.2], [7, 3.3], [7, 3.4], [7, 3.5], [7, 3.6], [7, 3.7], [7, 3.8], [7, 3.9], [7, 4.0], [7, 4.1], [7, 4.2], [7, 4.3], [7, 4.4], [7, 4.5], [7, 4.6], [7, 4.7], [7, 4.8], [7, 4.9], [7, 5.0], [7, 5.1], [7, 5.2], [7, 5.3], [7, 5.4], [7, 5.5], [7, 5.6], [7, 5.7], [7, 5.8], [7, 5.9], [7, 6.1], [7, 6.2], [7, 6.3], [7, 6.4], [7, 6.5], [7, 6.7], [7, 6.9], [7, 7.0], [7, 7.2], [7, 7.3], [7, 7.4], [7, 7.5], [7, 7.6], [7, 7.8], [7, 7.9], [7, 8.0], [7, 8.1], [7, 8.2], [7, 8.4], [7, 8.5], [7, 8.6], [7, 8.8], [7, 9.0], [7, 9.1], [7, 9.3], [7, 9.4], [7, 9.5], [7, 9.7], [7, 10.1], [7, 10.2], [7, 10.3], [7, 10.4], [7, 10.5], [7, 10.6], [7, 10.8], [7, 11.3], [7, 11.5], [7, 11.9], [7, 12.0], [7, 12.8], [7, 12.9], [7, 13.0], [7, 13.6], [7, 13.7], [7, 14.2], [7, 14.4], [7, 14.8], [7, 14.9], [7, 15.3], [7, 15.9], [7, 16.0], [7, 16.5], [7, 16.9], [7, 17.1], [7, 19.2], [7, 19.6], [7, 20.7], [7, 21.1], [7, 24.0], [7, 24.3], [7, 26.4], [7, 27.8], [7, 29.4], [7, 30.3], [7, 31.2], [7, 33.8], [7, 39.3], [7, 40.1], [7, 49.0], [7, 49.7], [7, 54.0], [8, 0.3], [8, 0.4], [8, 0.5], [8, 0.6], [8, 0.7], [8, 0.8], [8, 0.9], [8, 1.0], [8, 1.1], [8, 1.2], [8, 1.3], [8, 1.4], [8, 1.5], [8, 1.6], [8, 1.7], [8, 1.8], [8, 1.9], [8, 2.0], [8, 2.1], [8, 2.2], [8, 2.3], [8, 2.4], [8, 2.5], [8, 2.6], [8, 2.7], [8, 2.8], [8, 2.9], [8, 3.0], [8, 3.1], [8, 3.2], [8, 3.3], [8, 3.4], [8, 3.5], [8, 3.6], [8, 3.7], [8, 3.8], [8, 3.9], [8, 4.0], [8, 4.1], [8, 4.3], [8, 4.4], [8, 4.5], [8, 4.6], [8, 4.7], [8, 4.8], [8, 4.9], [8, 5.0], [8, 5.1], [8, 5.4], [8, 5.5], [8, 5.6], [8, 5.7], [8, 5.8], [8, 5.9], [8, 6.0], [8, 6.1], [8, 6.3], [8, 6.4], [8, 6.6], [8, 6.9], [8, 7.1], [8, 7.2], [8, 7.3], [8, 7.6], [8, 7.7], [8, 8.0], [8, 8.4], [8, 8.5], [8, 8.7], [8, 8.8], [8, 9.0], [8, 9.2], [8, 9.5], [8, 9.7], [8, 10.0], [8, 10.2], [8, 10.8], [8, 12.4], [8, 12.5], [8, 12.8], [8, 14.5], [8, 14.9], [8, 15.1], [8, 15.8], [8, 15.9], [8, 16.6], [8, 17.6], [8, 18.1], [8, 18.6], [8, 18.7], [8, 19.2], [8, 19.9], [8, 20.0], [8, 20.2], [8, 21.5], [8, 23.5], [8, 24.0], [8, 25.8], [8, 26.5], [8, 29.3], [8, 29.7], [8, 32.2], [8, 33.2], [8, 34.9], [8, 36.9], [8, 38.0], [8, 39.1], [8, 42.4], [8, 49.3], [8, 50.3], [8, 61.5], [8, 62.4], [8, 67.7], [9, 0.3], [9, 0.4], [9, 0.5], [9, 0.6], [9, 0.7], [9, 0.8], [9, 0.9], [9, 1.0], [9, 1.1], [9, 1.2], [9, 1.5], [9, 1.7], [9, 1.9], [9, 2.0], [9, 2.2], [9, 2.3], [9, 2.4], [9, 2.5], [9, 2.6], [9, 2.7], [9, 2.8], [9, 2.9], [9, 3.0], [9, 3.2], [9, 3.4], [9, 3.8], [9, 4.3], [9, 4.5], [9, 4.6], [9, 4.9], [9, 5.0], [9, 5.8], [9, 6.0], [9, 6.1], [9, 6.2], [9, 6.3], [9, 6.6], [9, 7.6], [9, 7.9], [9, 8.7], [9, 8.9], [9, 9.0], [9, 9.5], [9, 11.1], [9, 11.5], [9, 11.9], [9, 12.0], [9, 12.8], [9, 15.4], [9, 15.6], [9, 19.8], [9, 20.9], [9, 22.0], [9, 22.7], [9, 23.4], [9, 25.3], [9, 29.5], [9, 30.1], [9, 36.8], [9, 37.2], [9, 40.4], [10, 0.3], [10, 0.4], [10, 0.5], [10, 0.6], [10, 0.7], [10, 0.8], [10, 0.9], [10, 1.0], [10, 1.1], [10, 1.2], [10, 1.3], [10, 1.4], [10, 1.5], [10, 1.6], [10, 1.7], [10, 1.8], [10, 1.9], [10, 2.0], [10, 2.1], [10, 2.2], [10, 2.3], [10, 2.4], [10, 2.5], [10, 2.6], [10, 2.7], [10, 2.8], [10, 2.9], [10, 3.0], [10, 3.1], [10, 3.2], [10, 3.3], [10, 3.4], [10, 3.5], [10, 3.6], [10, 3.7], [10, 3.8], [10, 3.9], [10, 4.0], [10, 4.1], [10, 4.2], [10, 4.3], [10, 4.4], [10, 4.5], [10, 4.6], [10, 4.7], [10, 4.8], [10, 4.9], [10, 5.0], [10, 5.1], [10, 5.2], [10, 5.3], [10, 5.4], [10, 5.5], [10, 5.6], [10, 5.7], [10, 5.8], [10, 5.9], [10, 6.0], [10, 6.1], [10, 6.2], [10, 6.3], [10, 6.4], [10, 6.5], [10, 6.6], [10, 6.7], [10, 6.8], [10, 6.9], [10, 7.0], [10, 7.1], [10, 7.2], [10, 7.3], [10, 7.4], [10, 7.5], [10, 7.9], [10, 8.0], [10, 8.1], [10, 8.2], [10, 8.3], [10, 8.4], [10, 8.5], [10, 8.6], [10, 8.7], [10, 8.8], [10, 8.9], [10, 9.0], [10, 9.4], [10, 9.6], [10, 10.0], [10, 10.1], [10, 10.2], [10, 10.3], [10, 10.4], [10, 10.5], [10, 10.6], [10, 10.7], [10, 10.8], [10, 11.3], [10, 12.6], [10, 12.9], [10, 13.0], [10, 13.1], [10, 13.6], [10, 13.7], [10, 14.2], [10, 15.6], [10, 16.9], [11, 0.3], [12, 0.3], [12, 0.4], [12, 0.5], [12, 0.6], [12, 0.7], [12, 0.8], [12, 0.9], [12, 1.0], [12, 1.1], [12, 1.2], [12, 1.3], [12, 1.4], [12, 1.5], [12, 1.6], [12, 1.7], [12, 1.9], [12, 2.0], [12, 2.1], [12, 2.2], [12, 2.4], [12, 2.5], [12, 2.6], [12, 2.7], [12, 2.8], [12, 2.9], [12, 3.1], [12, 3.2], [12, 3.3], [12, 3.4], [12, 3.5], [12, 3.6], [12, 3.7], [12, 3.8], [12, 4.0], [12, 4.2], [12, 4.3], [12, 4.5], [12, 4.6], [12, 5.5], [12, 5.7], [12, 6.0], [12, 6.4], [12, 6.6], [12, 7.2], [12, 7.3], [12, 7.6], [12, 8.3], [12, 8.5], [12, 8.7], [12, 9.0], [12, 9.4], [12, 10.8], [12, 11.3], [12, 11.9], [12, 14.0], [13, 0.3], [13, 0.4], [13, 0.5], [13, 0.6], [13, 0.7], [13, 0.8], [13, 0.9], [13, 1.0], [13, 1.1], [13, 1.3], [13, 1.4], [13, 1.6], [13, 1.7], [13, 2.0], [13, 2.1], [13, 2.3], [13, 2.5], [13, 2.6], [13, 2.7], [13, 2.9], [13, 3.2], [13, 3.4], [13, 3.5], [13, 3.6], [13, 4.2], [13, 4.3], [13, 4.4], [13, 4.5], [13, 5.1], [13, 5.2], [13, 5.4], [13, 5.7], [13, 6.0], [13, 6.2], [13, 6.3], [13, 6.5], [13, 6.7], [13, 7.2], [13, 8.2], [13, 8.4], [13, 8.9], [13, 9.1], [13, 10.7], [14, 0.3], [14, 0.4], [14, 0.5], [14, 0.6], [14, 0.7], [14, 0.8], [14, 0.9], [14, 1.0], [14, 1.1], [14, 1.2], [14, 1.4], [14, 1.5], [14, 1.6], [14, 1.8], [14, 1.9], [14, 2.0], [14, 2.1], [14, 2.2], [14, 2.3], [14, 2.4], [14, 2.9], [15, 0.3], [15, 0.4], [15, 0.6], [15, 0.7], [15, 0.9], [15, 1.0], [15, 1.2], [15, 1.3], [15, 1.7], [15, 1.8], [15, 2.1], [15, 2.2], [15, 2.3], [15, 3.5], [15, 3.8], [15, 3.9], [15, 4.2], [15, 4.4], [15, 4.8], [15, 5.3], [15, 5.8], [15, 5.9], [15, 7.2], [17, 0.3], [17, 0.4], [17, 0.5], [17, 0.6], [17, 0.7], [17, 0.8], [17, 0.9], [17, 1.0], [17, 1.1], [17, 1.2], [17, 1.3], [17, 1.4], [17, 1.5], [17, 1.6], [17, 1.7], [17, 1.8], [17, 1.9], [17, 2.0], [17, 2.1], [17, 2.2], [17, 2.3], [17, 2.4], [17, 2.5], [17, 2.6], [17, 2.8], [17, 3.0], [17, 3.1], [17, 3.2], [17, 3.3], [17, 3.8], [17, 3.9], [17, 4.0], [17, 4.2], [17, 4.6], [17, 4.8], [17, 5.0], [17, 5.6], [17, 5.7], [17, 5.8], [17, 5.9], [17, 6.3], [17, 6.4], [17, 7.3], [17, 7.4], [17, 7.5], [17, 7.6], [17, 7.9], [17, 8.1], [17, 8.2], [17, 8.4], [17, 8.8], [17, 9.1], [17, 9.4], [17, 9.5], [17, 9.6], [17, 9.8], [17, 10.2], [17, 10.3], [17, 12.2], [17, 13.1], [17, 13.7], [17, 13.8], [17, 14.5], [17, 15.0], [17, 15.4], [17, 16.7], [17, 19.4], [17, 19.8], [17, 24.2], [17, 24.6], [17, 26.7], [17, 30.0], [18, 0.3], [18, 0.4], [18, 0.5], [18, 0.6], [18, 0.7], [18, 0.8], [18, 0.9], [18, 1.0], [18, 1.1], [18, 1.2], [18, 1.3], [18, 1.4], [18, 1.5], [18, 1.6], [18, 1.7], [18, 1.8], [18, 1.9], [18, 2.0], [18, 2.1], [18, 2.2], [18, 2.3], [18, 2.4], [18, 2.5], [18, 2.6], [18, 2.7], [18, 2.8], [18, 2.9], [18, 3.0], [18, 3.1], [18, 3.2], [18, 3.3], [18, 3.4], [18, 3.5], [18, 3.6], [18, 3.7], [18, 3.8], [18, 4.0], [18, 4.1], [18, 4.2], [18, 4.3], [18, 4.4], [18, 4.5], [18, 4.6], [18, 4.7], [18, 4.8], [18, 5.1], [18, 5.2], [18, 5.4], [18, 5.6], [18, 5.7], [18, 5.8], [18, 5.9], [18, 6.3], [18, 6.5], [18, 6.6], [18, 6.7], [18, 6.8], [18, 6.9], [18, 7.3], [18, 7.6], [18, 7.9], [18, 8.2], [18, 8.4], [18, 8.5], [18, 8.7], [18, 9.1], [18, 10.1], [18, 10.2], [18, 10.4], [18, 10.7], [18, 12.8], [18, 13.1], [18, 13.8], [18, 14.5], [18, 15.0], [18, 15.4], [18, 16.7], [18, 19.4], [18, 19.8], [18, 24.2], [18, 24.6], [18, 26.7]];

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: monospace;
  }
  
  circle {
    stroke: #fff;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .tick text {
    font-size: 11px;
    font-family: monospace;
  }
  
  .label {
    font-size: 11px;
    font-family: monospace;
  }
  
  .node text {
    font-family: monospace;
    font-size: 6px !important;
    color: gray;
  }
  
  .grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
  }
  
  .grid path {
    stroke-width: 0;
  }
  
  .tooltip {
    position: absolute;
    width: auto;
    height: auto;
    padding: 2px;
    pointer-events: none;
    font-size: 11px;
    background-color: rgba(23, 155, 54, 0.9);
    border-radius: 5px;
    color: white;
  }
  
  #range_form {
    display: inline-block;
  }
  
  #range_form input {
    width: 78px;
    height: 33px;
    font-size: 13px;
    text-align: center;
    font-weight: normal;
    border-radius: 3px;
    font-family: monospace;
    color: crimson;
    border: 1px dashed green;
  }
  
  input:focus {
    outline: none;
  }
</style>

<body>
  <form id='range_form'>
    <input id='filter_unitrate_from' name='filter_unitrate_from' placeholder='rate_min' onfocus="this.placeholder = ''" onblur="this.placeholder = 'rate_min'" ></input>
    <input id='filter_unitrate_to' name='filter_unitrate_to' placeholder='rate_max' onfocus="this.placeholder = ''" onblur="this.placeholder = 'rate_max'"></input>
    <input id='filter_spw_from' name='filter_spw_from' placeholder='spw_min' onfocus="this.placeholder = ''" onblur="this.placeholder = 'spw_min'"></input>
    <input id='filter_spw_to' name='filter_spw_to' placeholder='spw_max' onfocus="this.placeholder = ''" onblur="this.placeholder = 'spw_max'"></input>

    <input type='submit' style='display: none;'>
    HIT &crarr; to filter results
  </form>

  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="data.js"></script>
  <script>
    var margin = {top: 60, right: 60, bottom: 60, left:60};
    var width = 1024 - margin.left - margin.right;
    var height = (550 - 10) - margin.top - margin.bottom;
    var padding = 1;
    var maxRadius = 12;
    var colors = ['#D2527F', 'gray']

    var spw = [];
    var prices = [];

    var margin = {top: 20, bottom: 30, left: 50 , right: 30};

    data = data.slice(1000, 2000); //taking a subset
    for (var i_ = 0; i_< data.length; i_++){
      spw.push(data[i_][0]);
      prices.push(data[i_][1]);
    }

    var min_x = d3.min(spw);
    var max_x = d3.max(spw);
    var min_y = d3.min(prices);
    var max_y = d3.max(prices);

    var n = data.length;
    var m = data.length;

    var x = d3.scale.linear().domain([min_x-1, max_x+1]).range([min_x, width]);
    var y = d3.scale.linear().domain([min_y-1, max_y+1]).range([height, min_y]);

    var nodes = []; 

    for (i in data){
      var x_ = x(spw[i]);
      var y_ = y(prices[i]);
      nodes.push({
        radius: maxRadius * 0.23,
        //color: 'darkgray',
        color: colors[Math.round(Math.random(1))],
        cx: x_,
        cy: y_,
        spw: spw[i],
        price: prices[i],
      });
    }

    var force = d3.layout.force()
        .nodes(nodes)
        .size([width + margin.left + margin.right, height + margin.top + margin.bottom])
        .gravity(0)
        .charge(0)
        .on("tick", tick)
        .start();

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right, height)
        .attr("height", height + margin.top + margin.bottom)
        .append('g')
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var xAxis = d3.svg.axis()
                .scale(x)
                .ticks([40])
                .tickFormat(d3.format('d'))
                .orient("bottom");

    var yAxis = d3.svg.axis()
                .scale(y)
                .tickFormat(d3.format(',.2f'))
                .orient("left");

    svg.append("g")         
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_axis()
            .tickSize(-height, 0, 0)
            .tickFormat("")
        )

    svg.append("g")         
        .attr("class", "grid")
        .call(make_y_axis()
            .tickSize(-width, 0, 0)
            .tickFormat("")
        )

    svg.append("g")
           .attr("class", "axis x")
           .attr("transform", "translate("+ 0+"," + (height) + ")")
           .call(xAxis)
           .append("text")
            .attr("class", "label")
            .attr("x", width)
            .attr("y", -6)
            .style("text-anchor", "end")
            .text("SPW");

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate("+ 0 +"," + 0 + ")")
        .call(yAxis)
        .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Unit Rate");


    var tooltip = d3.select("body").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);

    var node = svg.selectAll('.node').data(nodes)
                  .enter().append("g")
                  .attr("class", "node")
                  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                  .attr("spw", function(d) {return d.spw; })
                  .attr("price", function(d) {return d.price})
                  .call(force.drag);

    node.append("circle")
        .style("fill", function(d) { return d.color; })
        .attr("r", function(d) { return d.radius; })
        .on("mouseover", function(d) {
            tooltip.transition().duration(50).style("opacity", .9);
            tooltip.html('(SPW: '+d.spw+', PRICE: $'+d.price+')').style("left", (d3.event.pageX + 5) + "px").style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition().duration(50).style("opacity", 0);
        });

    node.append("text")
          .attr("text-anchor", "middle")
          .attr("dy", "-.4em")
          .style("font-size", "11px");

    function make_x_axis() {        
        return d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .ticks([40])
    }

    function make_y_axis() {        
        return d3.svg.axis()
          .scale(y)
          .orient("left")
    }

    function tick(e) {
      node
          .each(gravity(.5 * e.alpha))
          .each(collide(.4))
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    }

    function gravity(alpha) {
      return function(d) {
          d.y += (d.cy - d.y) *  alpha;
          d.x += (d.cx - d.x) * 0.1 * alpha;
      };
    }

    function collide(alpha) {
      var quadtree = d3.geom.quadtree(nodes);
        return function(d) {
          var r = d.radius + maxRadius + padding,
              nx1 = d.x - r,
              nx2 = d.x + r,
              ny1 = d.y - r,
              ny2 = d.y + r;
          quadtree.visit(function(quad, x1, y1, x2, y2) {
            if (quad.point && (quad.point !== d)) {
              var x = d.x - quad.point.x,
                  y = d.y - quad.point.y,
                  l = Math.sqrt(x * x + y * y),
                  r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding ;
              if (l < r) {
                l = (l - r) / l * alpha;
                d.x -= x *= l;
                d.y -= y *= l;
                quad.point.x += x;
                quad.point.y += y;
              }
            }
            return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
          });
        };
    }

    //hide the bubbles on filter
    function filter(){
      $('#range_form').on('submit', function(e){
        e.preventDefault(e);

        inputs = $(this).serializeArray()
        var values= {};

        for (i in inputs){
          var key_ = inputs[i].name;
          var val_ = parseFloat(inputs[i].value);
          values[key_] =  ((!val_) ? 0 : val_);
        }
        hide_bubbles(values);
      });
    }

  function hide_bubbles(values){
    ur_from = values.filter_unitrate_from;
    ur_to = values.filter_unitrate_to;

    spw_from = values.filter_spw_from;
    spw_to = values.filter_spw_to;

    ur_from = ((!ur_from) ? min_y: ur_from);
    ur_to = ((!ur_to) ? max_y : ur_to);

    spw_from = ((!spw_from) ? min_x : spw_from);
    spw_to = ((!spw_to) ? max_x : spw_to);

    if((ur_from > ur_to)){
      ur_to = ur_from;
      ur_from = min_y;
    }

    if((spw_from > spw_to)){
      spw_to = spw_from;
      spw_from = min_x;
    }

    var to_remove = d3.selectAll(".node").filter(function(d){ return d.price < ur_from || d.price > ur_to; });
    var to_keep = d3.selectAll(".node").filter(function(d){ return d.price >= ur_from && d.price <= ur_to; });
    var to_remove_sp = d3.selectAll(".node").filter(function(d){ return d.spw < spw_from || d.spw > spw_to; });

    force.resume();
    to_remove.transition().duration(2000).selectAll('circle').attr("opacity", 0.3).attr('r', function(d) { return 0;});
    to_keep.transition().duration(2000).selectAll('circle').attr("opacity", 1).attr('r', function(d) { return d.radius;});
    to_remove_sp.transition().duration(2000).selectAll('circle').attr("opacity", 0.3).attr('r', function(d) { return 0;});
    tick({type: "tick", alpha: 3});
  }

  filter();
</script>
</body>

thumbnail.png