D3 Examples - MapD3 chart update

xxxxxxxxxx
 
<html>
<head>
  <meta charset="utf-8">
<link rel="stylesheet" href="./mapd3.min.css">
<style>
.chart1 {
  margin-top: 80px;
  margin-left: 40px;
}
.mapd3 {
  user-select: none;
  font-family: sans-serif;
}
</style>
</head><body>
<div class="chart1"></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 keyType = "time" // time, number, string
const chartType = "line" // line, stackedArea
​
const dataManager = mapd3.DataManager()
    .setConfig({
      keyType,
      range: [0, 100],
      pointCount: 20,
      groupCount: 2,
      lineCount: 4
    })
const data = dataManager.generateTestDataset()
​
const colors = mapd3.colors.mapdColors
const palette = data.series.map((d, i) => ({key: d.id, value: colors[i]}))
​
const chartNode1 = document.querySelector(".chart1")
const chart1 = mapd3.Chart(chartNode1)
  .setConfig({
    // common
    width: 800,
    height: 400,
    margin: {
      top: 32,
      right: 70,
      bottom: 64,
      left: 70
    },
    keyType, // time, number, string
    chartType, // line, area, stackedArea, bar, stackedBar
​
    // intro animation
    isAnimated: false,
    animationDuration: 1500,
​
    // scale
    colorSchema: palette,
    defaultColor: "skyblue",
​
    // axis
    tickPadding: 5,
    xAxisFormat: "auto",
    tickSizes: 8,
    yTicks: "auto",
    y2Ticks: "auto",
    xTickSkip: "auto",
    yAxisFormat: ".2f",
    y2AxisFormat: ".2f",
    grid: "horizontal",
    axisTransitionDuration: 0,
​
    // hover
    dotRadius: 4,
​
    // tooltip
    valueFormat: ".2f",
    mouseChaseDuration: 0,
    tooltipHeight: 48,
    tooltipWidth: 160,
    dateFormat: "%b %d, %Y",
​
    // legend
    legendXPosition: "auto",
    legendYPosition: "auto",
    legendTitle: "Dataset",
    legendIsEnabled: true,
​
    // binning
    binningResolution: "1mo",
    binningIsAuto: true,
    binningToggles: ["10y", "1y", "1q", "1mo"],
    binningIsEnabled: true,
​
    // domain
    xDomain: ["a", "b"],
    yDomain: [0, 200],
    y2Domain: [0, 300],
    domainEditorIsEnabled: true,
​
    // brush range
    brushRangeMin: "Jan 01, 2001",
    brushRangeMax: "Jan 02, 2002",
    brushRangeIsEnabled: true,
​
    // brush
    brushIsEnabled: true,
​
    // label
    xLabel: "X Axis Label",
    yLabel: "Y Axis Label",
    y2Label: "Y2 Axis Label"
  })
  .setData(data)
chart1.events
  .onBrush("brushStart", (d) => console.log(d))
  .onBrush("brushMove", (d) => console.log(d))
  .onBrush("brushEnd", (d) => console.log(d))
  .onBinning("change", (d) => console.log(d))
  .onDomainEditor("domainChange", (d) => console.log(d))
  .onDomainEditor("domainLockToggle", (d) => console.log(d))
  .onBrushRangeEditor("rangeChange", (d) => console.log(d))
  .onLabel("axisLabelChange", (d) => console.log(d))
  .onHover("hover", (d) => console.log(d))
  .onPanel("mouseOverPanel", (d) => console.log(d))
  .onPanel("mouseOutPanel", (d) => console.log(d))
  .onPanel("mouseMovePanel", (d) => console.log(d))
​
</script>
</body>
</html>
    