').text(\n",
" `Sample size: ${sample_size} out of ${total} ${ adjusted ? \"(adjusted)\" : \"\" }`));\n",
" }());\n",
" "
],
"text/html": [
"
"
]
},
"metadata": {
"finalized": true
},
"output_type": "display_data"
}
],
"source": [
"%load_ext jupyter_require"
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {
"ExecuteTime": {
"end_time": "2019-07-19T11:01:23.831507Z",
"start_time": "2019-07-19T11:01:23.651055Z"
},
"require": [
""
]
},
"outputs": [
{
"data": {
"text/html": [
"{\n",
" \"arc\": {\n",
" \"backgroundColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderColor\": \"#fff\",\n",
" \"borderWidth\": 2,\n",
" \"borderAlign\": \"center\"\n",
" },\n",
" \"line\": {\n",
" \"tension\": 0.4,\n",
" \"backgroundColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderWidth\": 3,\n",
" \"borderColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderCapStyle\": \"butt\",\n",
" \"borderDash\": [],\n",
" \"borderDashOffset\": 0,\n",
" \"borderJoinStyle\": \"miter\",\n",
" \"capBezierPoints\": true,\n",
" \"fill\": true\n",
" },\n",
" \"point\": {\n",
" \"radius\": 3,\n",
" \"pointStyle\": \"circle\",\n",
" \"backgroundColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderWidth\": 1,\n",
" \"hitRadius\": 1,\n",
" \"hoverRadius\": 4,\n",
" \"hoverBorderWidth\": 1\n",
" },\n",
" \"rectangle\": {\n",
" \"backgroundColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderColor\": \"rgba(0,0,0,0.1)\",\n",
" \"borderSkipped\": \"bottom\",\n",
" \"borderWidth\": 0\n",
" }\n",
"}"
],
"text/plain": [
""
]
},
"metadata": {
"finalized": true,
"frozen": true
},
"output_type": "display_data"
}
],
"source": [
"%%requirejs\n",
"\n",
"let defaultElementConfig = $(\"\").html(JSON.stringify(Chart.defaults.global.elements, null, 4))\n",
"\n",
"element.append(defaultElementConfig)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Check out [ChartJS](https://www.chartjs.org/docs/latest/general/) docs for more information about default settings"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Custom Graph Objects"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can create your custom GraphObjects by implementing a function of the following specification:\n",
"\n",
"```ts\n",
"interface Index {\n",
" data: Array,\n",
" dtype: string\n",
"}\n",
"\n",
"function(data: Array, index: Array, dtype: string): Chart\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Suppose we wanna plot colours and we want a special kind of plot for that"
]
},
{
"cell_type": "code",
"execution_count": 20,
"metadata": {
"ExecuteTime": {
"end_time": "2019-07-19T11:01:27.457855Z",
"start_time": "2019-07-19T11:01:27.303409Z"
},
"require": [
"chartjs"
]
},
"outputs": [],
"source": [
"%%requirejs chartjs\n",
"\n",
"let isValidColour = function(colour) {\n",
" let s = new Option().style\n",
" s.color = colour\n",
" \n",
" return s.color !== '' || console.debug(`Invalid CSS colour: '${colour}'.`)\n",
"}\n",
"\n",
"let ColorPalette = function(data, index, dtype) {\n",
" const canvas = document.createElement('canvas')\n",
" const ctx = canvas.getContext('2d')\n",
" \n",
" // perform check if the pattern is correct\n",
" if ( !data.every( d => typeof(d) === 'string' && isValidColour(d) ) ) {\n",
" console.debug(\"Data does not match colour pattern.\")\n",
" return\n",
" }\n",
" \n",
" // evenly slice the Pie chart by number of colours\n",
" const slices = new Array(data.length).fill(Number(1 / data.length).toFixed(2))\n",
" const labels = index[0].data\n",
" \n",
" let chart = new Chart(ctx, {\n",
" type: 'pie',\n",
" data: {\n",
" labels: labels,\n",
" datasets: [{\n",
" data: slices,\n",
" backgroundColor: data,\n",
" }]\n",
" },\n",
" })\n",
" \n",
" return chart\n",
"}\n",
"\n",
"// Register the new chart\n",
"$.fn.dataTable.defaults.graphObjects['ColorPalette'] = ColorPalette"
]
},
{
"cell_type": "markdown",
"metadata": {
"ExecuteTime": {
"end_time": "2019-07-18T19:55:59.832938Z",
"start_time": "2019-07-18T19:55:59.718074Z"
},
"require": [
"chartjs"
]
},
"source": [
"And set it as default for the dtype you wanna use it for (in this case `string`):\n",
"\n",
" The default setting is:\n",
" \n",
"```\n",
" { \n",
" boolean: ['CategoricalBar', 'Histogram'],\n",
" date: ['CategoricalBar', 'Histogram'],\n",
" num: ['Histogram', 'CategoricalBar', 'Bar', 'Line'],\n",
" string: ['CategoricalBar', 'Histogram'],\n",
"\n",
" undefined: ['Bar']\n",
" }\n",
" \n",
"```\n",
"\n",
" The order specifies fallback plots."
]
},
{
"cell_type": "code",
"execution_count": 21,
"metadata": {
"ExecuteTime": {
"end_time": "2019-07-19T11:01:32.045247Z",
"start_time": "2019-07-19T11:01:31.875373Z"
},
"require": [
""
]
},
"outputs": [],
"source": [
"%%requirejs\n",
"\n",
"$.fn.dataTable.defaults.dTypePlotMap['string'].unshift('ColorPalette')"
]
},
{
"cell_type": "code",
"execution_count": 22,
"metadata": {
"ExecuteTime": {
"end_time": "2019-07-19T11:01:32.085258Z",
"start_time": "2019-07-19T11:01:32.048433Z"
},
"require": [
"base/js/events",
"datatables.net",
"d3",
"chartjs",
"graph-objects",
"jupyter-datatables"
]
},
"outputs": [
{
"data": {
"text/html": [
"
Showing 1 to 4 of 4 entries
').text(\n",
" `Sample size: ${sample_size} out of ${total} ${ adjusted ? \"(adjusted)\" : \"\" }`));\n",
" }());\n",
" "
],
"text/html": [
"
\n",
"\n",
"
\n",
" \n",
" \n",
" | \n",
" value | \n",
"
\n",
" \n",
" \n",
" \n",
" | red | \n",
" rgb(255, 99, 132) | \n",
"
\n",
" \n",
" | blue | \n",
" rgb(54, 162, 235) | \n",
"
\n",
" \n",
" | lightyellow | \n",
" rgba(255, 205, 86, 0.3) | \n",
"
\n",
" \n",
" | darkorange | \n",
" darkorange | \n",
"
\n",
" \n",
"
\n",
"
Showing 1 to 4 of 4 entries
').text(\n",
" `Sample size: ${sample_size} out of ${total} ${ adjusted ? \"(adjusted)\" : \"\" }`));\n",
" }());\n",
" "
],
"text/html": [
"
\n",
"\n",
"
\n",
" \n",
" \n",
" | \n",
" value | \n",
"
\n",
" \n",
" \n",
" \n",
" | red | \n",
" red | \n",
"
\n",
" \n",
" | green | \n",
" invalid | \n",
"
\n",
" \n",
" | blue | \n",
" blue | \n",
"
\n",
" \n",
" | other | \n",
" invalid | \n",
"
\n",
" \n",
"
\n",
"