Skip to content

Instantly share code, notes, and snippets.

@oshikiri

oshikiri/2019-01-04_github-punch-card.ipynb

Last active January 27, 2019 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oshikiri/82200fb98ce03383cb8f06f142fff5fd to your computer and use it in GitHub Desktop.
Save oshikiri/82200fb98ce03383cb8f06f142fff5fd to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
2019-01-04_github-punch-card.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:26.861948Z",
"start_time": "2019-01-27T13:40:26.661608Z"
}
},
"outputs": [],
"source": [
"import pandas as pd\n",
"from IPython.display import IFrame, HTML\n",
"import html"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Fetch and preprocess json"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.594409Z",
"start_time": "2019-01-27T13:40:26.863333Z"
}
},
"outputs": [
{
"data": {
"text/html": [
"<div>\n",
"<style scoped>\n",
" .dataframe tbody tr th:only-of-type {\n",
" vertical-align: middle;\n",
" }\n",
"\n",
" .dataframe tbody tr th {\n",
" vertical-align: top;\n",
" }\n",
"\n",
" .dataframe thead th {\n",
" text-align: right;\n",
" }\n",
"</style>\n",
"<table border=\"1\" class=\"dataframe\">\n",
" <thead>\n",
" <tr style=\"text-align: right;\">\n",
" <th></th>\n",
" <th>dow</th>\n",
" <th>hour</th>\n",
" <th>contributions</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th>0</th>\n",
" <td>0</td>\n",
" <td>0</td>\n",
" <td>7</td>\n",
" </tr>\n",
" <tr>\n",
" <th>1</th>\n",
" <td>0</td>\n",
" <td>1</td>\n",
" <td>0</td>\n",
" </tr>\n",
" <tr>\n",
" <th>2</th>\n",
" <td>0</td>\n",
" <td>2</td>\n",
" <td>1</td>\n",
" </tr>\n",
" <tr>\n",
" <th>3</th>\n",
" <td>0</td>\n",
" <td>3</td>\n",
" <td>0</td>\n",
" </tr>\n",
" <tr>\n",
" <th>4</th>\n",
" <td>0</td>\n",
" <td>4</td>\n",
" <td>0</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n",
"</div>"
],
"text/plain": [
" dow hour contributions\n",
"0 0 0 7\n",
"1 0 1 0\n",
"2 0 2 1\n",
"3 0 3 0\n",
"4 0 4 0"
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"user, repository = 'd3', 'd3'\n",
"\n",
"data = pd.read_json(f'https://api.github.com/repos/{user}/{repository}/stats/punch_card')\n",
"data.columns = ['dow', 'hour', 'contributions']\n",
"data.head()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Save to local"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.601637Z",
"start_time": "2019-01-27T13:40:27.596964Z"
}
},
"outputs": [],
"source": [
"data.to_json('./data/d3-contributions.json', orient='records')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## d3.js"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.717324Z",
"start_time": "2019-01-27T13:40:27.603945Z"
}
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"<!DOCTYPE html>\r\n",
"<meta charset=\"utf-8\">\r\n",
"<body>\r\n",
"<style>\r\n",
" div.tooltip {\r\n",
" position: absolute;\r\n",
" text-align: center;\r\n",
" width: 60px;\r\n",
" height: 28px;\r\n",
" padding: 2px;\r\n",
" font: 12px sans-serif;\r\n",
" background: rgb(255, 255, 255);\r\n",
" border: 0px;\r\n",
" border-radius: 8px;\r\n",
" pointer-events: none;\r\n",
" }\r\n",
"</style>\r\n",
"<script src=\"https://d3js.org/d3.v5.min.js\"></script>\r\n",
"<script>\r\n",
" const margin = {top: 20, right: 20, bottom: 50, left: 50};\r\n",
" const width = 600 - margin.left - margin.right;\r\n",
" const height = 200 - margin.top - margin.bottom;\r\n",
"\r\n",
" const xScale = d3.scaleLinear().range([0, width]);\r\n",
" const yScale = d3.scaleLinear().rangeRound([0, height]);\r\n",
" const rScale = d3.scaleSqrt().range([0, 10]);\r\n",
"\r\n",
" const dayOfWeek = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thr\", \"Fri\", \"Sat\"];\r\n",
"\r\n",
" const svg = d3.select(\"body\")\r\n",
" .append(\"svg\")\r\n",
" .attr(\"width\", width + margin.left + margin.right)\r\n",
" .attr(\"height\", height + margin.top + margin.bottom)\r\n",
" .append(\"g\")\r\n",
" .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\r\n",
" \r\n",
" const dataPromise = d3.json(\"/files/contributions.json\"); // inject:contributions\r\n",
" dataPromise.then(data => {\r\n",
" xScale.domain([-0.5, 23.5]);\r\n",
" yScale.domain([-0.5, 6.5]);\r\n",
" rScale.domain([0, d3.max(data, d => d.contributions)]);\r\n",
"\r\n",
" const div = d3.select(\"body\").append(\"div\")\r\n",
" .attr(\"class\", \"tooltip\")\r\n",
" .style(\"opacity\", 0);\r\n",
"\r\n",
" svg.selectAll(\"dot\")\r\n",
" .data(data)\r\n",
" .enter().append(\"circle\")\r\n",
" .attr(\"r\", d => rScale(d.contributions))\r\n",
" .attr(\"cx\", d => xScale(d.hour))\r\n",
" .attr(\"cy\", d => yScale(d.dow))\r\n",
" .on('mouseover', d => {\r\n",
" div.transition()\r\n",
" .duration(200)\r\n",
" .style(\"opacity\", .9);\r\n",
" div.html(`${dayOfWeek[d.dow]}, ${d.hour}<br />${d.contributions}`)\r\n",
" .style(\"left\", (d3.event.pageX) + \"px\")\r\n",
" .style(\"top\", (d3.event.pageY - 28) + \"px\");\r\n",
" })\r\n",
" .on(\"mouseout\", d => {\r\n",
" div.transition()\r\n",
" .duration(500)\r\n",
" .style(\"opacity\", 0);\r\n",
" });\r\n",
"\r\n",
" svg.append(\"g\")\r\n",
" .attr(\"transform\", `translate(0, ${height})`)\r\n",
" .call(d3.axisBottom(xScale).ticks(24));\r\n",
"\r\n",
" svg.append(\"g\")\r\n",
" .call(\r\n",
" d3.axisLeft(yScale)\r\n",
" .ticks(7)\r\n",
" .tickFormat((d, i) => dayOfWeek[d])\r\n",
" );\r\n",
"\r\n",
" svg.append(\"text\")\r\n",
" .attr(\"transform\", `translate(${width / 2}, ${(height + margin.top + 15)})`)\r\n",
" .style(\"text-anchor\", \"middle\")\r\n",
" .style(\"font-size\", \"12px\")\r\n",
" .text(\"hour\");\r\n",
"\r\n",
" svg.append(\"text\")\r\n",
" .attr(\"transform\", \"rotate(-90)\")\r\n",
" .attr(\"y\", 0 - margin.left)\r\n",
" .attr(\"x\", 0 - (height / 2))\r\n",
" .attr(\"dy\", \"1em\")\r\n",
" .style(\"text-anchor\", \"middle\")\r\n",
" .style(\"font-size\", \"12px\")\r\n",
" .text(\"day of week\"); \r\n",
" });\r\n",
"</script>\r\n",
"</body>\r\n"
]
}
],
"source": [
"!cat punchcard.html"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 単にiframeに描画"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.727939Z",
"start_time": "2019-01-27T13:40:27.720754Z"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"650\"\n",
" height=\"250\"\n",
" src=\"punchcard.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e10001518>"
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"IFrame(src=\"punchcard.html\", width=650, height=250)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### JSON を HTML に埋め込んでからiframeに描画"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.734422Z",
"start_time": "2019-01-27T13:40:27.730245Z"
}
},
"outputs": [],
"source": [
"with open('punchcard.html', mode='r') as f:\n",
" punchcard_html = ''.join(f.readlines())\n",
"\n",
"json_str = data.to_json(orient='records')\n",
"punchcard_html_injected = punchcard_html.replace(\n",
" 'const dataPromise = d3.json(\"/files/contributions.json\");',\n",
" f'const dataPromise = Promise.resolve({json_str});')"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.740967Z",
"start_time": "2019-01-27T13:40:27.736217Z"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"650\"\n",
" height=\"250\"\n",
" src=\"data:text/html;charset=utf-8,&lt;!DOCTYPE html&gt;\n",
"&lt;meta charset=&quot;utf-8&quot;&gt;\n",
"&lt;body&gt;\n",
"&lt;style&gt;\n",
" div.tooltip {\n",
" position: absolute;\n",
" text-align: center;\n",
" width: 60px;\n",
" height: 28px;\n",
" padding: 2px;\n",
" font: 12px sans-serif;\n",
" background: rgb(255, 255, 255);\n",
" border: 0px;\n",
" border-radius: 8px;\n",
" pointer-events: none;\n",
" }\n",
"&lt;/style&gt;\n",
"&lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;\n",
"&lt;script&gt;\n",
" const margin = {top: 20, right: 20, bottom: 50, left: 50};\n",
" const width = 600 - margin.left - margin.right;\n",
" const height = 200 - margin.top - margin.bottom;\n",
"\n",
" const xScale = d3.scaleLinear().range([0, width]);\n",
" const yScale = d3.scaleLinear().rangeRound([0, height]);\n",
" const rScale = d3.scaleSqrt().range([0, 10]);\n",
"\n",
" const dayOfWeek = [&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thr&quot;, &quot;Fri&quot;, &quot;Sat&quot;];\n",
"\n",
" const svg = d3.select(&quot;body&quot;)\n",
" .append(&quot;svg&quot;)\n",
" .attr(&quot;width&quot;, width + margin.left + margin.right)\n",
" .attr(&quot;height&quot;, height + margin.top + margin.bottom)\n",
" .append(&quot;g&quot;)\n",
" .attr(&quot;transform&quot;, `translate(${margin.left}, ${margin.top})`);\n",
" \n",
" const dataPromise = Promise.resolve([{&quot;dow&quot;:0,&quot;hour&quot;:0,&quot;contributions&quot;:7},{&quot;dow&quot;:0,&quot;hour&quot;:1,&quot;contributions&quot;:0},{&quot;dow&quot;:0,&quot;hour&quot;:2,&quot;contributions&quot;:1},{&quot;dow&quot;:0,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;dow&quot;:0,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;dow&quot;:0,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;dow&quot;:0,&quot;hour&quot;:6,&quot;contributions&quot;:0},{&quot;dow&quot;:0,&quot;hour&quot;:7,&quot;contributions&quot;:9},{&quot;dow&quot;:0,&quot;hour&quot;:8,&quot;contributions&quot;:7},{&quot;dow&quot;:0,&quot;hour&quot;:9,&quot;contributions&quot;:26},{&quot;dow&quot;:0,&quot;hour&quot;:10,&quot;contributions&quot;:30},{&quot;dow&quot;:0,&quot;hour&quot;:11,&quot;contributions&quot;:31},{&quot;dow&quot;:0,&quot;hour&quot;:12,&quot;contributions&quot;:19},{&quot;dow&quot;:0,&quot;hour&quot;:13,&quot;contributions&quot;:24},{&quot;dow&quot;:0,&quot;hour&quot;:14,&quot;contributions&quot;:13},{&quot;dow&quot;:0,&quot;hour&quot;:15,&quot;contributions&quot;:19},{&quot;dow&quot;:0,&quot;hour&quot;:16,&quot;contributions&quot;:22},{&quot;dow&quot;:0,&quot;hour&quot;:17,&quot;contributions&quot;:23},{&quot;dow&quot;:0,&quot;hour&quot;:18,&quot;contributions&quot;:14},{&quot;dow&quot;:0,&quot;hour&quot;:19,&quot;contributions&quot;:16},{&quot;dow&quot;:0,&quot;hour&quot;:20,&quot;contributions&quot;:19},{&quot;dow&quot;:0,&quot;hour&quot;:21,&quot;contributions&quot;:16},{&quot;dow&quot;:0,&quot;hour&quot;:22,&quot;contributions&quot;:18},{&quot;dow&quot;:0,&quot;hour&quot;:23,&quot;contributions&quot;:25},{&quot;dow&quot;:1,&quot;hour&quot;:0,&quot;contributions&quot;:6},{&quot;dow&quot;:1,&quot;hour&quot;:1,&quot;contributions&quot;:3},{&quot;dow&quot;:1,&quot;hour&quot;:2,&quot;contributions&quot;:2},{&quot;dow&quot;:1,&quot;hour&quot;:3,&quot;contributions&quot;:2},{&quot;dow&quot;:1,&quot;hour&quot;:4,&quot;contributions&quot;:6},{&quot;dow&quot;:1,&quot;hour&quot;:5,&quot;contributions&quot;:3},{&quot;dow&quot;:1,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;dow&quot;:1,&quot;hour&quot;:7,&quot;contributions&quot;:2},{&quot;dow&quot;:1,&quot;hour&quot;:8,&quot;contributions&quot;:14},{&quot;dow&quot;:1,&quot;hour&quot;:9,&quot;contributions&quot;:33},{&quot;dow&quot;:1,&quot;hour&quot;:10,&quot;contributions&quot;:27},{&quot;dow&quot;:1,&quot;hour&quot;:11,&quot;contributions&quot;:50},{&quot;dow&quot;:1,&quot;hour&quot;:12,&quot;contributions&quot;:35},{&quot;dow&quot;:1,&quot;hour&quot;:13,&quot;contributions&quot;:38},{&quot;dow&quot;:1,&quot;hour&quot;:14,&quot;contributions&quot;:32},{&quot;dow&quot;:1,&quot;hour&quot;:15,&quot;contributions&quot;:44},{&quot;dow&quot;:1,&quot;hour&quot;:16,&quot;contributions&quot;:31},{&quot;dow&quot;:1,&quot;hour&quot;:17,&quot;contributions&quot;:30},{&quot;dow&quot;:1,&quot;hour&quot;:18,&quot;contributions&quot;:19},{&quot;dow&quot;:1,&quot;hour&quot;:19,&quot;contributions&quot;:6},{&quot;dow&quot;:1,&quot;hour&quot;:20,&quot;contributions&quot;:14},{&quot;dow&quot;:1,&quot;hour&quot;:21,&quot;contributions&quot;:29},{&quot;dow&quot;:1,&quot;hour&quot;:22,&quot;contributions&quot;:20},{&quot;dow&quot;:1,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;dow&quot;:2,&quot;hour&quot;:0,&quot;contributions&quot;:13},{&quot;dow&quot;:2,&quot;hour&quot;:1,&quot;contributions&quot;:2},{&quot;dow&quot;:2,&quot;hour&quot;:2,&quot;contributions&quot;:7},{&quot;dow&quot;:2,&quot;hour&quot;:3,&quot;contributions&quot;:1},{&quot;dow&quot;:2,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;dow&quot;:2,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;dow&quot;:2,&quot;hour&quot;:6,&quot;contributions&quot;:2},{&quot;dow&quot;:2,&quot;hour&quot;:7,&quot;contributions&quot;:4},{&quot;dow&quot;:2,&quot;hour&quot;:8,&quot;contributions&quot;:31},{&quot;dow&quot;:2,&quot;hour&quot;:9,&quot;contributions&quot;:28},{&quot;dow&quot;:2,&quot;hour&quot;:10,&quot;contributions&quot;:46},{&quot;dow&quot;:2,&quot;hour&quot;:11,&quot;contributions&quot;:45},{&quot;dow&quot;:2,&quot;hour&quot;:12,&quot;contributions&quot;:33},{&quot;dow&quot;:2,&quot;hour&quot;:13,&quot;contributions&quot;:73},{&quot;dow&quot;:2,&quot;hour&quot;:14,&quot;contributions&quot;:54},{&quot;dow&quot;:2,&quot;hour&quot;:15,&quot;contributions&quot;:43},{&quot;dow&quot;:2,&quot;hour&quot;:16,&quot;contributions&quot;:49},{&quot;dow&quot;:2,&quot;hour&quot;:17,&quot;contributions&quot;:36},{&quot;dow&quot;:2,&quot;hour&quot;:18,&quot;contributions&quot;:21},{&quot;dow&quot;:2,&quot;hour&quot;:19,&quot;contributions&quot;:14},{&quot;dow&quot;:2,&quot;hour&quot;:20,&quot;contributions&quot;:13},{&quot;dow&quot;:2,&quot;hour&quot;:21,&quot;contributions&quot;:31},{&quot;dow&quot;:2,&quot;hour&quot;:22,&quot;contributions&quot;:21},{&quot;dow&quot;:2,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;dow&quot;:3,&quot;hour&quot;:0,&quot;contributions&quot;:11},{&quot;dow&quot;:3,&quot;hour&quot;:1,&quot;contributions&quot;:5},{&quot;dow&quot;:3,&quot;hour&quot;:2,&quot;contributions&quot;:5},{&quot;dow&quot;:3,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;dow&quot;:3,&quot;hour&quot;:4,&quot;contributions&quot;:1},{&quot;dow&quot;:3,&quot;hour&quot;:5,&quot;contributions&quot;:1},{&quot;dow&quot;:3,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;dow&quot;:3,&quot;hour&quot;:7,&quot;contributions&quot;:6},{&quot;dow&quot;:3,&quot;hour&quot;:8,&quot;contributions&quot;:22},{&quot;dow&quot;:3,&quot;hour&quot;:9,&quot;contributions&quot;:47},{&quot;dow&quot;:3,&quot;hour&quot;:10,&quot;contributions&quot;:80},{&quot;dow&quot;:3,&quot;hour&quot;:11,&quot;contributions&quot;:86},{&quot;dow&quot;:3,&quot;hour&quot;:12,&quot;contributions&quot;:55},{&quot;dow&quot;:3,&quot;hour&quot;:13,&quot;contributions&quot;:36},{&quot;dow&quot;:3,&quot;hour&quot;:14,&quot;contributions&quot;:42},{&quot;dow&quot;:3,&quot;hour&quot;:15,&quot;contributions&quot;:54},{&quot;dow&quot;:3,&quot;hour&quot;:16,&quot;contributions&quot;:40},{&quot;dow&quot;:3,&quot;hour&quot;:17,&quot;contributions&quot;:40},{&quot;dow&quot;:3,&quot;hour&quot;:18,&quot;contributions&quot;:33},{&quot;dow&quot;:3,&quot;hour&quot;:19,&quot;contributions&quot;:18},{&quot;dow&quot;:3,&quot;hour&quot;:20,&quot;contributions&quot;:28},{&quot;dow&quot;:3,&quot;hour&quot;:21,&quot;contributions&quot;:32},{&quot;dow&quot;:3,&quot;hour&quot;:22,&quot;contributions&quot;:29},{&quot;dow&quot;:3,&quot;hour&quot;:23,&quot;contributions&quot;:24},{&quot;dow&quot;:4,&quot;hour&quot;:0,&quot;contributions&quot;:16},{&quot;dow&quot;:4,&quot;hour&quot;:1,&quot;contributions&quot;:0},{&quot;dow&quot;:4,&quot;hour&quot;:2,&quot;contributions&quot;:1},{&quot;dow&quot;:4,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;dow&quot;:4,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;dow&quot;:4,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;dow&quot;:4,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;dow&quot;:4,&quot;hour&quot;:7,&quot;contributions&quot;:5},{&quot;dow&quot;:4,&quot;hour&quot;:8,&quot;contributions&quot;:19},{&quot;dow&quot;:4,&quot;hour&quot;:9,&quot;contributions&quot;:53},{&quot;dow&quot;:4,&quot;hour&quot;:10,&quot;contributions&quot;:52},{&quot;dow&quot;:4,&quot;hour&quot;:11,&quot;contributions&quot;:34},{&quot;dow&quot;:4,&quot;hour&quot;:12,&quot;contributions&quot;:39},{&quot;dow&quot;:4,&quot;hour&quot;:13,&quot;contributions&quot;:28},{&quot;dow&quot;:4,&quot;hour&quot;:14,&quot;contributions&quot;:43},{&quot;dow&quot;:4,&quot;hour&quot;:15,&quot;contributions&quot;:64},{&quot;dow&quot;:4,&quot;hour&quot;:16,&quot;contributions&quot;:34},{&quot;dow&quot;:4,&quot;hour&quot;:17,&quot;contributions&quot;:50},{&quot;dow&quot;:4,&quot;hour&quot;:18,&quot;contributions&quot;:11},{&quot;dow&quot;:4,&quot;hour&quot;:19,&quot;contributions&quot;:19},{&quot;dow&quot;:4,&quot;hour&quot;:20,&quot;contributions&quot;:18},{&quot;dow&quot;:4,&quot;hour&quot;:21,&quot;contributions&quot;:18},{&quot;dow&quot;:4,&quot;hour&quot;:22,&quot;contributions&quot;:25},{&quot;dow&quot;:4,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;dow&quot;:5,&quot;hour&quot;:0,&quot;contributions&quot;:9},{&quot;dow&quot;:5,&quot;hour&quot;:1,&quot;contributions&quot;:2},{&quot;dow&quot;:5,&quot;hour&quot;:2,&quot;contributions&quot;:0},{&quot;dow&quot;:5,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;dow&quot;:5,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;dow&quot;:5,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;dow&quot;:5,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;dow&quot;:5,&quot;hour&quot;:7,&quot;contributions&quot;:2},{&quot;dow&quot;:5,&quot;hour&quot;:8,&quot;contributions&quot;:14},{&quot;dow&quot;:5,&quot;hour&quot;:9,&quot;contributions&quot;:35},{&quot;dow&quot;:5,&quot;hour&quot;:10,&quot;contributions&quot;:53},{&quot;dow&quot;:5,&quot;hour&quot;:11,&quot;contributions&quot;:27},{&quot;dow&quot;:5,&quot;hour&quot;:12,&quot;contributions&quot;:27},{&quot;dow&quot;:5,&quot;hour&quot;:13,&quot;contributions&quot;:18},{&quot;dow&quot;:5,&quot;hour&quot;:14,&quot;contributions&quot;:45},{&quot;dow&quot;:5,&quot;hour&quot;:15,&quot;contributions&quot;:35},{&quot;dow&quot;:5,&quot;hour&quot;:16,&quot;contributions&quot;:42},{&quot;dow&quot;:5,&quot;hour&quot;:17,&quot;contributions&quot;:24},{&quot;dow&quot;:5,&quot;hour&quot;:18,&quot;contributions&quot;:23},{&quot;dow&quot;:5,&quot;hour&quot;:19,&quot;contributions&quot;:15},{&quot;dow&quot;:5,&quot;hour&quot;:20,&quot;contributions&quot;:19},{&quot;dow&quot;:5,&quot;hour&quot;:21,&quot;contributions&quot;:21},{&quot;dow&quot;:5,&quot;hour&quot;:22,&quot;contributions&quot;:22},{&quot;dow&quot;:5,&quot;hour&quot;:23,&quot;contributions&quot;:13},{&quot;dow&quot;:6,&quot;hour&quot;:0,&quot;contributions&quot;:24},{&quot;dow&quot;:6,&quot;hour&quot;:1,&quot;contributions&quot;:6},{&quot;dow&quot;:6,&quot;hour&quot;:2,&quot;contributions&quot;:0},{&quot;dow&quot;:6,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;dow&quot;:6,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;dow&quot;:6,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;dow&quot;:6,&quot;hour&quot;:6,&quot;contributions&quot;:0},{&quot;dow&quot;:6,&quot;hour&quot;:7,&quot;contributions&quot;:1},{&quot;dow&quot;:6,&quot;hour&quot;:8,&quot;contributions&quot;:10},{&quot;dow&quot;:6,&quot;hour&quot;:9,&quot;contributions&quot;:36},{&quot;dow&quot;:6,&quot;hour&quot;:10,&quot;contributions&quot;:30},{&quot;dow&quot;:6,&quot;hour&quot;:11,&quot;contributions&quot;:29},{&quot;dow&quot;:6,&quot;hour&quot;:12,&quot;contributions&quot;:34},{&quot;dow&quot;:6,&quot;hour&quot;:13,&quot;contributions&quot;:31},{&quot;dow&quot;:6,&quot;hour&quot;:14,&quot;contributions&quot;:30},{&quot;dow&quot;:6,&quot;hour&quot;:15,&quot;contributions&quot;:27},{&quot;dow&quot;:6,&quot;hour&quot;:16,&quot;contributions&quot;:19},{&quot;dow&quot;:6,&quot;hour&quot;:17,&quot;contributions&quot;:18},{&quot;dow&quot;:6,&quot;hour&quot;:18,&quot;contributions&quot;:23},{&quot;dow&quot;:6,&quot;hour&quot;:19,&quot;contributions&quot;:7},{&quot;dow&quot;:6,&quot;hour&quot;:20,&quot;contributions&quot;:17},{&quot;dow&quot;:6,&quot;hour&quot;:21,&quot;contributions&quot;:19},{&quot;dow&quot;:6,&quot;hour&quot;:22,&quot;contributions&quot;:17},{&quot;dow&quot;:6,&quot;hour&quot;:23,&quot;contributions&quot;:13}]); // inject:contributions\n",
" dataPromise.then(data =&gt; {\n",
" xScale.domain([-0.5, 23.5]);\n",
" yScale.domain([-0.5, 6.5]);\n",
" rScale.domain([0, d3.max(data, d =&gt; d.contributions)]);\n",
"\n",
" const div = d3.select(&quot;body&quot;).append(&quot;div&quot;)\n",
" .attr(&quot;class&quot;, &quot;tooltip&quot;)\n",
" .style(&quot;opacity&quot;, 0);\n",
"\n",
" svg.selectAll(&quot;dot&quot;)\n",
" .data(data)\n",
" .enter().append(&quot;circle&quot;)\n",
" .attr(&quot;r&quot;, d =&gt; rScale(d.contributions))\n",
" .attr(&quot;cx&quot;, d =&gt; xScale(d.hour))\n",
" .attr(&quot;cy&quot;, d =&gt; yScale(d.dow))\n",
" .on(&#x27;mouseover&#x27;, d =&gt; {\n",
" div.transition()\n",
" .duration(200)\n",
" .style(&quot;opacity&quot;, .9);\n",
" div.html(`${dayOfWeek[d.dow]}, ${d.hour}&lt;br /&gt;${d.contributions}`)\n",
" .style(&quot;left&quot;, (d3.event.pageX) + &quot;px&quot;)\n",
" .style(&quot;top&quot;, (d3.event.pageY - 28) + &quot;px&quot;);\n",
" })\n",
" .on(&quot;mouseout&quot;, d =&gt; {\n",
" div.transition()\n",
" .duration(500)\n",
" .style(&quot;opacity&quot;, 0);\n",
" });\n",
"\n",
" svg.append(&quot;g&quot;)\n",
" .attr(&quot;transform&quot;, `translate(0, ${height})`)\n",
" .call(d3.axisBottom(xScale).ticks(24));\n",
"\n",
" svg.append(&quot;g&quot;)\n",
" .call(\n",
" d3.axisLeft(yScale)\n",
" .ticks(7)\n",
" .tickFormat((d, i) =&gt; dayOfWeek[d])\n",
" );\n",
"\n",
" svg.append(&quot;text&quot;)\n",
" .attr(&quot;transform&quot;, `translate(${width / 2}, ${(height + margin.top + 15)})`)\n",
" .style(&quot;text-anchor&quot;, &quot;middle&quot;)\n",
" .style(&quot;font-size&quot;, &quot;12px&quot;)\n",
" .text(&quot;hour&quot;);\n",
"\n",
" svg.append(&quot;text&quot;)\n",
" .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)\n",
" .attr(&quot;y&quot;, 0 - margin.left)\n",
" .attr(&quot;x&quot;, 0 - (height / 2))\n",
" .attr(&quot;dy&quot;, &quot;1em&quot;)\n",
" .style(&quot;text-anchor&quot;, &quot;middle&quot;)\n",
" .style(&quot;font-size&quot;, &quot;12px&quot;)\n",
" .text(&quot;day of week&quot;); \n",
" });\n",
"&lt;/script&gt;\n",
"&lt;/body&gt;\n",
"\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e44258438>"
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"IFrame(f'data:text/html;charset=utf-8,{html.escape(punchcard_html_injected)}', width=650, height=250)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## vega-lite"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### JSON を HTML に埋め込んでからiframeに描画"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.749655Z",
"start_time": "2019-01-27T13:40:27.742630Z"
}
},
"outputs": [],
"source": [
"dow = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thr\", \"Fri\", \"Sat\"]\n",
"json_str = (\n",
" data\n",
" .assign(dow = lambda d: d.dow.map(lambda i: dow[i]))\n",
" .rename(columns={'dow': 'day of week'})\n",
" .to_json(orient='records')\n",
")\n",
"\n",
"with open('2019-01-08_try_js_vis_tools/vega-lite/index.html', mode='r') as f:\n",
" vegalite_html = ''.join(f.readlines())"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.752770Z",
"start_time": "2019-01-27T13:40:27.750848Z"
}
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"<!DOCTYPE html>\n",
"<head>\n",
" <title>Vega Lite Bar Chart</title>\n",
" <meta charset=\"utf-8\">\n",
"\n",
" <script src=\"https://cdn.jsdelivr.net/npm/vega@4.3.0/build/vega.js\"></script>\n",
" <script src=\"https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10/build/vega-lite.js\"></script>\n",
" <script src=\"https://cdn.jsdelivr.net/npm/vega-embed@3.24.1/build/vega-embed.js\"></script>\n",
"\n",
"</head>\n",
"<body>\n",
" <!-- Container for the visualization -->\n",
" <div id=\"vis\"></div>\n",
"\n",
" <script>\n",
" // Assign the specification to a local variable vlSpec.\n",
" var vlSpec = {\n",
" \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.json\",\n",
" \"data\": { \"url\": \"../../data/d3-contributions.json\"},\n",
" \"mark\": { \"type\": \"circle\", \"color\": \"black\" },\n",
"\n",
" \"encoding\": {\n",
" \"y\": {\n",
" \"field\": \"day of week\",\n",
" \"type\": \"nominal\",\n",
" \"sort\": [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thr\", \"Fri\", \"Sat\"]\n",
" },\n",
" \"x\": {\n",
" \"field\": \"hour\",\n",
" \"type\": \"nominal\"\n",
" },\n",
" \"size\": {\n",
" \"field\": \"contributions\",\n",
" \"type\": \"quantitative\",\n",
" \"aggregate\": \"sum\"\n",
" }\n",
" }\n",
" };\n",
"\n",
" // Embed the visualization in the container with id `vis`\n",
" vegaEmbed(\"#vis\", vlSpec, {actions: false});\n",
" </script>\n",
"</body>\n",
"</html>\n",
"\n"
]
}
],
"source": [
"print(vegalite_html)"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-27T13:40:27.758624Z",
"start_time": "2019-01-27T13:40:27.754982Z"
}
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"700\"\n",
" height=\"220\"\n",
" src=\"data:text/html;charset=utf-8,&lt;!DOCTYPE html&gt;\n",
"&lt;head&gt;\n",
" &lt;title&gt;Vega Lite Bar Chart&lt;/title&gt;\n",
" &lt;meta charset=&quot;utf-8&quot;&gt;\n",
"\n",
" &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega@4.3.0/build/vega.js&quot;&gt;&lt;/script&gt;\n",
" &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc10/build/vega-lite.js&quot;&gt;&lt;/script&gt;\n",
" &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@3.24.1/build/vega-embed.js&quot;&gt;&lt;/script&gt;\n",
"\n",
"&lt;/head&gt;\n",
"&lt;body&gt;\n",
" &lt;!-- Container for the visualization --&gt;\n",
" &lt;div id=&quot;vis&quot;&gt;&lt;/div&gt;\n",
"\n",
" &lt;script&gt;\n",
" // Assign the specification to a local variable vlSpec.\n",
" var vlSpec = {\n",
" &quot;$schema&quot;: &quot;https://vega.github.io/schema/vega-lite/v3.json&quot;,\n",
" &quot;data&quot;: { &quot;values&quot;: [{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:7},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:9},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:7},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:26},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:30},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:31},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:24},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:13},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:22},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:23},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:14},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:16},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:16},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Sun&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:25},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:6},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:3},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:6},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:3},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:14},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:33},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:27},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:50},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:35},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:38},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:32},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:44},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:31},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:30},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:6},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:14},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:29},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:20},{&quot;day of week&quot;:&quot;Mon&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:13},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:7},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:4},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:31},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:28},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:46},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:45},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:33},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:73},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:54},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:43},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:49},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:36},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:21},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:14},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:13},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:31},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:21},{&quot;day of week&quot;:&quot;Tue&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:11},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:5},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:5},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:6},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:22},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:47},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:80},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:86},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:55},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:36},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:42},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:54},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:40},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:40},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:33},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:28},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:32},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:29},{&quot;day of week&quot;:&quot;Wed&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:24},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:16},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:5},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:53},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:52},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:34},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:39},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:28},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:43},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:64},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:34},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:50},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:11},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:25},{&quot;day of week&quot;:&quot;Thr&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:9},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:2},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:14},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:35},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:53},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:27},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:27},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:45},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:35},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:42},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:24},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:23},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:15},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:21},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:22},{&quot;day of week&quot;:&quot;Fri&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:13},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:0,&quot;contributions&quot;:24},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:1,&quot;contributions&quot;:6},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:2,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:3,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:4,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:5,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:6,&quot;contributions&quot;:0},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:7,&quot;contributions&quot;:1},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:8,&quot;contributions&quot;:10},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:9,&quot;contributions&quot;:36},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:10,&quot;contributions&quot;:30},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:11,&quot;contributions&quot;:29},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:12,&quot;contributions&quot;:34},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:13,&quot;contributions&quot;:31},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:14,&quot;contributions&quot;:30},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:15,&quot;contributions&quot;:27},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:16,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:17,&quot;contributions&quot;:18},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:18,&quot;contributions&quot;:23},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:19,&quot;contributions&quot;:7},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:20,&quot;contributions&quot;:17},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:21,&quot;contributions&quot;:19},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:22,&quot;contributions&quot;:17},{&quot;day of week&quot;:&quot;Sat&quot;,&quot;hour&quot;:23,&quot;contributions&quot;:13}]},\n",
" &quot;mark&quot;: { &quot;type&quot;: &quot;circle&quot;, &quot;color&quot;: &quot;black&quot; },\n",
"\n",
" &quot;encoding&quot;: {\n",
" &quot;y&quot;: {\n",
" &quot;field&quot;: &quot;day of week&quot;,\n",
" &quot;type&quot;: &quot;nominal&quot;,\n",
" &quot;sort&quot;: [&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thr&quot;, &quot;Fri&quot;, &quot;Sat&quot;]\n",
" },\n",
" &quot;x&quot;: {\n",
" &quot;field&quot;: &quot;hour&quot;,\n",
" &quot;type&quot;: &quot;nominal&quot;\n",
" },\n",
" &quot;size&quot;: {\n",
" &quot;field&quot;: &quot;contributions&quot;,\n",
" &quot;type&quot;: &quot;quantitative&quot;,\n",
" &quot;aggregate&quot;: &quot;sum&quot;\n",
" }\n",
" }\n",
" };\n",
"\n",
" // Embed the visualization in the container with id `vis`\n",
" vegaEmbed(&quot;#vis&quot;, vlSpec, {actions: false});\n",
" &lt;/script&gt;\n",
"&lt;/body&gt;\n",
"&lt;/html&gt;\n",
"\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f0e0f5a6780>"
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"vegalite_html_injected = vegalite_html.replace(\n",
" '{ \"url\": \"../../data/d3-contributions.json\"}',\n",
" '{ \"values\": ' + json_str + '}')\n",
"IFrame(f'data:text/html;charset=utf-8,{html.escape(vegalite_html_injected)}', width=700, height=220)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"ExecuteTime": {
"end_time": "2019-01-10T11:31:43.977399Z",
"start_time": "2019-01-10T11:31:43.967836Z"
}
},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.6"
},
"toc": {
"nav_menu": {},
"number_sections": true,
"sideBar": true,
"skip_h1_title": false,
"toc_cell": false,
"toc_position": {},
"toc_section_display": "block",
"toc_window_display": true
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment