D3.js example (Wilkinson type) Dot example

I searched but could not find an example of dot plot in D3. Does anyone know of this type of plot that has been implemented in any of the graphics libraries built in D3, or in the D3 example?

To be clear, a scatter plot is similar to a histogram, except that the dots are stacked on top of each other on top of the histograms. In R, this can be done using the ggplot package.

qplot(x=rnorm(200),geom="dotplot")

      

enter image description here

Edit:

So, as Lars pointed out, the answer to this question solves the problem when the data was aggregated into an array with the number of points per column. In my case, I want to display interactive information about each of the points (for example, a hint with the actual data value), so I cannot aggregate this way. Here are some examples of data that I would like to plot.

data = [0.4897,0.7685,-0.7367,-0.7483,-0.5149,0.0448,-1.7294,1.8667,1.0116,0.3896,-0.4267,-0.1161,-1.4618,-1.3198,-1.999,1.2883,1.7123,-1.5902,-0.7937,1.0359,-0.485,-0.2391,0.4136,-0.2506,0.7333,1.1902,0.7132,-0.3096,0.4793,-0.7779,-0.19,-0.0855,1.4498,1.0196,0.537,0.5341,0.5363,0.2664,-0.8586,-0.5667,1.2263,1.508,-0.139,-0.3015,-0.3679,0.483,0.9381,-0.1298,-0.1024,1.3079,-0.9554,1.167,0.3245,1.0424,-0.3589,1.3943,2.2537,-1.3225,0.8814,-0.2723,0.3782,0.8982,0.4167,0.1614,0.5659,-0.4672,-0.7634,-0.8591,-1.0887,0.4374,0.3618,-0.7074,-0.9812,-0.6216,1.0774,0.9979,-0.799,1.186,0.5704,1.8626,1.4321,0.3179,1.6356,0.1646,2.1265,-0.2409,0.0043,1.1503,-1.615,-0.677,-0.5573,1.9954,0.8123,-0.8011,0.2088,0.5007,0.9113,-0.8742,-0.5857,0.409,-1.0702,-0.016,0.6822,1.0133,-1.2022,0.0561,0.8704,-1.5982,1.6676,-0.0344,-1.739,-2.0362,-1.1955,0.7838,0.5037,-0.2123,0.2951,1.0192,0.97,0.2384,-0.2223,-0.1448,0.9924,1.5586,1.4238,-2.4781,-0.2456,-1.8822,-0.4424,-0.5941,-0.9948,1.8733,-0.2242,-1.5359,-0.103,0.7378,0.7691,0.069,0.3952,-0.4267,-0.2077,-0.4327,-1.1705,0.0399,-0.6586,0.1043,2.9475,-0.4968,-0.5432,0.4924,1.2173,0.177,0.2861,-0.709,1.4922,-1.1633,-0.084,-1.2275,0.5193,0.2404,-1.4495,-0.3346,0.3153,-0.573,0.4139,-0.9114,1.4844,0.1166,0.8734,2.182,-0.3765,2.0888,1.1178,0.2684,-0.5803,0.893,0.2127,-0.107,0.0569,1.0699,0.2975,1.3017,0.4541,1.8337,0.7915,1.705,-0.2708,-0.9626,1.1994,-1.6666,1.2642,0.5244,-1.1757,0.9278,0.882,-0.8993,1.2435,0.3841,0.6815,-0.1459] 

      

+3


source to share


2 answers


You can use a function d3.histogram

to load your data and then use a nested structure to draw your circles.



See this bl.ocks for code and a live demo of a self-updating patch with interactive information (hint) when you .mouseover

point.

0


source


A scatter plot has nothing to do with histogram or binning. The method using d3.histogram will not give a scatter plot. Please read a reprint of my article at https://www.cs.uic.edu/~wilkinson/Publications/dotplots.pdf . The correct algorithm is given there.



0


source







All Articles