EE2dev/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Sequence explorer

This example illustrates how to add nodes without paths.
You basically do four things:


In your data file (JSON or csv), data is specified as a collection of paths. For the nodes you want free flowing (no path) you create an "artificial" path to a dummy node, with the name " ". So the label on the axis is invisible.


with sequenceExplorer.eventOrder([...]) you specify the order of the events along the Y axis. Put your dummy event " " to the top (last element in array)


add css to make nodes for the dummy event " " invisible as well as all paths leading to these nodes. (a " " (space) in the event name is substituted to "_" underscore so you can address it with CSS classes.


to have a nice scaling of your nodes/paths, you can add a dummy path from the event " " to the event " " which will be invisible. But if the value of the node is the largest overall, the remaining nodes/ paths are scaled accordingly.


Link to sequence explorer on github.
forked from EE2dev's block: Sequence explorer - single chart (with JSON file)

  
## index.html
<!DOCTYPE html>
  <meta charset="utf-8"> <!-- also save this file as unicode-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.min.js"></script>
    <style>
      rect.ny_{
        fill: none;
        stroke: none;
      }
      path.lty_{
        stroke: none;
      }
    </style>
  </head>

  <body>
    <script>
    // setup a chart with a json file and add the visualization to a DOM element
    // var myChart = sequenceExplorer.chart(); // no parameter when data is embedded in <pre id="data"> tag
    var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
      .eventOrder([ "C", "B", "A"," "]) // changing the order of the events on the y axis
      .sequenceName("visit") // changing the name of the x axis for the tooltip
      .percentages(["%sameEvent"]); // adding % of same events to the tooltip

    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": " "
  },
  {
    "value": 100,
    "sourceX": 1,
    "sourceY": " ",
    "targetX": 1,
    "targetY": " "
  }
 ]
}
	<!DOCTYPE html>
	<meta charset="utf-8"> <!-- also save this file as unicode-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.min.js"></script>
	<style>
	rect.ny_{
	fill: none;
	stroke: none;
	}
	path.lty_{
	stroke: none;
	}
	</style>
	</head>

	<body>
	<script>
	// setup a chart with a json file and add the visualization to a DOM element
	// var myChart = sequenceExplorer.chart(); // no parameter when data is embedded in <pre id="data"> tag
	var myChart = sequenceExplorer.chart("sequence1.json") // load data from a json file
	.eventOrder([ "C", "B", "A"," "]) // changing the order of the events on the y axis
	.sequenceName("visit") // changing the name of the x axis for the tooltip
	.percentages(["%sameEvent"]); // adding % of same events to the tooltip

	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": " "
	},
	{
	"value": 100,
	"sourceX": 1,
	"sourceY": " ",
	"targetX": 1,
	"targetY": " "
	}
	]
	}