Bullet chart review

[Kiss-World]

link: https://observablehq.com/d/9d6717f0a17f286d

Plot.plot({
    x:{axis:null},
  y:{axis:null},
    margin:20,
  marginTop:70,
  marginBottom:70,
  color:{range:["#696969","#B6B5B5","#E0DFDF"]},
  width:300,
  height:300,
  marks:[
    Plot.barX(data2,Plot.groupY({x:"sum"},{x:"目标",y:"序列",insetBottom:4,insetTop:4,fill:"分类"})),
    Plot.barX(data,{x:"前值",y:"序列",fill:"#F7AA58",insetBottom:12,insetTop:12}),
    Plot.rect(data,{x:"后值",y:"序列",insetLeft:12,insetRight:12,inset:10,fill:"#DA1616"})

  ]
})

[mbostock]

Nice! If you’re interested, here are a few suggestions.

Plot.plot({
  width: 300,
  height: 200,
  color: { range: ["#696969", "#B6B5B5", "#E0DFDF"] },
  marks: [
    Plot.barX(
      data2,
      Plot.groupY({ x: "sum" }, { x: "目标", y: "序列", fill: "分类" })
    ),
    Plot.barX(data, {
      x: "前值",
      y: "序列",
      fill: "#F7AA58",
      insetBottom: 8,
      insetTop: 8
    }),
    Plot.tickX(data, {
      x: "后值",
      y: "序列",
      stroke: "#DA1616",
      strokeWidth: 6,
      inset: 6
    })
  ]
})

The changes are:

1. Use tickX instead of rect for the red indicators. When you use the rect mark with only x and y channels (as opposed to x1 and x2, or y1 and y2) it is interpreted as a cell mark and forces both the x and y scales to become ordinal. But in this case, we want the x scale to be quantitative. The tickX mark is the appropriate choice when x is quantitative and y is ordinal.
2. Use scale padding instead of mark insets for vertical separation. This is just a matter of personal taste, but because the padding is applied across all marks, I think it makes it a little easier to configure; you don’t have to specify as many insets.

I also restored the axes and removed the custom margins which I think makes the chart more readable.

[Kiss-World]

Cool. I wasn't very familiar with the use of tickX, I feel there be better ones, thanks for the guidance.