EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Sequence explorer

This example illustrates how to add nodes without paths.
forked from EE2dev's block: Sequence explorer - visitor flow
Changes to the forked version above:


to have a nice scaling of your nodes/paths, you can use sequenceExplorer.chart().nodePadding() instead of creating a dummy path from the event " " to the event " ".


the sequence elements are and should be strings not numbers.


colored one specific node with CSS


to refer to a meaningful denominator for the percentages, specify sequenceExplorer.chart().correspondingEvents([]) the related events. (in this case exclude the dummy events)


to add people icons flowing through certain paths, simply add the corresponding paths to the data with a name and call sequenceExplorer.chart().particleShape("person")


percentages are set to "%sameEvent". Change the percentage to the metric most useful for your application.


Link to sequence explorer on github.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link rel="stylesheet" type="text/css" href="https://ee2dev.github.io/libs/sankeySeqExplorer.v20.css">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ee2dev.github.io/libs/sequence-explorer.v20.js"></script>
  <style>
    rect.ny_{
      fill: none;
      stroke: none;
    }
    rect.nx2.nyA{
      fill: darkorange;
    }
    path.lty_{
      stroke: none;
    }
  </style>
</head>

<body>
  <script>

  var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
    .nodePadding(50) // scaling the nodes/ paths
    .eventOrder([ "C", "B", "A"," "]) // changing the order of the events on the y
    .correspondingEvents(["C", "B", "A"]) //specifies a subset of events which form a unit. An array with a subset of events reduces the percentages shown for a point in time
    .eventName("visitor group") // changing the name of the y axis for the tooltip
    .sequenceName("touchpoint") // changing the name of the x axis for the tooltip
    .percentages(["%sameEvent"]) // adding % of same events to the tooltip
  	.particleMax(0.1) // determining the maximum number of particles (persons)
    .particleShape("person"); // changes the particle icon

  d3.select("body")
    .append("div")
    .attr("class", "chart")
    .call(myChart);

  </script>
</body>
</html>

## sequence1.json
{"data":[
  {
    "value": 30,
    "sourceX": "1",
    "sourceY": "B",
    "targetX": "2",
    "targetY": "A"
  },
  {
    "value": 40,
    "sourceX": "1",
    "sourceY": "C",
    "targetX": "2",
    "targetY": "B"
  },
  {
    "value": 40,
    "sourceX": "2",
    "sourceY": "B",
    "targetX": "3",
    "targetY": "A"
  },
  {
    "value": 30,
    "sourceX": "2",
    "sourceY": "A",
    "targetX": "3",
    "targetY": "C"
  },
  {
    "value": 30,
    "sourceX": "1",
    "sourceY": "A",
    "targetX": "2",
    "targetY": " "
  },
  {
    "value": 30,
    "sourceX": "2",
    "sourceY": "C",
    "targetX": "3",
    "targetY": " "
  },
  {
    "value": 30,
    "sourceX": "3",
    "sourceY": "B",
    "targetX": "3",
    "targetY": " "
  }
 ],
 "paths":[
  {
    "value": 30,
    "sourceX": "1",
    "sourceY": "B",
    "targetX": "2",
    "targetY": "A",
    "name": "B vistors"
  },
  {
    "value": 30,
    "sourceX": "2",
    "sourceY": "A",
    "targetX": "3",
    "targetY": "C",
    "name": "B vistors"
  },
  {
    "value": 30,
    "sourceX": "1",
    "sourceY": "C",
    "targetX": "2",
    "targetY": "B",
    "name": "C vistors"
  },
  {
    "value": 30,
    "sourceX": "2",
    "sourceY": "B",
    "targetX": "3",
    "targetY": "A",
    "name": "C vistors"
  }
]
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link rel="stylesheet" type="text/css" href="https://ee2dev.github.io/libs/sankeySeqExplorer.v20.css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ee2dev.github.io/libs/sequence-explorer.v20.js"></script>
	<style>
	rect.ny_{
	fill: none;
	stroke: none;
	}
	rect.nx2.nyA{
	fill: darkorange;
	}
	path.lty_{
	stroke: none;
	}
	</style>
	</head>

	<body>
	<script>

	var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
	.nodePadding(50) // scaling the nodes/ paths
	.eventOrder([ "C", "B", "A"," "]) // changing the order of the events on the y
	.correspondingEvents(["C", "B", "A"]) //specifies a subset of events which form a unit. An array with a subset of events reduces the percentages shown for a point in time
	.eventName("visitor group") // changing the name of the y axis for the tooltip
	.sequenceName("touchpoint") // changing the name of the x axis for the tooltip
	.percentages(["%sameEvent"]) // adding % of same events to the tooltip
	.particleMax(0.1) // determining the maximum number of particles (persons)
	.particleShape("person"); // changes the particle icon

	d3.select("body")
	.append("div")
	.attr("class", "chart")
	.call(myChart);

	</script>
	</body>
	</html>
	{"data":[
	{
	"value": 30,
	"sourceX": "1",
	"sourceY": "B",
	"targetX": "2",
	"targetY": "A"
	},
	{
	"value": 40,
	"sourceX": "1",
	"sourceY": "C",
	"targetX": "2",
	"targetY": "B"
	},
	{
	"value": 40,
	"sourceX": "2",
	"sourceY": "B",
	"targetX": "3",
	"targetY": "A"
	},
	{
	"value": 30,
	"sourceX": "2",
	"sourceY": "A",
	"targetX": "3",
	"targetY": "C"
	},
	{
	"value": 30,
	"sourceX": "1",
	"sourceY": "A",
	"targetX": "2",
	"targetY": " "
	},
	{
	"value": 30,
	"sourceX": "2",
	"sourceY": "C",
	"targetX": "3",
	"targetY": " "
	},
	{
	"value": 30,
	"sourceX": "3",
	"sourceY": "B",
	"targetX": "3",
	"targetY": " "
	}
	],
	"paths":[
	{
	"value": 30,
	"sourceX": "1",
	"sourceY": "B",
	"targetX": "2",
	"targetY": "A",
	"name": "B vistors"
	},
	{
	"value": 30,
	"sourceX": "2",
	"sourceY": "A",
	"targetX": "3",
	"targetY": "C",
	"name": "B vistors"
	},
	{
	"value": 30,
	"sourceX": "1",
	"sourceY": "C",
	"targetX": "2",
	"targetY": "B",
	"name": "C vistors"
	},
	{
	"value": 30,
	"sourceX": "2",
	"sourceY": "B",
	"targetX": "3",
	"targetY": "A",
	"name": "C vistors"
	}
	]
	}