-
Notifications
You must be signed in to change notification settings - Fork 0
/
plotly.html
145 lines (131 loc) · 7.88 KB
/
plotly.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>data.world and Plotly</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body style="color:#333D49;">
<!--jumbotron header-->
<div class="header" style="background:#333D49; max-height:150px;">
<div class="container p-responsive py-6 py-lg-10 text-center" style="color:#fff;">
<img src="dw+plotly_light.png" class="mb-3 mb-sm-5 col-6 col-sm-12" style="max-width:550px;">
</div>
</div>
<!--first intro-->
<div class="container align-items-center text-center form-group align-items-center" style="padding-bottom:1em;padding-top:4em;">
<h1 style="font-weight:400"> You've enabled Plotly, now what?</h1>
<p class="h5" style="font-weight:300"> Plotly allows you to easily query your data.world data and create a variety of modern visualizations to highlight your findings.
</p>
</div>
<!--first section-->
<div class="container" style="padding-bottom:1em;padding-top:2em;">
<div class="row">
<div class="col">
<h2 style="font-weight:400"> Open a dataset file in Plotly.</h2>
<p class="h5" style="font-weight:300"> You can easily open a file in Plotly from your data.world dataset:</p>
<ol style="list-style-position: inside;">
<li style="padding-bottom:1em; font-weight:300; padding-top:2em;">From a file, use the <img src="OIA.png"> option and select <b>Plotly</b> in the resulting modal.
</li>
<div class="col-sm-9" style="padding-top:1em;">
<img src="plotly_open.png" class="img-fluid rounded" style="box-shadow:7px 7px 30px grey;">
</div>
<li style="padding-bottom:1em; font-weight:300; padding-top:3em;">Choose the <b>Open in Plot.ly</b> option from the list.
</li>
<div class="col-sm-9" style="padding-top:2em;">
<img src="plotly_open-plotly.png" class="img-fluid rounded" style="box-shadow:7px 7px 30px grey;">
</div>
<li style="padding-bottom:1em; font-weight:300; padding-top:3em;">Preview your data and build a chart.
<div class="col-sm-9" style="padding-top:3em;">
<img src="plotly_preview.png" class="img-fluid rounded" style="box-shadow:7px 7px 30px grey;">
</div>
</li>
<li style="font-weight:300; padding-top:2em;">Refine options and save or share your visualization!
</li>
</ol>
</div>
</div>
</div>
<!--second section-->
<div class="container" style="padding-bottom:1em;padding-top:2em;">
<div class="row">
<div class="col">
<h2 style="font-weight:400"> Use Plotly's Falcon SQL Client.</h2>
<p class="h5" style="font-weight:300"> If you're looking for more flexibility, you can use Plotly's Falcon SQL Client to query data next to inline visualizations:</p>
<ol style="list-style-position: inside;">
<li style="padding-bottom:1em; font-weight:300; padding-top:2em;">Download the <a href="https://plot.ly/free-sql-client-download/" target="_blank">Falcon SQL Client</a>.
</li>
<li style="padding-bottom:1em; font-weight:300;">Select data.world (look for Sparkle the Owl!) and enter your <b>dataset ID</b> and your <a href="https://data.world/integrations/plotly?tab=settings" target="_blank"><b>API token</b></a>.
</li>
<div class="col-sm-9" style="padding-top:2em;">
<img src="plotly_falcon-dw.png" class="img-fluid rounded" style="box-shadow:7px 7px 30px grey;">
</div>
<li style="padding-bottom:1em; font-weight:300; padding-top:3em;">In the <b>Query tab</b>, review your data and add a query.
<div class="col-sm-9" style="padding-top:3em;">
<img src="plotly_falcon-preview.png" class="img-fluid rounded" style="box-shadow:7px 7px 30px grey;">
</div>
</li>
<li style="font-weight:300; padding-top:2em;">Refine options and start building visualizations!
</li>
</ol>
</div>
</div>
</div>
<!--what's next-->
<hr style="margin-top:2em;">
<div class="container" style="padding-bottom:1em; padding-top:1em;">
<div class="row">
<div class="col">
<h2 style="font-weight:400; padding-top:1em;"> What next?</h2>
<p class="h5" style="font-weight:300"> Here are a few things you can do with Plotly and data.world:</p>
<ul style="list-style-position: inside; padding-top:2em;">
<li style="padding-bottom:1em; font-weight:300;">Use Plotly's Falcon SQL Client to:
<ul style="list-style:inside; font-weight:300; padding-top:1em;">
<li style=" font-weight:300;">
Connect to any project or dataset that you have access to.
</li>
<li style=" font-weight:300;">
Share your charts online.
</li>
<li style=" font-weight:300;">
Create <a href="https://help.plot.ly/database-connectors/schedule-query/" target="_blank">persistent connections to keep charts up to date</a>.
</li>
</ul>
</li>
<li style="padding-bottom:1em; font-weight:300;">
Embed your Plotly visualizations in data.world anywhere Markdown is supported (like in comments and summaries).
</li>
<div class="alert alert-info border" style="font-weight:300; color:#36454f">
<ul style="list-style:inside; font-weight:300;">
<li style=" font-weight:300;">
<b>To embed as an Insight:</b> Create a new insight and use your chart's <a href="https://help.plot.ly/how-sharing-works-in-plotly/" target="_blank"><i>shareable link</i></a>.
</li>
<li style="font-weight:300;">
<b>To embed in Markdown:</b> Use the <code>@(shareable_link)</code> notation.
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<!--footer-->
<div class="jumbotron-fluid text-center align-items-center border-top" style="margin-top:3em; padding-top:3em; padding-bottom: 3em; background-color:#F2F2F2; color:#36454f">
<h4 style="font-weight:300"> Want to see more information on the data.world + Plotly Integration? <u><a href="https://meta.data.world/plotly-insights-for-all-e3bed6a2e2e6" style="color:#36454f; font-weight:600;" target="_blank">check it out here</a></u>.
</h4>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>