Adding all files for demo

code-nebula · Apr 18, 2019 · 43e343f · 43e343f
commit 43e343f
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# chart-color-generator
diff --git a/index.html b/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+	<html>
+	<head>
+		<title>Code Nebula | Chart Color Generator </title>
+
+    <!-- Import Chart.js via CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
+
+    <!-- Import D3 Scale Chromatic via CDN -->
+    <script src="https://d3js.org/d3-color.v1.min.js"></script>
+    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
+    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
+
+
+		<link rel="stylesheet" type="text/css" href="styles/app.css">
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body>
+		<div class="app-container">
+      <div class="chart-container">
+        <canvas id="pie-chart"></canvas>
+      </div>
+		</div>
+  </body>
+
+  <script src="utils/color-generator.js">
+  </script>
+
+  <script>
+    /* Set up Chart.js Pie Chart */
+    function createChart(chartId, chartData, colorScale, colorRangeInfo) {
+      /* Grab chart element by id */
+      const chartElement = document.getElementById(chartId);
+
+      const dataLength = chartData.data.length;
+
+      /* Create color array */
+      var COLORS = interpolateColors(dataLength, colorScale, colorRangeInfo);
+
+
+      /* Create chart */
+      const myChart = new Chart(chartElement, {
+        type: 'doughnut',
+        data: {
+          labels: chartData.labels,
+          datasets: [
+            {
+              backgroundColor: COLORS,
+              hoverBackgroundColor: COLORS,
+              data: chartData.data
+            }
+          ],
+        },
+        options: {
+          responsive: true,
+          legend: {
+            display: false,
+          },
+          hover: {
+            onHover: function(e) {
+              var point = this.getElementAtEvent(e);
+              e.target.style.cursor = point.length ? 'pointer' : 'default';
+            },
+          },
+        }
+      });
+
+      return myChart;
+    }
+
+
+    function getRandomNumber(min, max) {
+      return Math.round(Math.random() * (max - min) + min);
+    }
+
+    /* Example Data */
+    const arrayLength = 10;
+    const min = 20;
+    const max = 110;
+
+    var i;
+    var data = [];
+    var labels = [];
+
+    for (i = 0; i < arrayLength; i++) {
+      data.push(getRandomNumber(min, max));
+      labels.push(`Label ${i + 1}`);
+    }
+
+    const chartData = {
+      labels: labels,
+      data: data,
+    };
+
+    const colorScale = d3.interpolateInferno;
+
+    const colorRangeInfo = {
+      colorStart: 0,
+      colorEnd: 1,
+      useEndAsStart: false,
+    };
+
+    /* Create Chart */
+    createChart('pie-chart', chartData, colorScale, colorRangeInfo);
+
+  </script>
+</html>
diff --git a/styles/app.css b/styles/app.css
@@ -0,0 +1,23 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+body > * {
+  box-sizing: border-box;
+}
+
+.app-container {
+  display: flex;
+  justify-content: center;
+  padding: 48px 16px 16px 16px;
+}
+
+.chart-container {
+  width: 600px;
+}
+
+#pie-chart {
+  width: 100%;
+}
diff --git a/utils/color-generator.js b/utils/color-generator.js
@@ -0,0 +1,22 @@
+function calculatePoint(i, intervalSize, colorRangeInfo) {
+  var { colorStart, colorEnd, useEndAsStart } = colorRangeInfo;
+  return (useEndAsStart
+    ? (colorEnd - (i * intervalSize))
+    : (colorStart + (i * intervalSize)));
+}
+
+/* Must use an interpolated color scale, which has a range of [0, 1] */
+function interpolateColors(dataLength, colorScale, colorRangeInfo) {
+  var { colorStart, colorEnd } = colorRangeInfo;
+  var colorRange = colorEnd - colorStart;
+  var intervalSize = colorRange / dataLength;
+  var i, colorPoint;
+  var colorArray = [];
+
+  for (i = 0; i < dataLength; i++) {
+    colorPoint = calculatePoint(i, intervalSize, colorRangeInfo);
+    colorArray.push(colorScale(colorPoint));
+  }
+
+  return colorArray;
+}