Introduction to plotly.js — an open source graphing library

Plotly.js is a library suited for JavaScript applications which make use of graphs and charts. There are a few reasons to consider using it for your next project:

  1. Plotly.js uses both D3.js and stack.gl
  2. Plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps
  3. It is an open source library

It has more than 9900 stars on Github

There are 2 main concepts in Plotly :

1. Data
2. Layout

Data

The Data object defines what we want to display in the chart (that is, the data). We define a collection of data and the specifications to display them as a trace. A Data object can have many traces. Think of a line chart with two lines representing two different categories: each line is a trace.

Layout

The Layout object defines features that are not related to data (like title, axis titles, and so on). We can also use the Layout to add annotations and shapes to the chart.

Let’s looks at the setup :

First, include the file from CDN

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

Next, let’s plot a line graph :

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>

</body>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [19, 14, 12, 16],
  type: 'scatter',
};

var trace2 = {
  x: [12, 22, 23, 24],
  y: [15, 4, 10, 8],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Result :

Basic setup can be done with a file inclusion, a DOM element, and a script for plotting.
After the inclusion of the Plotly.js library in , we have defined an empty <div> to plot the graph.
Plotly.new() draws a new plot in the element.
We can have a Line and Scatter Plot charts by inclusion of mode in the trace variable.
The legend in a graph is linked to the data being graphically displayed in the plot area of the chart.
We can customize charts by using different options like legend name, marker color, marker size, line color, line width, chart title, mode, etc.

Example :


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>

JS :

var trace1 = {
  x: [11, 12, 13, 14],
  y: [11, 14, 12, 16],
  mode: 'markers',
  name : "Apple",
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 13
  }
};

var trace2 = {
  x: [12, 13, 14, 15],
  y: [17, 15, 10, 19],
  mode: 'lines',
  name : "Mangoes",
  line: {
    color: 'rgb(55, 128, 191)',
    width: 6
  }
};

var trace3 = {
  x: [11, 21, 31, 41],
  y: [14, 19, 16, 13],
  mode: 'lines+markers',
  name : "grapes",
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 9
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 2
  }
};

var data = [trace1, trace2, trace3];

var layout = {
  title: 'Line and Scatter Styling Example'
};

Plotly.newPlot('myDiv', data, layout);

Result :

If we use markers as we have used in trace1 , notice that we only get points marked in the graph coordinates and do not see the connected line across all points

By now we have seen some examples of line, let’s quickly plot a bar chart using ‘bar’ as type.

Example :

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>

JS :

var data = [{
  x: ['lions', 'tigers','monkeys'],
  y: [21, 15, 24],
  type: 'bar'
}];

Plotly.newPlot('myDiv', data);

Result :

Did you found this article helpful ? I try my best to write a deep dive article.

I had a pretty good experience with Plotly. What are your thoughts about it after this overview ? And what other tools do you use to generate charts for the web ? Share them in the comments!

I hope that you have found this useful. If so, be sure to like and share this blog post. Thank you for reading! 😀

Advertisements

MozoGeek Event at Zeal College of Engineering Pune

MozoGeek Event at Zeal College of Engineering

Event Name : Mozogeek

Agenda :

1.Web app development
2. Introduction to Firefox OS
3. Firefox OS Application development – Foxication
4. Hands on training on Appmaker

Day and Date :
Saturday, 22nd August

Venue :
Computer Department, ZES’s Zeal College of Engineering and Research, Narhe, Pune

Hashtag :  #mozogeekzfc

I started the session with an introduction to Mozilla and it’s mission. Then in the next session I  gave the introduction of Firefox OS. I explained the advantages of Firefox OS and why it is a great mobile OS,demo of FirefoxOS on simulator.

prasad seth firefox

Then in the next session I gave hands-on training to the attendees on how to make a web application. I explained them about Webmaker with hand-on training of Thimble and Appmaker. Some Remixes and makes were made by the attendees.

prasad seth firefox

I explained them about Firefox Marketplace… Attendees were asked to download different apps and review the apps which they liked.

prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox prasad seth firefox

Mozilla Pune Annual Community Meetup

Mozilla Pune Annual Community Meetup
Event Name: Mozilla Pune Annual Community Meetup
Time: 10am to 6pm
Date: 20th June
Venue: Red Hat, Pune
Hashtags:  #MozPune
Event agenda :
1. Introduction
2. Pune community analysis
3. Taskforce Introduction
4. Making inter-community communication better
5. Mozilla Pune 2015 Goals
6. Inter-community collaboration work
It was an awesome annual meetup at Red Hat,Pune with all Pune Community members
prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla prasad seth mozilla

