initial commit

sdras · Jan 19, 2019 · 990c281 · 990c281
1 parent 647871a
commit 990c281
Show file tree

Hide file tree

Showing 14 changed files with 8,900 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "d3-ignite",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "d3": "4.13.0",
+    "vue": "^2.5.17",
+    "vue-hooks": "^0.3.1",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.3",
+    "@vue/cli-service": "^3.0.3",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "vue-template-compiler": "^2.5.17"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!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.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>d3-ignite</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but d3-ignite doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <BaseChart />
+  </div>
+</template>
+
+<script>
+import BaseChart from './components/BaseChart.vue'
+
+export default {
+  name: 'app',
+  components: {
+    BaseChart
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/BaseChart.vue b/src/components/BaseChart.vue
@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <section class="btn-group">
+      Change format: 
+        <button @click="createRectangles">Create Rectangles</button> 
+        <button @click="createCircles">Create Circles</button> 
+        <button @click="createLines('curve')">Create Curves</button>
+        <button @click="createLines('step')">Create Steps</button>
+        <button @click="createStars">Create Stars</button>
+    </section>
+    <main ref="main"></main>
+  </div>
+</template>
+
+<script>
+import * as d3 from 'd3'
+import { customerData } from './../mixins/customerData'
+
+export default {
+  data() {
+    return {
+      width: 600,
+      height: 300,
+      margin: { top: 20, bottom: 25, left: 25, right: 20 },
+      svg: null,
+      xScale: null,
+      yScale: null,
+      heightScale: null
+    }
+  },
+  mixins: [customerData],
+  methods: {
+    initChart() {
+      let vueThis = this
+
+      // extent gets the lowest and highest values of that data
+      var xExtent = d3.extent(vueThis.customerData, d => d.OrderNumber)
+      this.xScale = d3
+        .scaleLinear()
+        .domain(xExtent)
+        .range([this.margin.left, this.width - this.margin.right])
+
+      // we don't use extent for price because we want to start at 0
+      var yMax = d3.max(vueThis.customerData, d => d.Amount_Due)
+      this.yScale = d3
+        .scaleLinear()
+        .domain([0, yMax])
+        .range([this.height - this.margin.bottom, this.margin.top])
+      this.heightScale = d3
+        .scaleLinear()
+        .domain([0, yMax])
+        .range([0, this.height - this.margin.top - this.margin.bottom])
+
+      // create the axis
+      var xAxis = d3.axisBottom().scale(this.xScale)
+      var yAxis = d3.axisLeft().scale(this.yScale)
+
+      this.svg
+        .append('g')
+        .attr(
+          'transform',
+          `translate(${[0, this.height - this.margin.bottom]})`
+        )
+        .call(xAxis)
+
+      this.svg
+        .append('text')
+        .attr(
+          'transform',
+          `translate(${this.width / 2},${this.height + this.margin.top})`
+        )
+        .style('text-anchor', 'middle')
+        .text('Order Number')
+
+      this.svg
+        .append('g')
+        .attr('transform', `translate(${[this.margin.left, 0]})`)
+        .call(yAxis)
+
+      this.svg
+        .append('text')
+        .attr('transform', 'rotate(-90)')
+        .attr('y', 0 - this.margin.left)
+        .attr('x', 0 - this.height / 2)
+        .attr('dy', '1em')
+        .style('text-anchor', 'middle')
+        .text('Amount Due')
+
+      //create a gradient to use wherever
+      var mainGradient = this.svg
+        .append('linearGradient')
+        .attr('id', 'nicegradient')
+      mainGradient
+        .append('stop')
+        .attr('class', 'start-color')
+        .attr('offset', '0')
+      mainGradient
+        .append('stop')
+        .attr('class', 'end-color')
+        .attr('offset', '1')
+    },
+    createCircles() {
+      d3.selectAll('.contain').remove()
+
+      let vueThis = this
+      return this.svg
+        .append('g')
+        .attr('class', 'contain')
+        .selectAll('circle')
+        .data(vueThis.customerData)
+        .enter()
+        .append('circle')
+        .attr('cx', d => vueThis.xScale(d.OrderNumber))
+        .attr('cy', d => vueThis.yScale(d.Amount_Due))
+        .attr('r', d => d.Amount_Due / 5)
+        .style('fill', 'none')
+        .style('stroke', d => `hsl(${d.OrderNumber * 2.5 + 10}, 50%, 50%)`)
+    },
+    createRectangles() {
+      d3.selectAll('.contain').remove()
+
+      let vueThis = this
+      return this.svg
+        .append('g')
+        .attr('class', 'contain')
+        .selectAll('rect')
+        .data(vueThis.customerData)
+        .enter()
+        .append('rect')
+        .attr('width', 4)
+        .attr('height', d => vueThis.heightScale(d.Amount_Due))
+        .attr('x', d => vueThis.xScale(d.OrderNumber))
+        .attr('y', d => vueThis.yScale(d.Amount_Due))
+        .style('fill', d => `hsl(${d.OrderNumber * 2.5 + 10}, 50%, 50%)`)
+        .style('stroke', 'white')
+    },
+    createLines(shape) {
+      d3.selectAll('.contain').remove()
+      let vueThis = this,
+        currentShape = shape === 'curve' ? d3.curveCardinal : d3.curveStep
+
+      let data = vueThis.customerData
+      data.sort((a, b) => a.OrderNumber - b.OrderNumber)
+
+      var valueline = d3
+        .line()
+        .x(d => vueThis.xScale(d.OrderNumber))
+        .y(d => vueThis.yScale(d.Amount_Due))
+        .curve(currentShape)
+
+      return this.svg
+        .append('g')
+        .attr('class', 'contain')
+        .append('path')
+        .datum(data)
+        .attr('d', valueline)
+        .style('fill', 'none')
+        .attr('stroke', 'url(#nicegradient)')
+    },
+    createStars() {
+      d3.selectAll('.contain').remove()
+      let vueThis = this
+
+      let symbolGenerator = d3
+        .symbol()
+        .type(d3.symbolStar)
+        .size(50)
+
+      let pathData = symbolGenerator()
+
+      return this.svg
+        .append('g')
+        .attr('class', 'contain')
+        .selectAll('path')
+        .data(vueThis.customerData)
+        .enter()
+        .append('path')
+        .attr(
+          'transform',
+          d =>
+            `translate(${vueThis.xScale(d.OrderNumber)}, ${vueThis.yScale(
+              d.Amount_Due
+            )})`
+        )
+        .attr('d', pathData)
+        .style('fill', 'none')
+        .style('stroke', d => `hsl(${d.OrderNumber * 2.5 + 10}, 50%, 50%)`)
+    }
+  },
+  mounted() {
+    this.svg = d3
+      .select('main')
+      .append('svg')
+      .attr('viewBox', `-40 -40 ${this.width + 50} ${this.height + 100}`)
+
+    this.initChart()
+    this.createRectangles()
+  }
+}
+</script>
+
+<style lang="scss">
+svg text {
+  font-family: 'Avenir', sans-serif;
+}
+
+main {
+  width: 70vw;
+  margin: 0 15vw;
+}
+
+button {
+  margin: -3px 10px 0;
+  background: none;
+  color: black;
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 5px 10px 4px;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  outline: 0;
+  transition: 0.3s all ease;
+  &:hover {
+    background: #333;
+    color: white;
+  }
+}
+
+.btn-group {
+  display: flex;
+  justify-content: center;
+  width: 100vw;
+}
+
+#nicegradient stop.start-color {
+  stop-color: #5f2c82;
+}
+
+#nicegradient stop.end-color {
+  stop-color: #0abfbc;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  store,
+  render: h => h(App)
+}).$mount('#app')