Andrew Challis - Data Science/Viz

Intro

I decided to have a little fiddle around with Wordpress by making some custom PHP and CSS for the first time. The outcome is a neat little shortcode plugin for Wordpress that uses Jupyter Nbviewer to create your ipynb and add it to your blog. My next step is to get this onto the Wordpress Plugins so that its properly documented, versioned and available for use by the Wordpress community.

Shortcode’s +/-’s

Very easy to use
Your code can be version controlled and updated without having to log into your blog and edit the raw HTML
Other people can work on the code, for example contributors to your GitHub page
Very easy to create a easy to navigate Documentation page by using Wordpress and nbconvert
No iframes! Which many people have suggested...

Other people can change the notebooks (It's a blessing and a curse!)
Dependant on nbviewer's servers (However if you wish the code is open source so you can host your own server!)
Could potentially be slower to render as each time a user requests your page it will have to send requests to nbviewer.
CSS that is included in the Notebook can overwrite the blog pages CSS (try using this URL https://github.com/plotly/python-user-guide/blob/master/s3_bubble-charts/s3_bubble-charts.ipynb)

How to use the shortcode

Step 1: Add my custom CSS (view by clicking on the button below) into Appearance -> Customize -> Additonal CSS Step 2: In the the Wordpress post editor simply enter the shortcode with the url to where the ipynb file is hosted. For example see Example 1 where we render a notebook that is stored on Folium's GitHub page.

  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


************** Jupyter Notebook CSS ************************/
div .dataframe {
  border:none;
  margin: 0 auto;
}
div.output_stdout pre {
  max-height:300px;
}

div.output_stderr pre
{
  background: #fdd;
  margin:0;
  max-height:300px;
}
div.hl-ipython3 pre {
  margin:0
}
.dataframe thead tr:only-child th {
  text-align: right;
  text-transform: capitalize;
}
.dataframe thead th {
  text-align: left;
}
.dataframe tbody tr th {
  vertical-align: top;
}

.rendered_html tbody tr:nth-child(odd),
.rendered_html tbody tr:nth-child(odd) td {
  background: #f5f5f5;
}
.rendered_html tr, .rendered_html th, .rendered_html td {
  text-align: right;
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}
div.highlight .kn, .n, .k, .nn, .s1, .ow, .p, .mi, .c, .mf, .nb, .kc, .sd, .nf {
  font-family: monospace;
  font-size:14px;
}
.input_prompt {
  color: #303F9F;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  margin-top: 3px;
}
.input_area pre {
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #f7f7f7;
  line-height: 1.21429em;
  padding: 6px 3px 6px 6px;
}
.output_prompt{
  color:#cc0000;
  font-weight: bold;
}
.prompt{
  font-family: monospace;
  font-size: 14px;
}
.c, c1 {
  color: #408080;
  font-style: italic;
}
.k {
  color: #338822;
  font-weight: bold;
}
.kn {
  color: #338822;
  font-weight: bold;
}
.mi {
  color: #008800;
}
.mf {
  color: #008800;
}
.o {
  color: #9966ff;
}
.ow {
  color: #BA22FF;
  font-weight: bold;
}
.nb {
  color: #338822;
}
.n {
  color: #000000;
}
.s, .s1, .sd, .s2 {
  color: #cc2222;
}
.se {
  color: #cc2222;
  font-weight: bold;
}
.si {
  color: #C06688;
  font-weight: bold;
}
.nn {
  color: #4D00FF;
  font-weight: bold;
}
.output_area pre {
  background-color: #FFFFFF;
  padding-left: 5%;
}
.code_cell {
  padding-left: 1%;
}
.cell {
  margin-top: 10px;
  margin-bottom: 10px;
}
br {
  line-height: 2;
}
blockquote {
  font-size: 1em;
  text-align: left;
  font-weight: normal;
}
code {
  border: none;
  box-shadow: none;
  font-family: monospace;
}
div.rendered_html h1, h2, h3, h4 {
  margin-top: 30px;
  margin-bottom: 10px;
}
div.rendered_html p a {
  color: #4D00FF;
}

Example 1

1

[nbconvert url="https://github.com/python-visualization/folium/blob/master/examples/CheckZorder.ipynb"]

Example 2

Heres another example, the shortcode in this case being:

1

[nbconvert url="https://github.com/python-visualization/folium/blob/master/examples/plugin-Draw.ipynb"]

Andy Challis