[idea] Parking spot for missing values

Show and Tell
1

Hi all. While implementing D3 it in a page of mine I adopted a unorthodox solution which maybe might interest others or even be included as an option in the library itself.

My use case was displaying all records of a scatter plot where some Y values were unavailable. Displaying them as zero or not displaying them was not acceptable. My solution was to setup a “parking line” parallel to the X axis where records without the Y value would be positioned, as follows:

parking-spot
parking-spot2070×1108 74.7 KB

They way I implemented it was simply by drawing a line and vertically moving markers over it:

container.append('line')
    .style("stroke", "black").style("stroke-width", 1)
    .attr("x1", marginLeft)
    .attr("y1", parkingHeight)
    .attr("x2", width - marginRight)
    .attr("y2", parkingHeight); 

container.selectAll("circle")
    .attr("cy", d => isNaN(d.y) ? parkingHeight : y(d.y))

Animations help to keep track of the same records across multiple visualizations. While I am satisfied with the current solution for the Y axis, I am still wondering how to clearly display multiple records whose both X and Y values are missing.

4 Likes