Add Code

xpfio · Sep 19, 2017 · 14745de · 14745de
1 parent b12a00e
commit 14745de
Show file tree

Hide file tree

Showing 28 changed files with 18,371 additions and 0 deletions.
diff --git a/SVG.svg b/SVG.svg
diff --git a/calibrate_draft_projection.js b/calibrate_draft_projection.js
@@ -0,0 +1,58 @@
+d3.csv('https://docs.google.com/spreadsheets/d/1cBn1WwKYGBYxz_PTd3Q7e7TIWpHFhSpe6Gxq9k9YqtU/pub?output=csv',(error,raw)=>{
+  console.log(error,raw)
+  var factor = 0.5;
+  var factor = 1;
+
+  var svg = d3.select('#viz').append('g');
+
+  svg.append('image').attr('xlink:href','mtr.jpg').attr('transform','scale('+factor+')')
+
+  svg.selectAll('circle')
+    .data(raw)
+    .enter()
+    .append('circle')
+      .attr('cx',d=>d.x_projection*factor)
+      .attr('cy',d=>d.y_projection*factor)
+      .attr('r',5)
+      .attr('fill','black')
+      .attr('stroke',d=>d.color?d.color:'black')
+    .call(d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended));
+
+
+function dragstarted(d) {
+  d3.select(this).raise().classed("active", true);
+}
+
+function dragged(d) {
+  d3.select(this).attr("cx", d.x_projection = d3.event.x).attr("cy", d.y_projection = d3.event.y);
+}
+
+function dragended(d) {
+  d3.select(this).classed("active", false);
+  console.log(raw.map(d=>{return {x:d.x_projection,y:d.y_projection}}))
+}
+
+  function transition(){
+    d3.selectAll('circle')
+      .transition()
+      .duration(4000)
+      .attr('cx',d=>d.x_real*factor)
+      .attr('cy',d=>d.y_real*factor)
+      .on('end',transition2)
+  }
+
+
+  function transition2(){
+    d3.selectAll('circle')
+      .transition()
+      .duration(4000)
+      .attr('cx',d=>d.x_projection*factor)
+      .attr('cy',d=>d.y_projection*factor)
+      .on('end',transition)
+  }
+
+  // transition();
+})
diff --git a/calibrate_real.js b/calibrate_real.js
@@ -0,0 +1,58 @@
+d3.csv('https://docs.google.com/spreadsheets/d/1cBn1WwKYGBYxz_PTd3Q7e7TIWpHFhSpe6Gxq9k9YqtU/pub?output=csv',(error,raw)=>{
+  console.log(error,raw)
+  var factor = 0.5;
+  var factor = 1;
+
+  var svg = d3.select('#viz').append('g');
+
+  svg.append('image').attr('xlink:href','map.png').attr('transform','scale('+factor+')')
+
+  svg.selectAll('circle')
+    .data(raw)
+    .enter()
+    .append('circle')
+      .attr('cx',d=>d.x_real*factor)
+      .attr('cy',d=>d.y_real*factor)
+      .attr('r',5)
+      .attr('fill','black')
+      .attr('stroke',d=>d.color?d.color:'black')
+    .call(d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended));
+
+
+function dragstarted(d) {
+  d3.select(this).raise().classed("active", true);
+}
+
+function dragged(d) {
+  d3.select(this).attr("cx", d.x_real = d3.event.x).attr("cy", d.y_real = d3.event.y);
+}
+
+function dragended(d) {
+  d3.select(this).classed("active", false);
+  console.log(raw.map(d=>{return {x:d.x_real,y:d.y_real}}))
+}
+
+  function transition(){
+    d3.selectAll('circle')
+      .transition()
+      .duration(4000)
+      .attr('cx',d=>d.x_real*factor)
+      .attr('cy',d=>d.y_real*factor)
+      .on('end',transition2)
+  }
+
+
+  function transition2(){
+    d3.selectAll('circle')
+      .transition()
+      .duration(4000)
+      .attr('cx',d=>d.x_projection*factor)
+      .attr('cy',d=>d.y_projection*factor)
+      .on('end',transition)
+  }
+
+  // transition();
+})
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/starter-template.css b/css/starter-template.css
@@ -0,0 +1,7 @@
+body {
+  padding-top: 5rem;
+}
+.starter-template {
+  padding: 3rem 1.5rem;
+  text-align: center;
+}