antoinerg/index.html

## index.html
<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>

## sankey-order.markdown

      
    Raw
  

              sankey-order.markdown
            
          
    Sankey-order

How to build a line and scatter plot with Plotly.js charts.
A Pen by Jon Mease on CodePen.
License.

  
## script.js
var scatter = {
  "type": "scatter",
  "xaxis": "x2"
}

var sankey = {
  "domain": {
    "x": [
      0,
      0.45
    ]
  },
  "link": {
    "source": [
      0,
      0,
      1,
      1
    ],
    "target": [
      2,
      3,
      2,
      3
    ],
    "value": [
      1,
      1,
      1,
      1
    ]
  },
  "node": {
    "label": [
      "A",
      "B",
      "C",
      "D"
    ]
  },
  "type": "sankey"
}

var fig = {
  // Works
  // "data": [sankey, scatter],

  // Breaks
  "data": [scatter, sankey],

  "layout": {
    "annotations": [
      {
        "text": "(1,1)",
        "x": 1,
        "xref": "x2",
        "y": 1
      }
    ],
    "xaxis2": {
      "domain": [
        0.55,
        1
      ]
    }
  }
}

Plotly.newPlot('myDiv', fig, {showSendToCloud: true});
	<head>
	<!-- Plotly.js -->
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>

	<body>
	<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
	<script>
	<!-- JAVASCRIPT CODE GOES HERE -->
	</script>
	</body>
	var scatter = {
	"type": "scatter",
	"xaxis": "x2"
	}

	var sankey = {
	"domain": {
	"x": [
	0,
	0.45
	]
	},
	"link": {
	"source": [
	0,
	0,
	1,
	1
	],
	"target": [
	2,
	3,
	2,
	3
	],
	"value": [
	1,
	1,
	1,
	1
	]
	},
	"node": {
	"label": [
	"A",
	"B",
	"C",
	"D"
	]
	},
	"type": "sankey"
	}

	var fig = {
	// Works
	// "data": [sankey, scatter],

	// Breaks
	"data": [scatter, sankey],

	"layout": {
	"annotations": [
	{
	"text": "(1,1)",
	"x": 1,
	"xref": "x2",
	"y": 1
	}
	],
	"xaxis2": {
	"domain": [
	0.55,
	1
	]
	}
	}
	}

	Plotly.newPlot('myDiv', fig, {showSendToCloud: true});