jEdBZG

index.html

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     viewBox="0 0 4000 2000">
  
  <style type="text/css">
    <![CDATA[
    ]]>
  </style>
  
  <defs>
    <marker id="markerCircle" markerWidth="4" markerHeight="4" refx="2" refy="2">
      <circle cx="2" cy="2" r="2" />
    </marker>
    <marker id="markerArrow" markerWidth="6" markerHeight="6" refx="0" refy="3" orient="auto">
      <path d="M0,0 L0,6 L6,3 L0,0"/>
    </marker>
  </defs>
  
  <!-- Stage: Column 1 -->
  <svg class="basili-stage" x="40" y="40" font-size="50">
    
    <!-- Activity: Definition -->
    <svg class="basili-activity" x="0" y="0" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Motivation and </tspan>
          <tspan x="0" dy="75">problem definition</tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Research question</tspan>
          <tspan x="0" dy="75">and planning</tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Definition -->
    
    <!-- Activity: Litterature review -->
    <svg class="basili-activity" x="0" y="300" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Litterature review</tspan>
          <tspan x="0" dy="75"> </tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Plink users survey</tspan>
          <tspan x="0" dy="75"> </tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Litterature review -->
    
    <!-- Activity: Identification of Scaling issues -->
    <svg class="basili-activity" x="0" y="600" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Selected GWAS analysis</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Identification of the required</tspan>
          <tspan x="0" dy="75">Big Data techniques</tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Identification of Scaling issues -->
    
    <!-- Activity: Experiment 1 -->
    <svg class="basili-activity" x="0" y="900" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Case study 1</tspan>
          <tspan x="0" dy="75">(with Dr. Hamet)</tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">MANGO prototype 1</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2000,400 1700,-900 1900,-800" />
    </svg>
    <!-- END Activity: Experiment 1 -->    
  </svg>
  <!-- END Stage: Column 1 -->
  
  
  
  <!-- Stage: Column 2 -->
  <svg class="basili-stage" x="2000" y="40" font-size="50">
    
    <!-- Activity: Feedback 1 -->
    <svg class="basili-activity" x="0" y="0" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Feedback from case study</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Revised design</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Feedback 1 -->
    
    <!-- Activity: Experiment 2 -->
    <svg class="basili-activity" x="0" y="300" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Case study 2</tspan>
          <tspan x="0" dy="75">(with U. Berkeley partner)</tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">MANGO prototype 2</tspan>
          <tspan x="0" dy="75"> </tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Experiment 2 -->
    
    <!-- Activity: Feedback 2 -->
    <svg class="basili-activity" x="0" y="600" font-size="50" >
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Feedback from case study</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Revised design</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link output-link" d="M1715,100 C2200,400 -500,100 -50,350" />
    </svg>
    <!-- END Activity: Feedback 2 -->
    
    <!-- Activity: Validation -->
    <svg class="basili-activity" x="0" y="900" font-size="50">
      <svg class="badge basili-input" x="0">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(30,10)">
          <tspan x="0" dy="75">Validation of the case studies</tspan>
          <tspan x="0" dy="75"></tspan>
        </text>
      </svg>
      <path class="link input-link" d="M800,100 L870,100" />
      <svg class="badge basili-output" x="900">
        <rect width="800" height="200" rx="50" />
        <text transform="translate(50,10)">
          <tspan x="0" dy="75">Identification of constraints</tspan>
          <tspan x="0" dy="75">and issues to improve</tspan>
        </text>
      </svg>
    </svg>
    <!-- END Activity: Validation -->  
  </svg>
  <!-- END Stage: Column 2 -->

</svg>

jEdBZG.markdown

jEdBZG

A Pen by David Lauzon on CodePen.

License.

style.css

body {
  margin: 0;
  padding: 0;
  /*background-color: lightgrey;*/
}
/* 
svg { display: block; }
*/

#markerCircle {
  stroke: none;
  fill: #000;
}
#markerArrow {
  fill: #000;
}

.badge text {
  font-family: "DejaVu Sans", Verdana,Geneva,sans-serif;
}

.badge rect {
  fill-opacity: 0%;
  stroke: #005000;
  stroke-width: 10;
}

.basili-stage {
  overflow:visible;
}
.basili-activity {
  overflow:visible;
}
.basili-activity .link {
  stroke: #660000;
  stroke-width: 10;
  fill: none;
  marker-start: url(#markerCircle);
  marker-end: url(#markerArrow);
}