diff --git a/client/src/components/circle/CircleDiagram.vue b/client/src/components/circle/CircleDiagram.vue
index e850a3a7..3f2e4ef6 100644
--- a/client/src/components/circle/CircleDiagram.vue
+++ b/client/src/components/circle/CircleDiagram.vue
@@ -1,75 +1,58 @@
 <script>
-import * as d3 from 'd3';
+import * as d3 from 'd3'
 
 export default {
   mounted() {
+    const data = [5, 5, 5, 5, 5]
 
-    var data = [5, 5, 5, 5, 5];
+    const width = 500,
+      height = 500,
+      radius = Math.min(width, height) / 2.5
 
-    var width = 500, height = 500, radius = Math.min(width, height) / 2.5
+    const svg = d3.select(this.$el).append('svg').attr('width', 500).attr('height', 500)
 
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
 
-    var svg = d3.select(this.$el)
-      .append('svg')
-      .attr('width', 500)
-      .attr('height', 500)
-
-
-    var g = svg.append("g").attr('transform', "translate(" + width / 2 + "," + height / 2 + ")");
-
-
-    var color = '#99C7E7';
+    const color = '#99C7E7'
 
     // Generate the pie
-    var pie = d3.pie();
+    const pie = d3.pie()
 
-// Generate the arcs
-    var arc = d3
+    // Generate the arcs
+    const arc = d3
       .arc()
       .innerRadius(radius / 2.5)
       .padAngle(12 / 360)
-      .outerRadius(radius);
+      .outerRadius(radius)
 
-// Generate the arrows
-    var arrow = d3.arc()
+    // Generate the arrows
+    const arrow = d3
+      .arc()
       .innerRadius(radius * 1.15)
       .padAngle(30 / 360)
-      .outerRadius(radius * 1.16);
+      .outerRadius(radius * 1.16)
 
+    //Generate groups
+    const arcs = g.selectAll('arc').data(pie(data)).enter().append('g').attr('class', 'arc')
 
-//Generate groups
-    var arcs = g.selectAll("arc")
+    //Generate groups
+    const arrows = g
+      .selectAll('arrow')
       .data(pie(data))
       .enter()
-      .append("g")
-      .attr("class", "arc")
+      .append('g')
+      .attr('class', 'arrow')
+      .attr('marker-start', 'url(#triangle)')
 
+    const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')
 
-//Generate groups
-    var arrows = g.selectAll("arrow")
-      .data(pie(data))
-      .enter()
-      .append("g")
-      .attr("class", "arrow")
-      .attr("marker-start", "url(#triangle)")
+    //Draw arc paths
+    arcs.append('path').attr('fill', color).attr('d', arc)
 
-    var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
-
-//Draw arc paths
-    arcs.append("path")
-      .attr("fill", color)
-      .attr("d", arc)
-
-//Draw arrow paths
-    arrows.append("path")
-      .attr("fill", color)
-      .attr("d", arrow)
-
-
-  }
+    //Draw arrow paths
+    arrows.append('path').attr('fill', color).attr('d', arrow)
+  },
 }
-
-
 </script>
 
 <style>
@@ -85,8 +68,6 @@ input {
 }
 </style>
 
-
 <template>
   <div class="demo-chart" width="500" heigth="500"/>
 </template>
-
diff --git a/client/src/components/circle/LearningPathCircleDiagram.vue b/client/src/components/circle/LearningPathCircleDiagram.vue
index 8cc97a90..0e1cc1a4 100644
--- a/client/src/components/circle/LearningPathCircleDiagram.vue
+++ b/client/src/components/circle/LearningPathCircleDiagram.vue
@@ -2,7 +2,6 @@
 import * as d3 from 'd3'
 import * as _ from 'underscore'
 
