bizdevops

index.html

@@ -29,7 +29,7 @@
     <script>
 
         // Create dummy data
-        var data = ["first", "second", "third", "fourth", "fifth", "sechs", "sieeben"];
+        var data = ["plan", "code", "build", "test", "release", "deploy", "operate", "observe","analyze", "Ideas", "Fund"] ;
 
         // set the color scale
         var color = d3.scaleOrdinal(d3.schemeCategory10);
@@ -37,7 +37,7 @@
 
 
 
-        d3.svg('path.svg').then(function (svg) {
+        d3.svg('infinity.svg').then(function (svg) {
             svgnode = document.importNode(svg.documentElement, true);
             d3.select("div#arrows").node().append(svgnode);
             svg = d3.select("div#arrows svg");
@@ -45,7 +45,7 @@
             var arrgen = d3.arrowonpath();
 
 
-            svg.select("#path905")
+            svg.select("#infinity")
                 .style("stroke", "none");
 
             svg.selectAll("whatever")
@@ -54,7 +54,7 @@
                 .append('path')
                 .attr('d', arrgen)
                 .style('fill', function (d) { return (color(d.index)) })
-                .style("stroke", "black")
+                .style("stroke", "none")
                 .style("stroke-width", "1")
                 .style("opacity", 1);
 
@@ -63,8 +63,8 @@
                 .enter()
                 .append('text')
                 .attr("font-family", "sans-serif")
-                .attr("font-size", "6")
-                .attr("fill", "black")
+                .attr("font-size", "10  ")
+                .attr("fill", "white")
                 .attr("x", function (d) { return arrgen.center(d).x })
                 .attr("y", function (d) { return arrgen.center(d).y })
                 .attr("text-anchor", "middle")

infinity.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="379.11172mm"
+   height="348.6217mm"
+   viewBox="0 0 379.11172 348.62169"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="infinity.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.57908178"
+     inkscape:cx="716.04927"
+     inkscape:cy="400.63645"
+     inkscape:document-units="mm"
+     inkscape:current-layer="svg8"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     fit-margin-top="20"
+     fit-margin-left="20"
+     fit-margin-bottom="20"
+     fit-margin-right="20"
+     inkscape:window-width="2556"
+     inkscape:window-height="1400"
+     inkscape:window-x="0"
+     inkscape:window-y="38"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(124.6527,93.786649)" />
+  <path
+     id="infinity"
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 175.11676,92.399781 c 3.52893,43.502369 -37.06907,51.538959 -92.932084,84.425439 -40.745198,23.98665 -61.300388,32.75769 -61.681698,65.33691 -0.38131,32.57923 36.045328,70.76764 72.647335,70.81974 36.602017,0.0521 64.567447,-39.22315 91.837207,-66.25072 27.26975,-27.02756 67.71792,-72.19043 106.45805,-72.19043 38.74013,0 67.41406,40.61227 67.16453,75.84563 -0.24953,35.23336 -1.73421,79.63183 -57.11271,77.67326 -73.686,-2.60606 -137.32764,-96.90548 -168.3682,-126.79016 C 98.750343,168.1708 37.283334,130.98474 36.689117,94.387513 36.09495,57.790294 73.634143,20.695012 106.21503,20.500982 c 32.58088,-0.19402 65.3728,28.39643 68.90173,71.898799 z"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ssscssssscss" />
+</svg>

src/arrowonpath.js

@@ -26,9 +26,9 @@ function svgpath() {
 
 export default function () {
     var parts = 3,
-        thickness = 5,
+        thickness = 20,
         angle = 2,
-        padding = 1,
+        padding = 2,
         path = svgpath(),
         path_l = path.getTotalLength(),