feat: more default examples (#98)

src/examples/line-chart.js

@@ -0,0 +1,77 @@
+const code = `
+return {
+  scales: {
+    y: {
+      data: { field: 'Sales' },
+      invert: true,
+      expand: 0.2
+    },
+    t: { data: { extract: { field: 'Year' } } }
+  },
+  components: [{
+    type: 'axis',
+    dock: 'left',
+    scale: 'y',
+    formatter: {
+      type: 'd3-number',
+      format: '$,.1r'
+    },
+  },{
+    type: 'axis',
+    dock: 'bottom',
+    scale: 't',
+    formatter: {
+      type: 'd3-time',
+      format: '%Y-%m'
+    }
+  }, {
+    key: 'lines',
+    type: 'line',
+    data: {
+      extract: {
+        field: 'Year',
+        props: {
+          v: { field: 'Sales' }
+        }
+      }
+    },
+    settings: {
+      coordinates: {
+        major: { scale: 't' },
+        minor: { scale: 'y', ref: 'v' }
+      },
+      layers: {
+        line: {}
+      }
+    }
+  }]
+};
+`;
+
+const data = `
+var arr = [
+  ['Year', 'Sales']
+];
+let s = 0.5;
+for (var i = 0; i < 500; i++) {
+  s = s - 2 + 4 * Math.random();
+  arr.push([
+    new Date(2017, 0, i).valueOf(),
+    10000 + s * 10000,
+  ]);
+}
+
+return [{
+  type: 'matrix',
+  data: arr
+}];
+`;
+
+const item = {
+  id: 'line-chart',
+  title: 'Line chart',
+  code,
+  data,
+};
+
+export default item;

src/examples/scatter-plot.js

@@ -0,0 +1,100 @@
+const code = `
+return {
+  scales: {
+    s: {
+      data: {
+        field: 'Sales'
+      },
+      expand: 0.2,
+      invert: true
+    },
+    m: {
+      data: {
+        field: 'Margin'
+      },
+      expand: 0.1
+    },
+    col: {
+      data: { extract: { field: 'Year' } },
+      type: 'color'
+    }
+  },
+  components: [{
+    key: 'y-axis',
+    type: 'axis',
+    scale: 's',
+    dock: 'left'
+  }, {
+    type: 'legend-cat',
+    dock: 'right',
+    scale: 'col'
+  }, {
+    key: 'x-axis',
+    type: 'axis',
+    scale: 'm',
+    dock: 'bottom'
+  }, {
+    key: 'p',
+    type: 'point',
+    data: {
+      extract: {
+        field: 'Month',
+        props: {
+          y: { field: 'Sales' },
+          x: { field: 'Margin' },
+          group: { field: 'Year' }
+        }
+      }
+    },
+    settings: {
+      x: { scale: 'm' },
+      y: { scale: 's' },
+      shape: 'circle',
+      size: () => Math.random(),
+      strokeWidth: 2,
+      stroke: '#fff',
+      opacity: 0.8,
+      fill: { scale: 'col', ref: 'group' }
+    }
+  }]
+};
+`;
+
+const data = `
+return [{
+  type: 'matrix',
+  data: [
+    ['Year', 'Month', 'Sales', 'Margin'],
+    ['2010', 'Jan', 1106, 7],
+    ['2010', 'Feb', 5444, 53],
+    ['2010', 'Mar', 147, 64],
+    ['2010', 'Apr', 7499, 47],
+    ['2010', 'May', 430, 62],
+    ['2010', 'June', 9735, 13],
+    ['2010', 'July', 7435, 15],
+    ['2011', 'Jan', 1482, 45],
+    ['2011', 'Feb', 2659, 76],
+    ['2011', 'Mar', 1261, 73],
+    ['2011', 'Apr', 3085, 56],
+    ['2011', 'May', 3035, 91],
+    ['2011', 'June', 7691, 88],
+    ['2011', 'July', 3012, 81],
+    ['2012', 'Jan', 7980, 61],
+    ['2012', 'Feb', 2564, 22],
+    ['2012', 'Mar', 7957, 98],
+    ['2012', 'Apr', 5809, 1],
+    ['2012', 'May', 429, 2],
+    ['2012', 'June', 6757, 77],
+    ['2012', 'July', 9415, 92]
+  ]
+}];
+`;
+
+const item = {
+  id: 'scatter-plot',
+  title: 'Scatter plot',
+  code,
+  data,
+};
+
+export default item;