MapD3 early example

const dataManager = mapd3.dataManager()
const data = dataManager.generateTestDataset()

const observer = mapd3.observer(dataManager)

const colors = mapd3.colors.mapdColors

const chartNode1 = document.querySelector(".chart1")
const chart1 = mapd3.line(chartNode1)
  .setConfig({
    width: 800,
    height: 400,
    margin: {
      top: 8,
      right: 32,
      bottom: 32,
      left: 32
    },
    grid: "horizontal",
    xAxisFormat: "%x",
    yAxisFormat: ".1f",
    yTicks: 5,
    colorSchema: colors
  })
  .setData(data)

mapd3.tooltip(chart1)

const chart2 = mapd3.line(".chart2")
  .setConfig({
    width: 800,
    height: 100,
    margin: {
      top: 8,
      right: 32,
      bottom: 32,
      left: 32
    },
    grid: "horizontal",
    xAxisFormat: "%x",
    yAxisFormat: ".1f",
    yTicks: 3,
    colorSchema: colors
  })
  .setData(data)

mapd3.brush(chart2)
  .on("brushMove", (e) => {
    observer.pub("brushChange", e)
  })

observer.sub("dataFilter", (_data) => {
  chart1.setData(_data)
})

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js