Extracted renderChart function

mapreal19 · Jan 12, 2016 · 9790b29 · 9790b29
1 parent e44e581
commit 9790b29
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 100 deletions.
diff --git a/chap-1/habituationGWR.js b/chap-1/habituationGWR.js
@@ -1,7 +1,9 @@
+import renderChart from './renderChart.js';
+
 function forDisplay(num, index) {
   return {
-    time: index,
-    value: num
+    x: index,
+    y: num
   };
 }
 
@@ -30,58 +32,11 @@ function getData() {
   }
 }
 
-function render(data, selector) {
-  const vis = d3.select(selector),
-    WIDTH = 600,
-    HEIGHT = 200,
-    MARGINS = {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 50
-    },
-
-    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([0, 29]),
-
-    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, 4]),
-
-    xAxis = d3.svg.axis()
-    .scale(xScale),
-
-    yAxis = d3.svg.axis()
-    .scale(yScale)
-    .orient("left");
-
-  vis.append("svg:g")
-    .attr("class", "x axis")
-    .attr("transform", `translate(0,${HEIGHT - MARGINS.bottom})`)
-    .call(xAxis);
-
-  vis.append("svg:g")
-    .attr("class", "y axis")
-    .attr("transform", `translate(${MARGINS.left},0)`)
-    .call(yAxis);
-
-  const lineGen = d3.svg.line()
-    .x(function(d) {
-      return xScale(d.time);
-    })
-    .y(function(d) {
-      return yScale(d.value);
-    });
-
-  vis.append('svg:path')
-    .attr('d', lineGen(data))
-    .attr('stroke', 'green')
-    .attr('stroke-width', 2)
-    .attr('fill', 'none');
-}
-
 export default function InitChart() {
   const {
     inputPulses, outputPulses
   } = getData();
 
-  render(inputPulses, '#visualisation');
-  render(outputPulses, '#visualisation2');
+  renderChart(inputPulses, '#visualisation', {xDomain: [0, 29], yDomain: [0, 4]});
+  renderChart(outputPulses, '#visualisation2', {xDomain: [0, 29], yDomain: [0, 4]});
 }
diff --git a/chap-1/oneUnitWithPosFB.js b/chap-1/oneUnitWithPosFB.js
@@ -1,3 +1,5 @@
+import renderChart from './renderChart.js';
+
 // inputFlag = 1 for pulse, 2 for step
 export default function oneUnitWithPosFB(inputFlag = 1) {
   const cut = 0; // set cut-off
@@ -29,53 +31,6 @@ export default function oneUnitWithPosFB(inputFlag = 1) {
   const inputData = x.map((num, index) => ({x: index, y: num}));
   const outputData = y.map((num, index) => ({x: index, y: num}));
 
-  render2(inputData, '#visualisation3', {xDomain: [0, 100], yDomain: [0, 1]});
-  render2(outputData, '#visualisation4', {xDomain: [0, 100], yDomain: [0, 10]});
-};
-
-const render2 = (data, selector, options) => {
-  const vis = d3.select(selector),
-    WIDTH = 600,
-    HEIGHT = 200,
-    MARGINS = {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 50
-    },
-
-    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain(options.xDomain),
-
-    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain(options.yDomain),
-
-    xAxis = d3.svg.axis()
-    .scale(xScale),
-
-    yAxis = d3.svg.axis()
-    .scale(yScale)
-    .orient("left");
-
-  vis.append("svg:g")
-    .attr("class", "x axis")
-    .attr("transform", `translate(0,${HEIGHT - MARGINS.bottom})`)
-    .call(xAxis);
-
-  vis.append("svg:g")
-    .attr("class", "y axis")
-    .attr("transform", `translate(${MARGINS.left},0)`)
-    .call(yAxis);
-
-  const lineGen = d3.svg.line()
-    .x(function(d) {
-      return xScale(d.x);
-    })
-    .y(function(d) {
-      return yScale(d.y);
-    });
-
-  vis.append('svg:path')
-    .attr('d', lineGen(data))
-    .attr('stroke', 'green')
-    .attr('stroke-width', 2)
-    .attr('fill', 'none');
+  renderChart(inputData, '#visualisation3', {xDomain: [0, 100], yDomain: [0, 1]});
+  renderChart(outputData, '#visualisation4', {xDomain: [0, 100], yDomain: [0, 10]});
 };
diff --git a/chap-1/renderChart.js b/chap-1/renderChart.js
@@ -0,0 +1,47 @@
+export default function renderChart(data, selector, options) {
+  debugger;
+  const vis = d3.select(selector),
+    WIDTH = 600,
+    HEIGHT = 200,
+    MARGINS = {
+      top: 20,
+      right: 20,
+      bottom: 20,
+      left: 50
+    },
+
+    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain(options.xDomain),
+
+    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain(options.yDomain),
+
+    xAxis = d3.svg.axis()
+    .scale(xScale),
+
+    yAxis = d3.svg.axis()
+    .scale(yScale)
+    .orient("left");
+
+  vis.append("svg:g")
+    .attr("class", "x axis")
+    .attr("transform", `translate(0,${HEIGHT - MARGINS.bottom})`)
+    .call(xAxis);
+
+  vis.append("svg:g")
+    .attr("class", "y axis")
+    .attr("transform", `translate(${MARGINS.left},0)`)
+    .call(yAxis);
+
+  const lineGen = d3.svg.line()
+    .x(function(d) {
+      return xScale(d.x);
+    })
+    .y(function(d) {
+      return yScale(d.y);
+    });
+
+  vis.append('svg:path')
+    .attr('d', lineGen(data))
+    .attr('stroke', 'green')
+    .attr('stroke-width', 2)
+    .attr('fill', 'none');
+};