Mozilla Awarness Program @ VIIT Pune

Mozilla Awarness Program
Event Name: Mozilla Awareness Program @ VIIT Pune
Time: 1 am to 3 pm
Date: 11th July
Venue: Vishwakarma Institute of Information Technology,Pune
Hashtag : #viitFSA
Students in VIIT are enthusiastic for contributing to Mozilla as an FSA. This event helped them to know about Mozilla’s mission, web app development, open web and different ways of contributing to Firefox.
I started the event by giving an introduction about Firefox. Then in the next session I introduced students about Web app development and Firefox OS. Along with me Hrushikesh and Pooja introduced attendees about FSA program.
We registered the attendees for the FSA program. Attendees were very curious to know more about different Firefox products.
Mr. Kailas Patil Sir guided us for the event !!
prasad seth mozilla prasad seth mozilla prasad seth mozilla

Firefox Student Ambassador of the Month- February

Firefox Student Ambassador of the Month

I got selected as Firefox Student Ambassador of the Month- February.

It feels really awesome to get recognized and to get featured on the official blog of Firefox Student Ambassador.

Thanks a lot Firefox for appreciation !!

Love Firefox.

https://blog.mozilla.org/studentambassadors/2015/03/05/fsa-firefox-club-of-the-month-february-2015/

Remix Hackathon

Remix Hackathon

Event Name: Remix Hackathon
Time: 09:00 am to 6:00 pm
Date:  21st Feb
Venue: VIIT, Pune
Hashtags: #viitremixhackathon   #firefoxstudents   #viitfirefoxclub

Me, Dr. Patil, Mr. Dyvik conducted sessions during the event on following topics:

  1. Web app development
  2. SUMO
  3. Web Maker
  4. Thimble
  5. Popcorn
  6. X-Ray Goggles
  7. App Maker
  8. Localization
  9. Firefox OS
  10. Bugzilla

prasad seth firefox
This event created an open platform for Technical and Non-technical attendees to state that anything that is modified on web is called a “HACK”

prasad seth firefox

I conducted session on “how to develop web apps”. Where I introduced about what are web apps, different ways to develop web apps. After the session attendees made some awesome apps.

In this Hackathon we taught about contributing to localization, Webmaker, App development, testing and many more ways to contribute to Mozilla.

prasad seth firefox

Next session was conducted by Qaidjohar Jawadwala where he gave small introduction about Mozilla, introduction about Remix Hackathon event.

prasad seth firefox

In the end I gave a talk about Mozilla Stumbler in which I demonstrated the working of Mozilla Stumbler, various features of the Mozilla Stumbler App and how to contribute to it.

prasad seth firefox

 

 

MozMaker Event

MozMaker Event

Event name : MozMaker

Event Date : 12 February

Venue : Bharati Vidyapeeth Jawaharlal Nehru Institute of Technology

Objective of the event :

  1. Introduction to web application development with hands-on
  2. Introduction to Firefox, which is more than just a browser
  3. FirefoxOS and its architecture
  4. Introduction to Firefox “HELLO”
  5. Hands-on experience on how to make apps using AppMaker.
  6. Empower and encourage Women to contribute to Mozilla  #WoMoz

Today I conducted a MozMaker event at Bharati Vidyapeeth Jawaharlal Nehru Institute of Technology  for 150+ women attendees #WoMoz   #MozMaker

prasad seth mozilla

The first session was on Introduction to web application development with hands-on demo. In this session I gave a talk on what are web apps, different ways to develop web apps, front-end frameworks required, etc.

In the next session “Firefox: just than a browser” I introduced attendees about Firefox, which is more than just a browser. In this session different products and capabilities of Firefox browser was explained. Then the next session was on FirefoxOS , which is recently launched in India. I explained about the architecture of FirefoxOS, advantages of FirefoxOS, FirefoxOS phones,etc.

prasad seth mozilla

In the next session attendees were introduced to “Firefox HELLO” which is the new product of Firefox for Video chat without any sign up… Attendees were astonished after knowing the features of “Firefox Hello”.

prasad seth mozilla

In the third session attendees were introduced to Webmaker. Attendees got hands-on experience on how to make apps using AppMaker. Detailed explanation on how to make applications was given to attendees with demonstration.

prasad seth mozilla

At the end of the session there was a quiz competition conducted which was based on Firefox products, FirefoxOS,etc. Winners were given awesome Firefox Swags !!

prasad seth mozilla

It was a great event…The crowd was enthusiastic. Overall an amazing experience.