D3 Examples - MapD3 early example

xxxxxxxxxx
 
<html>
<head>
<link rel="stylesheet" href="mapd3.min.css">
</head><body>
<div class="chart1"></div>
<div class="chart2"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<script src="mapd3.min.js"></script>
<script>
​
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>
    