D3 Interview Questions

Having interviewed folks for positions requiring knowledge in data visualization, specifically D3.js, I know it can be tricky. This is especially true if the interviewer does not know D3. Here’s a set of questions I think might help. I’ve bolded the key terms to look for in the response of the candidate in the case that the interviewer does not actually know the answers. I can totally sympathize with this case, which I’m sure does happen a lot. That’s probably why you’re looking to hire someone with D3 expertise in the first place, to fill a gap in the team.

Phone Screening

As a quick phone screening question to filter out folks who know nothing about graphics, you could ask

In which corner of the screen is pixel coordinate (0,0)?

Answer — top left.

Assuming they answer correctly, you could then ask:

How would you create a scatter plot with D3?

Everyone forgets the nitty gritty details and needs to look them up from examples, but if a candidate can sketch the implementation out conceptually — e.g. I’d use a linear scale for X and a linear scale for Y, use the Margin Convention to put the points inside an SVG <g> element with translation, parse CSV strings to numbers, and use D3 axes — then they’re on the right track. If they get the range right for the Y scale, they’re pretty good. Here’s a reference Scatter Plot.

In Person

Assuming the candidate makes it to the onsite interview, you can follow up the scatter plot question with the same question but for a bar chart.

How would you create a bar chart with D3?

The candidate should immediately say “ordinal scale” and “range bands”. If they’re really good then they will be able to get the “height” and “y” attribute functions right , which are tricky for vertical bar charts because the Y pixel coordinate starts at the top. Here’s a reference Bar Chart.

Next you could do the same for a line chart.

How would you create a line chart with D3?

The candidate should know that the line itself will be an SVG <path> element, and the “d” attribute needs to be set using d3.svg.line.
Here’s a reference Line Chart.

Coding a stacked or grouped bar chart is actually very difficult and subtle. I don’t think hardly anyone could do that on a whiteboard, but this would be a good “back pocket” question though if they nail all the others.

How about a stacked or grouped bar chart?

The candidate should at least know that using d3.layout.stack is required. If they mention d3.nest and nested selections, then they really know what they are talking about. Here’s a reference Stacked Bar Chart and Grouped Bar Chart.

Asking a high-level question about interactions might also be good.

What interactions could you add to a scatter plot?

One answer could be tool tips (more detailed information on hover). Brushing should also come up, the ability to drag to select a region in the visualization. Perhaps panning and zooming might also come up. Once you have interactions you can have linked views, multiple visualizations that interact with one another.

How might one utilize multiple charts together?

In this territory, it’s a good sign if the candidate mentions Crossfilter and the Reusable Charts Pattern. Linked views typically interact via filtering, where interactions like brushing or picking in one view cause the input data in other views to be filtered.

Another common linked view pattern is Focus + Context, where brushing in one view causes another linked view to zoom into the brushed region.