Create a density map

This last example shows how you can achieve virtually anything since you are coding in a sandbox. There's no limit to what you can do with Smart charts.

In this snippet, notice how we import the D3js library. Of course, you can choose to use any other library of your choice.

This density map chart is inspired by this one ↗.

The resulting chart can be resized to fit your use.

Agent

agent.addChart('densityMap', async (context, resultBuilder) => {
  // Load contours to draw the map
  // Ref.: https://github.com/d3/d3-fetch/blob/v2.0.0/README.md#json
  const contours = await superagent
    .get(
      `https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3` +
        `f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffb` +
        `c07c11350ee?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27coun` +
        `ties-albers-10m.json`,
    )
    .buffer(true);

  // Load population data
  const population = await superagent
    .get(
      `https://static.observableusercontent.com/files/beb56a2d9534662123fa352ffff2db8472e4` +
        `81776fcc1608ee4adbd532ea9ccf2f1decc004d57adc76735478ee68c0fd18931ba01fc859ee4901d` +
        `eb1bee2ed1b?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27popu` +
        `lation.json`,
    )
    .buffer(true);

  return resultBuilder.smart({
    contours: JSON.parse(contours.body.toString('utf-8')),
    population: JSON.parse(population.body.toString('utf-8')),
  });
});

Component

Template