-
 export default {
   props: {
     learninglearningPathContents: {
@@ -102,51 +101,115 @@ export default {
     },
   },
   computed: {
-
     viewBox() {
       return `0 0 ${this.width} ${this.height}`
     },
     circles() {
-      return _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'));
+
+      let internalCircles = _.flatten(_.pluck(this.learninglearningPathContents.topics, 'circles'))
+      _.forEach(internalCircles, function (circle) {
+        let pieWeights = new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
+        let pieGenerator = d3.pie()
+        let pieData = pieGenerator(pieWeights)
+        circle.pieData = pieData
+      });
+      return internalCircles
     },
     svg() {
-
       const width = this.width
       const height = this.height
       return d3.select(this.$el).append('svg').attr('width', width).attr('height', height)
-    }
-
+    },
   },
 
   mounted() {
-
     function getPieDataForCircle(circle) {
-      const newArray = new Array(Math.max(d[2].learning_sequences.length, 1)).fill(1)
-      return newArray
+      return new Array(Math.max(circle.learning_sequences.length, 1)).fill(1)
     }
 
-    const learningPathContents = []
+    console.log(this.circles)
 
-    const data = this.pieData
 
     const circleWidth = 150
-
-
     const radius = (circleWidth * 0.7) / 2
-    console.log(this.viewBox)
 
 
-    const cicles = this.svg
-      .selectAll('circle')
+    // Create append pie charts to the main svg
+    const pie = this.svg.selectAll('.pie')
+      .data(this.circles)
+
+    pie
+      .enter()
+      .append('g')
+      .attr('class', 'pie')
+      .attr('fill', 'red')
+      .attr('transform', (d, i) => {
+        let x_coord = (i + 1) * circleWidth - radius + 100
+        return 'translate(' + x_coord + ', 40)'
+      })
+
+    let g = this.svg.selectAll('.pie')
+      // .append('circle')
+      // .attr('r', d => {
+      //   return 30
+      // })
+      // .attr('fill', 'green')
+      // .attr('class', 'test')
+
+
+
+    //
+    // let g = this.svg.selectAll('g').data(d => {
+    //   if (d) {
+    //     console.log(d.pieData + 'sdfklm');
+    //     return d.pieData
+    //   } else {
+    //     console.log('sdf')
+    //     return []
+    //   }
+    // })
+
+
+    g.enter().append('g').attr('class', 'arc')
+
+    const arc = d3.arc()
+      .outerRadius(300)
+      .innerRadius(0);
+
+    g.append('path').attr('fill', 'red').attr('d', arc)
+
+
+
+    // //Generate groups
+    // const arcs = g
+    //   .selectAll('arc')
+    //   .data(pie([5, 5, 5, 5]))
+    //   .enter()
+    //   .append('path')
+    //   .attr('d', arc)
+
+    // const pies =  g.selectAll('arcs')
+    //   .data([1, 2, 3])
+    //   .enter()
+    //   .append('g')
+    //   .attr('cx', (d, i) => {
+    //     return (i + 1) * circleWidth - radius
+    //   })
+    //   .attr('cy', 150)
+    //   .attr('d', arcs)
+
+    const circles = this.svg
+      .selectAll('.blunt_circles')
       .data(this.circles)
       .enter()
       .append('circle')
+      .attr('class', 'blunt_circles')
       .attr('cx', (d, i) => {
         return (i + 1) * circleWidth - radius
       })
       .attr('cy', 150)
       .attr('r', radius)
-      .attr('fill', '#99C7E7')
+     .attr('stroke', 'black')
 
     const circlesText = this.svg
       .selectAll('.circlesText')
@@ -196,80 +259,6 @@ export default {
       .attr('y2', 270)
       .attr('class', 'stroke-gray-500')
       .attr('stroke-width', 1.76)
-
-
-    const g = this.svg.append('g').attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')')
-
-
-    // Generate the pie
-    const pie = d3.pie()
-
-    // Generate the arcs
-    const arc = d3
-      .arc()
-      .innerRadius(radius / 2)
-      .padAngle(12 / 360)
-      .outerRadius(radius)
-
-
-    //Generate groups
-    const arcs = g.selectAll('arc')
-      .data(pie(d => getPieDataForCircle(d)))
-      .enter()
-      .append('g')
-      .attr('class', 'arc')
-
-
-    //Draw arc paths
-    arcs.append('path')
-      .attr('d', arc)
-
-    // Add the path using this helper function
-
-    //     console.log(this.pieData)
-    //     const data = this.pieData
-    //
-    //     const width = this.width
-    //     const height = this.height
-    //     const radius = Math.min(width, height) / 2.5
-    //     console.log(this.viewBox)
-    //
-    //
-    //     const svg = d3.select(this.$el)
-    //       .append('svg')
-    //       .attr('width', width)
-    //       .attr('height', height)
-    //
-    //
-    //     const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
-    //
-    //
-    //     // Generate the pie
-    //     const pie = d3.pie()
-    //
-    // // Generate the arcs
-    //     const arc = d3
-    //       .arc()
-    //       .innerRadius(radius / 2)
-    //       .padAngle(12 / 360)
-    //       .outerRadius(radius)
-    //
-    //
-    // //Generate groups
-    //     const arcs = g.selectAll('arc')
-    //       .data(pie(data))
-    //       .enter()
-    //       .append('g')
-    //       .attr('class', 'arc')
-    //
-    //
-    // //Draw arc paths
-    //     arcs.append('path')
-    //       .attr('d', arc)
-    //
-    //
-    //   }
-    //
   },
 }
 </script>
diff --git a/client/src/components/circle/italy.json b/client/src/components/circle/italy.json
new file mode 100644
index 00000000..e69de29b
diff --git a/client/src/components/circle/map.html b/client/src/components/circle/map.html
new file mode 100644
index 00000000..6b6499c3
--- /dev/null
+++ b/client/src/components/circle/map.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>
diff --git a/client/src/views/LearningPathView.vue b/client/src/views/LearningPathView.vue
index 1f54ea75..7fbca5dd 100644
--- a/client/src/views/LearningPathView.vue
+++ b/client/src/views/LearningPathView.vue
@@ -47,13 +47,11 @@ export default {
           topic.circles = []
         }
         if (child.type === 'learnpath.Circle') {
-          console.log(child)
           topic.circles.push(child)
         }
       });
       learningPathContents.topics.push(topic)
-      console.log(learningPathContents)
-      console.log('oskadfjnmlasdmflkmsadlf')
+
 
 
       this.learningPathContents = learningPathContents;