How to have the smaller circle above the bigger ones?

New To Observable
1

here is my plot:
image

my code:

size_dot=Plot.plot({
style: {
  fontFamily: "system-ui",
    fontSize: "15px",
    overflow: "visible"
  },
  height: 600,
  width: 1000,
  color:{
    legend:true,
    type: "categorical",
    scheme: "Set1",},
  label:null,
  grid:true,
  marginLeft:250,
  marks: [
    Plot.frame({ stroke: "lightgray" }),
    Plot.dot(name?new_data:data, {x: "effective_date", y: name?"ndc":"ndc_description" , r: "new_percent_change", fill: name?"primary_reason":"classification_for_rate_setting", opacity:0.5, sort:"new_percent_change"})
  ]
})
2

The logical thing to do would be to sort the data on new_percent_change (since that’s what r is based on) in descending order so that the larger circles are laid down before the smaller ones. Even if you’ve shared the complete code, it’s hard to say more without a linked notebook, since we don’t have the data.

3

By default, Plot.dot sorts the dots by descending r, so that smaller dots are visible above larger ones. In short, removing the sort option should just work.

But I you want to be explicit about it, you might use sort: “new_percent_change”, reverse: true.