Added sample files

mode · Nov 15, 2024 · eea9804 · eea9804
1 parent 142b20e
commit eea9804
Show file tree

Hide file tree

Showing 6 changed files with 4,616 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,2 @@
 # Dependency directories
 node_modules/
-
-examples/*
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Muze</title>
+  </head>
+
+  <body>
+    <div id="chart"></div>
+    <p>Hello</p>
+    <!-- <script src="./js/legend-samples/line-dashed.js"></script> -->
+    <!-- <script src="./js/axis/sample4.js"></script> -->
+    <!-- <script src="./js/test.js"></script> -->
+    <!-- <script src="./js/word.js"></script> -->
+    <!-- For testing examples exported from Mode use the script below -->
+    <!-- <script src="./js/axis/import-from-mode.js"></script> -->
+    <!-- <script type="module" src="./js/index.js"></script> -->
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,73 @@
+import muze from "@viz/muze";
+import "@viz/muze/muze.css";
+
+const loadData = async function ({
+  dataSetLink = "/data/cars.json",
+  schemaLink = "/data/cars-schema.json",
+}) {
+  let data = await fetch(dataSetLink).then((d) =>
+    dataSetLink.split(".").pop() === "csv" ? d.text() : d.json()
+  );
+  let schema = await fetch(schemaLink).then((d) => d.json());
+
+  return { schema, data };
+};
+
+let { schema, data } = await loadData({
+  dataSetLink: "/data/mn_mv/new_data.csv",
+  schemaLink: "/data/mn_mv/schema.json",
+});
+
+const { DataModel } = muze;
+const env = muze();
+console.log("Hi");
+
+const formattedData = DataModel.loadDataSync(data, schema);
+let rootData = new DataModel(formattedData);
+
+rootData = rootData.select({
+  operator: "and",
+  conditions: [
+    {
+      field: "region",
+      value: ["Central", "East"],
+      operator: "in",
+    },
+    // {
+    //   field: "Measure Names",
+    //   value: ["quantity", "profit"],
+    //   operator: "in",
+    // },
+    {
+      field: "ship_mode",
+      value: ["First Class", "Second Class"],
+      operator: "in",
+    },
+    {
+      field: "segment",
+      value: ["Consumer", "Corporate"],
+      operator: "in",
+    },
+  ],
+});
+
+window.canvas = env
+  .canvas()
+  .data(rootData)
+  .width(900)
+  .height(600)
+  .rows([["Measure Names", "region", "ship_mode"]])
+  .columns([["region", "category"]])
+  // .detail(["category"])
+  .layers([
+    {
+      mark: "text",
+      encoding: {
+        text: "Measure Values",
+        color: "sales",
+      },
+    },
+  ])
+  .mount("#chart");
+
+// console.log(window.canvas);