Web Site Flow

Quick test to see when certain tags fire in an online journey.Did this before I realised data could be held in an external CSV...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Artemis Path Analysis</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

p {

font-family: 'Open Sans Condensed', cursive;
font-size: 40px;

}

h1 {

font-family: 'Open Sans Condensed', 'arial' ,cursive;
font-size: 30px;

}

h4 {

font-family: 'Open Sans Condensed', 'arial' ,cursive;
font-size: 18px;

}

p.start{
position:absolute;
left:220px;
top:140px;}

p.middle{
position:absolute;
left:650px;
top:140px;}

p.end{
position:absolute;
left:1100px;
top:140px;}

img.home{
position:absolute;
left:20px;
top:250px;}

img.used{
position:absolute;
left:20px;
top:350px;}

img.brochure{
position:absolute;
left:20px;
top:450px;}

img.dealer{
position:absolute;
left:20px;
top:550px;}

img.mouse{
position:absolute;
left:380px;
top:70px;}

p.HP{
position:absolute;
left:110px;
top:270px;
font-size:12px;}

p.RP{
position:absolute;
left:110px;
top:370px;
font-size:12px;}

p.BP{
position:absolute;
left:110px;
top:470px;
font-size:12px;}

p.GP{
position:absolute;
left:110px;
top:570px;
font-size:12px;}

</style> 
</head> 
<body>   
<h1>Where do events occur in the user journey on the site?</h1>
<h4>Hover over the tags to see their presence in the paths</h4>
<p class="start">start</p>
<p class="middle">middle</p>
<p class="end">end</p>

<p class="HP">Home Page</p>
<p class="RP">Reviews</p>
<p class="BP">Brochure</p>
<p class="GP">Galleries</p>

svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d) {
			   		return d[0];
			   })
			   .attr("y", function(d) {
			   		return d[1];
			   })
			  .attr("height", 5)
              .attr("width", function(d) {return d[2];})
			   .attr("class", function(d) {return d[3];})
			   .attr("fill","#E6EEF5")
			  .attr("stroke","grey")
			  .attr("stroke-width", 0.1) 
			  
			  
			  
svg.append("rect")
.data(dataset)
   .attr("x", 100)
			   .attr("y", 150)
			  .attr("height", 20)
              .attr("width", 80)
			  .attr("fill","white")
			  .attr("stroke","black")
			  .attr("stroke-width", 0.2) 
			  .on("mouseover", function() {
      svg.selectAll("rect.NP")
        .transition()
        .attr("fill","blue")

})
	.on("mouseout", function() {
      svg.selectAll("rect.NP")
        .transition()
        .attr("fill","#E6EEF5")

})
	
	svg.append("rect")
.data(dataset)
   .attr("x", 100)
			   .attr("y", 250)
			  .attr("height", 20)
              .attr("width", 80)
			  .attr("fill","white")
			  .attr("stroke","black")
			  .attr("stroke-width", 0.2) 
			  .on("mouseover", function() {
      svg.selectAll("rect.BP")
        .transition()
        .attr("fill","orange")

})
	.on("mouseout", function() {
      svg.selectAll("rect.BP")
        .transition()
        .attr("fill","#E6EEF5")

})
	
	
	svg.append("rect")
.data(dataset)
   .attr("x", 100)
			   .attr("y", 350)
			  .attr("height", 20)
              .attr("width", 80)
			  .attr("fill","white")
			  .attr("stroke","black")
			  .attr("stroke-width", 0.2) 
			  .on("mouseover", function() {
      svg.selectAll("rect.RP")
        .transition()
        .attr("fill","red")

})
	.on("mouseout", function() {
      svg.selectAll("rect.RP")
        .transition()
        .attr("fill","#E6EEF5")

})
	
	
	
	svg.append("rect")
.data(dataset)
   .attr("x", 100)
			   .attr("y", 450)
			  .attr("height", 20)
              .attr("width", 80)
			  .attr("fill","white")
			  .attr("stroke","black")
			  .attr("stroke-width", 0.2) 
			  .on("mouseover", function() {
      svg.selectAll("rect.GP")
        .transition()
        .attr("fill","purple")

})
	.on("mouseout", function() {
      svg.selectAll("rect.GP")
        .transition()
        .attr("fill","#E6EEF5")

})
	
</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://code.jquery.com/jquery-1.8.2.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-1.8.2.min.js