Butterfly Chart with Ploty.js

plotly.js
1

Hi,

new to this library so forgive me if silly question.

I am interested in creating something like this Create a Butterfly Chart Easily Using Plotly | by My Data Talk | Towards Data Science

But I can’t use ploty.py , I can only use ploty.js , how can I achieve it?

Looked areound but not able to find any.

Thank you.

2

ChatGPT geve me the answer.

Posting here if someone has the same question

Sure, here’s an example of how to create a butterfly graph using Plotly.js as a horizontal bar chart:

htmlCopy code

<!DOCTYPE html>
<html>
<head>
	<title>Butterfly Graph with Plotly.js</title>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
	<div id="graph"></div>

	<script>
		var trace1 = {
		  x: [1, 4, 6, 4, 1],
		  y: [1, 2, 3, 4, 5],
		  type: 'bar',
		  orientation: 'h',
		  marker: {
		    color: 'blue',
		  },
		};

		var trace2 = {
		  x: [-1, -4, -6, -4, -1],
		  y: [1, 2, 3, 4, 5],
		  type: 'bar',
		  orientation: 'h',
		  marker: {
		    color: 'red',
		  },
		};

		var layout = {
		  title: 'Butterfly Graph',
		  xaxis: {title: 'X-axis'},
		  yaxis: {title: 'Y-axis'},
		  barmode: 'overlay',
		  width: 600,
		  height: 400
		};

		var data = [trace1, trace2];

		Plotly.newPlot('graph', data, layout);
	</script>
</body>
</html>

In this example, we define two trace objects, one for the blue curve and one for the red curve, each with their own x and y values. We set the type to ‘bar’ and the orientation to ‘h’ to create a horizontal bar chart. We also set the marker property to define the color of the bars.

We then define the layout object, which sets the title and axis labels of the graph, as well as its size. We also set the barmode property to ‘overlay’ to overlap the bars.

Finally, we create an array data that contains the two trace objects, and we call Plotly.newPlot to create the graph in the div element with ID ‘graph’.