%% raw

Welcome to Iodide!

Iodide lets you do data science entirely in your browser. Create, share,
collaborate, and reproduce powerful reports and visualizations with tools you
already know.

You can use this notebook to explore your Redash data in new ways. When you have
finished making changes, click the "Run Full Notebook" button above. For more
information about Iodide, see the help menu.

%% fetch
// Download the data from Redash and save it to a variable called "dataset"
json: dataset = {{ redash_url }}api/queries/{{ query_id }}/results.json?api_key={{ api_key }}
js: https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly-basic.min.js

%% js
// Insert row and column counts
document.getElementById('rows').innerHTML =
    dataset.query_result.data.rows.length
document.getElementById('cols').innerHTML =
    dataset.query_result.data.columns.length

%% py
# You can use Python, too! Just uncomment the code below.

# from js import dataset
# import pandas as pd
#
# df = pd.DataFrame.from_records(
#     [dict(r) for r in dataset.query_result.data.rows]
# )

%% css
/* Improve the report's design */

#rows, #cols {
  font-weight: bold;
}

.cta {
  font-style: italic;
}

%% md
<!--
    This is a Markdown cell. You can put Markdown or plain HTML here.
    Any element created in a Markdown cell can be selected and modified
    with JavaScript.
-->

# {{ title }}
Dataset size: <span id="rows"></span> rows, <span id="cols"></span> columns.

<span class="cta">Add your writeup here.</span>

## Charts

<span class="cta">Add charts and other visualizations here.</span>

<div id="charts"></div>
