Skip to content

Instantly share code, notes, and snippets.

@enactdev

enactdev/README.md

Last active May 2, 2019 08:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save enactdev/8c65701cdb3ad655978f856d6ce92059 to your computer and use it in GitHub Desktop.
Save enactdev/8c65701cdb3ad655978f856d6ce92059 to your computer and use it in GitHub Desktop.
Download ZIP
Plotly JS Example Final
Raw
README.md

Plotly JS Example Final

Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canada Goose, American Black Duck, and Mallard counts in Delaware from 1975 to 2018</title>
<meta name="description" content="Canada Goose, American Black Duck, and Mallard counts in Delaware from 1975 to 2018">
<meta name="author" content="Open Data Delaware">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="plotly-chart"></div>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
// From: https://www.w3schools.com/js/js_json_parse.asp
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var plotly_vars = JSON.parse(this.responseText);
Plotly.newPlot('plotly-chart', plotly_vars['data'], plotly_vars['layout']);
}
};
xmlhttp.open("GET", "plotly_vars.json", true);
xmlhttp.send();
</script>
</body>
</html>
Raw
plotly_vars.json
{"data": [{"type": "scatter", "x": ["1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"], "y": [38749, 61243, 134438, 86239, 47677, 45951, 76073, 34136, 43595, 65814, 31683, 39615, 52237, 30671, 33456, 44949, 40266, 41653, 34627, 38901, 54306, 50457, 36985, 52627, 111566, 60837, 123431, 63788, 95131, 91451, 68555, 74227, 57005, 67795, 47898, 48149, 50506, 38952, 34245, 31370, 40989, 26603, 29051, 56943], "mode": "markers+lines", "name": "Canada Goose", "hoverinfo": "text", "hovertext": ["38,749 Canada Goose in 1975", "61,243 Canada Goose in 1976", "134,438 Canada Goose in 1977", "86,239 Canada Goose in 1978", "47,677 Canada Goose in 1979", "45,951 Canada Goose in 1980", "76,073 Canada Goose in 1981", "34,136 Canada Goose in 1982", "43,595 Canada Goose in 1983", "65,814 Canada Goose in 1984", "31,683 Canada Goose in 1985", "39,615 Canada Goose in 1986", "52,237 Canada Goose in 1987", "30,671 Canada Goose in 1988", "33,456 Canada Goose in 1989", "44,949 Canada Goose in 1990", "40,266 Canada Goose in 1991", "41,653 Canada Goose in 1992", "34,627 Canada Goose in 1993", "38,901 Canada Goose in 1994", "54,306 Canada Goose in 1995", "50,457 Canada Goose in 1996", "36,985 Canada Goose in 1997", "52,627 Canada Goose in 1998", "111,566 Canada Goose in 1999", "60,837 Canada Goose in 2000", "123,431 Canada Goose in 2001", "63,788 Canada Goose in 2002", "95,131 Canada Goose in 2003", "91,451 Canada Goose in 2004", "68,555 Canada Goose in 2005", "74,227 Canada Goose in 2006", "57,005 Canada Goose in 2007", "67,795 Canada Goose in 2008", "47,898 Canada Goose in 2009", "48,149 Canada Goose in 2010", "50,506 Canada Goose in 2011", "38,952 Canada Goose in 2012", "34,245 Canada Goose in 2013", "31,370 Canada Goose in 2014", "40,989 Canada Goose in 2015", "26,603 Canada Goose in 2016", "29,051 Canada Goose in 2017", "56,943 Canada Goose in 2018"], "line": {"shape": "spline", "smoothing": 0.5, "width": 3}, "marker": {"size": 6, "opacity": 0.7}}, {"type": "scatter", "x": ["1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"], "y": [9356, 16656, 25106, 27534, 17992, 9177, 9926, 6439, 13965, 11037, 13970, 9536, 9686, 8513, 9865, 11331, 12250, 8942, 12722, 12964, 11594, 9373, 9037, 9937, 14049, 9480, 12175, 9301, 12284, 7974, 8588, 8254, 4989, 8547, 9372, 11725, 5585, 6507, 9177, 9598, 8258, 8216, 6328, 10224], "mode": "markers+lines", "name": "American Black Duck", "hoverinfo": "text", "hovertext": ["9,356 American Black Duck in 1975", "16,656 American Black Duck in 1976", "25,106 American Black Duck in 1977", "27,534 American Black Duck in 1978", "17,992 American Black Duck in 1979", "9,177 American Black Duck in 1980", "9,926 American Black Duck in 1981", "6,439 American Black Duck in 1982", "13,965 American Black Duck in 1983", "11,037 American Black Duck in 1984", "13,970 American Black Duck in 1985", "9,536 American Black Duck in 1986", "9,686 American Black Duck in 1987", "8,513 American Black Duck in 1988", "9,865 American Black Duck in 1989", "11,331 American Black Duck in 1990", "12,250 American Black Duck in 1991", "8,942 American Black Duck in 1992", "12,722 American Black Duck in 1993", "12,964 American Black Duck in 1994", "11,594 American Black Duck in 1995", "9,373 American Black Duck in 1996", "9,037 American Black Duck in 1997", "9,937 American Black Duck in 1998", "14,049 American Black Duck in 1999", "9,480 American Black Duck in 2000", "12,175 American Black Duck in 2001", "9,301 American Black Duck in 2002", "12,284 American Black Duck in 2003", "7,974 American Black Duck in 2004", "8,588 American Black Duck in 2005", "8,254 American Black Duck in 2006", "4,989 American Black Duck in 2007", "8,547 American Black Duck in 2008", "9,372 American Black Duck in 2009", "11,725 American Black Duck in 2010", "5,585 American Black Duck in 2011", "6,507 American Black Duck in 2012", "9,177 American Black Duck in 2013", "9,598 American Black Duck in 2014", "8,258 American Black Duck in 2015", "8,216 American Black Duck in 2016", "6,328 American Black Duck in 2017", "10,224 American Black Duck in 2018"], "line": {"shape": "spline", "smoothing": 0.5, "width": 3}, "marker": {"size": 6, "opacity": 0.7}}, {"type": "scatter", "x": ["1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"], "y": [6036, 22730, 22736, 24674, 16390, 3064, 6504, 2312, 8160, 6822, 9198, 11010, 8481, 4676, 8074, 8583, 7644, 8685, 6529, 9896, 5906, 5671, 5504, 10377, 10349, 4532, 11683, 7987, 12104, 13054, 11130, 10126, 11961, 13105, 16063, 9982, 6986, 8068, 10943, 8850, 10274, 8424, 9085, 6834], "mode": "markers+lines", "name": "Mallard", "hoverinfo": "text", "hovertext": ["6,036 Mallard in 1975", "22,730 Mallard in 1976", "22,736 Mallard in 1977", "24,674 Mallard in 1978", "16,390 Mallard in 1979", "3,064 Mallard in 1980", "6,504 Mallard in 1981", "2,312 Mallard in 1982", "8,160 Mallard in 1983", "6,822 Mallard in 1984", "9,198 Mallard in 1985", "11,010 Mallard in 1986", "8,481 Mallard in 1987", "4,676 Mallard in 1988", "8,074 Mallard in 1989", "8,583 Mallard in 1990", "7,644 Mallard in 1991", "8,685 Mallard in 1992", "6,529 Mallard in 1993", "9,896 Mallard in 1994", "5,906 Mallard in 1995", "5,671 Mallard in 1996", "5,504 Mallard in 1997", "10,377 Mallard in 1998", "10,349 Mallard in 1999", "4,532 Mallard in 2000", "11,683 Mallard in 2001", "7,987 Mallard in 2002", "12,104 Mallard in 2003", "13,054 Mallard in 2004", "11,130 Mallard in 2005", "10,126 Mallard in 2006", "11,961 Mallard in 2007", "13,105 Mallard in 2008", "16,063 Mallard in 2009", "9,982 Mallard in 2010", "6,986 Mallard in 2011", "8,068 Mallard in 2012", "10,943 Mallard in 2013", "8,850 Mallard in 2014", "10,274 Mallard in 2015", "8,424 Mallard in 2016", "9,085 Mallard in 2017", "6,834 Mallard in 2018"], "line": {"shape": "spline", "smoothing": 0.5, "width": 3}, "marker": {"size": 6, "opacity": 0.7}}], "layout": {"title": "Canada Goose, American Black Duck, Mallard from 1975 to 2018", "xaxis": {"title": "Year"}, "yaxis": {"title": "Number counted"}}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment