CODEWITHSUNDEEP
d3.jsvisualization
bearrito
bearrito

Reputation: 2315

D3 Ordinal Scales with Scatter Plot

I'm attempting to use D3 to produce a scatter plot where the x-axis is ordinal. You should be able to see a small exmaple of this at : http://plnkr.co/edit/c7iy6T?p=preview

My first order question is : How would I shift the "clusters" over so they they are situated on top of the ordinal labels.

My second order question is : if I had the json 

{x : 1.1, y : 1.9  ,label : foo}
{x :  .9, y : 2.2  ,label : foo}
{x : 2.1, y : 1.2  ,label : bar}
{x : 1.9, y : 5.3  ,label : bar}

What would be the most idiomatic way to have that displayed in scatterplot so that the labels would essentially be situated over the integer values 1,2 while the data is plotted as one would with a linear scale scatterplot.

Edit:

My second question concerns the following. I can have M clusters, for cluster m i know that the x coordinate will be "centered" around the integer m. Like above all all the foo values were closer to 1 than any other integer. I want to be able to pass in a structure like above. And have the output be a typical x-y plot but where the integer ticks have been suppressed and only the labels appear.

Lars, answer below does center my values, but it also seems to ignore any other scale and compress the x-values into what appears to be a line. This is visible at : http://plnkr.co/edit/ncANkH?p=preview. Lars solution would be ideal but for the compression problem.

Upvotes: 2

Views: 1783

Answers (1)

nsonnad
nsonnad

Reputation: 634

Regarding your second question (if I understand it correctly), you can use the same kind of logic that is generally used to make grouped charts (as per this example). Basically you will create two X scales, one to arrange internally the dots of each scatterplot, and another to arrange the scatterplots themselves on the stage.

The range of the wrapper (ordinal) scale will be the width of the stage, whereas the range of the internal (linear) scale will be x.rangeBand(). You will draw each individual scatterplot and transform each of them individually according to the wrapper scale.

To do this, your data will need to be in a more organized format such that each individual scatterplot has its own object. I've made this Plunk that I think achieves what you want. (It's a bit ugly, but the Plunk site was unbearably slow for me so I gave up on aesthetics.)

There are two things you may want to note about how this was achieved. First, I rearranged your data into this format:

var data = [
{
  name: 'baby',
  values: []
},
{
  name: 'adult',
  values: []
},
{
  name: 'youth',
  values: []
}

]

Second, I bound this top-level data to draw three SVG g groups, then used a key function to bind the second-level data to the circles, like so:

dotGroups.selectAll('.dot')
   .data(function(d) { return d.values; })

Hope that helps.

Upvotes: 2

Related Questions