{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": "## Displaying rich HTML elements in the Notebook"
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": "### Displaying SVG in the Notebook"
    },
    {
      "cell_type": "code",
      "execution_count": 1,
      "metadata": {},
      "outputs": [],
      "source": "def svg_disc(radius, color):\n    return \"\"\"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n          <circle cx=\"{0:d}\" cy=\"{0:d}\" r=\"{0:d}\" fill=\"{1:s}\" />\n          </svg>\"\"\".format(radius, color)"
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {},
      "outputs": [],
      "source": "class Disc(object):\n    def __init__(self, radius, color='red'):\n        self.radius = radius\n        self.color = color\n\n    def _repr_svg_(self):\n        return svg_disc(self.radius, self.color)"
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {},
      "outputs": [],
      "source": "Disc(60, 'purple')"
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": "### JavaScript and D3 in the Notebook"
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "metadata": {},
      "outputs": [],
      "source": "from IPython.display import display_javascript"
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "metadata": {},
      "outputs": [],
      "source": "JS_TEMPLATE = \"\"\"\n// We load the d3.js library from the Web.\nrequire.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\nrequire([\"d3\"], function(d3) {\n    // Example from http://bost.ocks.org/mike/bar/\n\n    // Define the data.\n    var data = %s;\n\n    // We normalize the data.\n    var x = d3.scale.linear()\n        .domain([0, d3.max(data)])\n        .range([0, 420]);\n\n    // We define a categorical color map.\n    var color = d3.scale.category10();\n\n    // We create the chart.\n    d3.select(\".chart\")\n      .selectAll(\"div\")\n        .data(data)\n      .enter().append(\"div\")\n        .style(\"width\", function(d) { return x(d) + \"px\"; })\n        .text(function(d) { return d; });\n\n});\n\"\"\""
    },
    {
      "cell_type": "code",
      "execution_count": 6,
      "metadata": {},
      "outputs": [],
      "source": "my_list = [2, 3, 5, 7, 11, 13]"
    },
    {
      "cell_type": "code",
      "execution_count": 7,
      "metadata": {},
      "outputs": [],
      "source": "JS = JS_TEMPLATE % str(my_list)"
    },
    {
      "cell_type": "code",
      "execution_count": 8,
      "metadata": {},
      "outputs": [],
      "source": "%%HTML\n<style>\n.chart div {\n  font: 18px sans-serif;\n  background-color: steelblue;\n  text-align: right;\n  padding: 5px;\n  margin: 3px;\n  color: white;\n}\n</style>\n<div class=\"chart\"></div>"
    },
    {
      "cell_type": "code",
      "execution_count": 9,
      "metadata": {},
      "outputs": [],
      "source": "display_javascript(JS, raw=True)"
    }
  ],
  "metadata": {},
  "nbformat": 4,
  "nbformat_minor": 0
}