Help on integrating a code

help
1

Can someone please help me out with this? I’m trying to integrate one code into one of the webpages. Here is main page

<template name="profile">
	<script src="https://d3js.org/d3.v4.js"></script>
<div id="profile">
	<div class="header">
  <a href="#" class="options"><i class="fa fa-bars"></i><span class="screen-reader-text">Options</span></a>
  <a href="#" class="logo"><span class="screen-reader-text">w8mngr</span></a>
</div>

<!-- <div class="banner">
  <div class="user-box">
    <canvas id="myChart" width="400" height="100"></canvas>
  </div>
</div> -->



  
<main>
  <div class="meta">
    <div class="right">
      <a href="#"><i class="fa fa-eye"></i> Edit Profile</a>&nbsp;&nbsp;
      <a href="#"><i class="fa fa-user-plus"></i> Follow Bryan</a>
    </div>
    <div class="left">
      Male, 35 Years Old
      <br>England, Manchester
    </div>
   </div>

  <div class="bio">
    <h2><i class="fa fa-user"></i> Bio</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent massa mi, fermentum vel lacus ac, ornare laoreet arcu. Sed ullamcorper dui ut ante tincidunt, id euismod velit tempor. Nullam vulputate malesuada orci at suscipit. Praesent quis bibendum augue. Nulla eget dignissim lacus. Mauris non lacinia libero, nec sollicitudin lacus. Curabitur viverra sit amet lacus ut egestas. Nam maximus sit amet eros at pharetra. Etiam vehicula sodales nunc. Etiam pretium vel turpis condimentum congue. Sed id quam a libero rhoncus sollicitudin at in nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>

  <div class="dashboard">

    <div class="weight-box dashboard-box">
      <h2><i class="fa fa-area-chart"></i> Weight</h2>

      <div class="last">
        <span class="when">this morning</span>
        185
        <span class="unit">lb</span>
      </div>

      <div class="weight">
        <!-- Created with Inkscape (http://www.inkscape.org/) -->
        <svg id="svg4165" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="102.37mm" width="171.79mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 608.71806 362.72827">
         <metadata id="metadata4170">
          <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/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1" transform="translate(-64.665 -206.71)">
          <path id="path4717" stroke-linejoin="round" d="m65.714 563.79c11.429 0 31.429-77.143 31.429-77.143l20 40 25.714-77.143 60-85.714 34.286-20 42.857-20 5.7143 34.286 14.29 105.71 40-174.29 34.286 57.143 42.857-94.286 42.857-40 45.714 68.571 60 60 42.857 102.86 37.143 60 22.857-37.143" stroke="#000" stroke-width="11.3" fill="none"/>
         </g>
        </svg>
      </div>
    </div>

    <div class="calories-box dashboard-box">
      <h2><i class="fa fa-area-chart"></i> Calories</h2>

      <div class="last">
        <span class="when">yesterday</span>
        2,200
        <span class="unit">kcal consumed</span>
      </div>

      <div class="calories">

        <!-- Created with Inkscape (http://www.inkscape.org/) -->
        <svg id="svg4165" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="102.37mm" width="171.79mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 608.71806 362.72827">
         <metadata id="metadata4170">
          <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/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1" transform="translate(-64.665 -206.71)">
          <path id="path4717" stroke-linejoin="round" d="m65.714 563.79c11.429 0 31.429-77.143 31.429-77.143l20 40 25.714-77.143 60-85.714 34.286-20 42.857-20 5.7143 34.286 14.29 105.71 40-174.29 34.286 57.143 42.857-94.286 42.857-40 45.714 68.571 60 60 42.857 102.86 37.143 60 22.857-37.143" stroke="#000" stroke-width="11.3" fill="none"/>
         </g>
        </svg>
      </div>
    </div>

    <div class="activity-box dashboard-box">
      <h2><i class="fa fa-area-chart"></i> Activity</h2>

      <div class="last">
        <span class="when">yesterday</span>
        388
        <span class="unit">kcal burned</span>
      </div>

      <div class="activity">

        <!-- Created with Inkscape (http://www.inkscape.org/) -->
        <svg id="svg4165" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="102.37mm" width="171.79mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 608.71806 362.72827">
         <metadata id="metadata4170">
          <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/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1" transform="translate(-64.665 -206.71)">
          <path id="path4717" stroke-linejoin="round" d="m65.714 563.79c11.429 0 31.429-77.143 31.429-77.143l20 40 25.714-77.143 60-85.714 34.286-20 42.857-20 5.7143 34.286 14.29 105.71 40-174.29 34.286 57.143 42.857-94.286 42.857-40 45.714 68.571 60 60 42.857 102.86 37.143 60 22.857-37.143" stroke="#000" stroke-width="11.3" fill="none"/>
         </g>
        </svg>
      </div>
    </div>

    <div class="bs-box dashboard-box">
      <h2><i class="fa fa-area-chart"></i> Blood Sugar</h2>

      <div class="last">
        <span class="when">this afternoon</span>
        64
        <span class="unit">mg/dL</span>
      </div>

      <div class="bs">

        <!-- Created with Inkscape (http://www.inkscape.org/) -->
        <svg id="svg4165" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="102.37mm" width="171.79mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 608.71806 362.72827">
         <metadata id="metadata4170">
          <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/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1" transform="translate(-64.665 -206.71)">
          <path id="path4717" stroke-linejoin="round" d="m65.714 563.79c11.429 0 31.429-77.143 31.429-77.143l20 40 25.714-77.143 60-85.714 34.286-20 42.857-20 5.7143 34.286 14.29 105.71 40-174.29 34.286 57.143 42.857-94.286 42.857-40 45.714 68.571 60 60 42.857 102.86 37.143 60 22.857-37.143" stroke="#000" stroke-width="11.3" fill="none"/>
         </g>
        </svg>
      </div>
    </div>

  </div>
</main>
</div>
</template>

and this is what I’m trying to integrate in. I’m not sure in which part of the section of the code above I can put this code at. Somewhere between div and the main?



  <head>
    <title>Snap</title>
    <script data-require="snap.svg@*" data-semver="0.3.0" src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
  
  </head>

  <body>
    <svg id="svg"></svg>
    <script>
        var s = Snap(400, 400);
        var circle_1 = s.circle(200, 200, 200);
        var circle_2 = s.circle(200, 200, 180);
        var circle_3 = s.circle(200, 200, 150);
        var circle_4 = s.circle(200, 200, 130);
       
       
      
      Snap.animate(0, 1000, function( value ){
        innerCircle.attr({ 'strokeDashoffset': value })
      }, 6000 );
      
      Snap.animate(0, -400, function( value ){
        innerCircleB.attr({ 'strokeDashoffset': value})
      }, 6000 );
      
      Snap.animate(0, 800, function(value){
        innerCircleA.attr({ 'strokeDashoffset': value})
      }, 6000);
      
      

        circle_1.attr({
            fill: "#2980b9",
            stroke: "black",
            strokeWidth: 2
        });
        
        circle_2.attr({
          fill: "#01579b",
          stroke: "black",
          strokeWidth: 2
        });
        
        circle_3.attr({
          fill: "#2c3e50",
          stroke: "black",
          strokeWidth: 3
        });
        
        circle_4.attr({
          fill: "#00477D",
          stroke: "black",
          strokeWidth: 4
        });
        
      
      
    </script>
  </body>

</html>
2

Not to be blunt, but you need to follow a few Meteor tutorials before diving into integrating frameworks into your code base. To answer your question though, you need to add your code in your profile.js file within the OnRendered handler.