Humdrum lab 6 - Revision history

Craig: /* Other data plotting systems */

2018-06-30T01:16:43Z

Other data plotting systems

← Older revision		Revision as of 01:16, 30 June 2018
Line 245:		Line 245:
	* D3 https://d3js.org		* D3 https://d3js.org
	* Example barchart using D3: https://bl.ocks.org/mbostock/3885304		* Example barchart using D3: https://bl.ocks.org/mbostock/3885304



			{{humdrum_labs}}

Craig: /* Further reading for jupyterlabs and pandas */

2018-05-04T06:17:57Z

Further reading for jupyterlabs and pandas

← Older revision		Revision as of 06:17, 4 May 2018
Line 227:		Line 227:

	=== Further reading for jupyterlabs and pandas ===		=== Further reading for jupyterlabs and pandas ===

			* https://notebooks.azure.com/versae/libraries/cidr-data-visualization/html/data_visualization_filled.ipynb This jupyter notebook covers more plotting possibilities with pandas, such as histograms and other python libraries such as seaborn.

	* http://songhuiming.github.io/pages/2017/04/02/jupyter-and-pandas-display		* http://songhuiming.github.io/pages/2017/04/02/jupyter-and-pandas-display

Craig: /* Datawrapper */

2018-05-02T00:09:49Z

Datawrapper

← Older revision		Revision as of 00:09, 2 May 2018
Line 98:		Line 98:
	<iframe id="datawrapper-chart-BjMlq" src="//datawrapper.dwcdn.net/BjMlq/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="500"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["BjMlq"]={},window.datawrapper["BjMlq"].embedDeltas={"100":625,"200":550,"300":525,"400":525,"500":500,"700":500,"800":500,"900":500,"1000":500},window.datawrapper["BjMlq"].iframe=document.getElementById("datawrapper-chart-BjMlq"),window.datawrapper["BjMlq"].iframe.style.height=window.datawrapper["BjMlq"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["BjMlq"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("BjMlq"==b)window.datawrapper["BjMlq"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>		<iframe id="datawrapper-chart-BjMlq" src="//datawrapper.dwcdn.net/BjMlq/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="500"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["BjMlq"]={},window.datawrapper["BjMlq"].embedDeltas={"100":625,"200":550,"300":525,"400":525,"500":500,"700":500,"800":500,"900":500,"1000":500},window.datawrapper["BjMlq"].iframe=document.getElementById("datawrapper-chart-BjMlq"),window.datawrapper["BjMlq"].iframe.style.height=window.datawrapper["BjMlq"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["BjMlq"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("BjMlq"==b)window.datawrapper["BjMlq"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
	</html>		</html>

			This variant adds social-media buttons for telling everyone about your latest and greatest data plots.

	== Plotting with Gnuplot ==		== Plotting with Gnuplot ==

Craig: /* Plotting with Gnuplot */

2018-05-02T00:03:23Z

Plotting with Gnuplot

← Older revision		Revision as of 00:03, 2 May 2018
Line 137:		Line 137:
	[[File:gnuplot-barchart.png\|center\|500px]]		[[File:gnuplot-barchart.png\|center\|500px]]


			Gnuplot can be compiled with emscripten to be used directly inside of a webpage (without a server backend):
			* https://github.com/chhu/gnuplot-JS

	== Jupyter/pandas/matplotlib ==		== Jupyter/pandas/matplotlib ==

Craig: /* R markdown notebooks */

2018-05-01T23:55:21Z

R markdown notebooks

← Older revision		Revision as of 23:55, 1 May 2018
Line 230:		Line 230:


	== Other data plotting systems		== Other data plotting systems ==

	* Bokeh https://bokeh.pydata.org This is a python visualization library		* Bokeh https://bokeh.pydata.org This is a python visualization library

Craig: /* R markdown notebooks */

2018-05-01T23:55:12Z

R markdown notebooks

← Older revision		Revision as of 23:55, 1 May 2018
Line 228:		Line 228:

	The [https://www.r-project.org/ R langauge] is another useful language for statistical analysis and plotting of data. This is not covered in the lab, but checkout the website: https://rmarkdown.rstudio.com/r_notebooks.html		The [https://www.r-project.org/ R langauge] is another useful language for statistical analysis and plotting of data. This is not covered in the lab, but checkout the website: https://rmarkdown.rstudio.com/r_notebooks.html


			== Other data plotting systems

			* Bokeh https://bokeh.pydata.org This is a python visualization library
			* Seaborn tps://seaborn.pydata.org Another python visualization library

			For creating your own interactive plots on the web in Javascript:
			* D3 https://d3js.org
			* Example barchart using D3: https://bl.ocks.org/mbostock/3885304

Craig: /* Datawrapper */

2018-05-01T23:49:59Z

Datawrapper

← Older revision		Revision as of 23:49, 1 May 2018
Line 96:		Line 96:

	<html>		<html>
	<iframe id="datawrapper-chart-~~vhkHL~~" src="//datawrapper.dwcdn.net/~~vhkHL~~/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="~~548~~"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["~~vhkHL~~"]={},window.datawrapper["~~vhkHL~~"].embedDeltas={"100":~~648~~,"200":~~573~~,"300":~~573~~,"400":~~548~~,"500":~~548~~,"700":~~548~~,"800":~~548~~,"900":~~548~~,"1000":~~548~~},window.datawrapper["~~vhkHL~~"].iframe=document.getElementById("datawrapper-chart-~~vhkHL~~"),window.datawrapper["~~vhkHL~~"].iframe.style.height=window.datawrapper["~~vhkHL~~"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["~~vhkHL~~"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("~~vhkHL~~"==b)window.datawrapper["~~vhkHL~~"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>		<iframe id="datawrapper-chart-BjMlq" src="//datawrapper.dwcdn.net/BjMlq/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="500"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["BjMlq"]={},window.datawrapper["BjMlq"].embedDeltas={"100":625,"200":550,"300":525,"400":525,"500":500,"700":500,"800":500,"900":500,"1000":500},window.datawrapper["BjMlq"].iframe=document.getElementById("datawrapper-chart-BjMlq"),window.datawrapper["BjMlq"].iframe.style.height=window.datawrapper["BjMlq"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["BjMlq"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("BjMlq"==b)window.datawrapper["BjMlq"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
	</html>		</html>

Craig: /* Datawrapper */

2018-05-01T23:45:31Z

Datawrapper

← Older revision		Revision as of 23:45, 1 May 2018
Line 92:		Line 92:
	for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]		for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]
	.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>		.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>

			Here is another variation:

			<html>
			<iframe id="datawrapper-chart-vhkHL" src="//datawrapper.dwcdn.net/vhkHL/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="548"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["vhkHL"]={},window.datawrapper["vhkHL"].embedDeltas={"100":648,"200":573,"300":573,"400":548,"500":548,"700":548,"800":548,"900":548,"1000":548},window.datawrapper["vhkHL"].iframe=document.getElementById("datawrapper-chart-vhkHL"),window.datawrapper["vhkHL"].iframe.style.height=window.datawrapper["vhkHL"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["vhkHL"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
			</html>

	== Plotting with Gnuplot ==		== Plotting with Gnuplot ==

Craig: /* Datawrapper */

2018-05-01T23:37:49Z

Datawrapper

← Older revision		Revision as of 23:37, 1 May 2018
Line 76:		Line 76:
	</html>		</html>

	Try clicking on the "Get the data" link on the chart.		Try clicking on the "Get the data" link on the chart. This will download a CSV version of the data (the input was in TSV format).

	The above chart was created with this code copied from the datawrapper website:		The above chart was created with this code copied from the datawrapper website:
Line 92:		Line 92:
	for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]		for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]
	.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>		.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>




	== Plotting with Gnuplot ==		== Plotting with Gnuplot ==

Craig at 23:36, 1 May 2018

2018-05-01T23:36:22Z

← Older revision		Revision as of 23:36, 1 May 2018
Line 62:		Line 62:

	[[File:excel-bar-chart-jupyter.png\|center\|300px]]		[[File:excel-bar-chart-jupyter.png\|center\|300px]]


			== Datawrapper ==

			Even easier than using a spreadsheet, try the datawrapper website to generate the same histogram:

			https://www.datawrapper.de

			This site "publishes" your plot and allows access to the underlying data.

			<html>
			<iframe id="datawrapper-chart-vhkHL" src="//datawrapper.dwcdn.net/vhkHL/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="548"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["vhkHL"]={},window.datawrapper["vhkHL"].embedDeltas={"100":648,"200":573,"300":573,"400":548,"500":548,"700":548,"800":548,"900":548,"1000":548},window.datawrapper["vhkHL"].iframe=document.getElementById("datawrapper-chart-vhkHL"),window.datawrapper["vhkHL"].iframe.style.height=window.datawrapper["vhkHL"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["vhkHL"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
			</html>

			Try clicking on the "Get the data" link on the chart.

			The above chart was created with this code copied from the datawrapper website:

			<iframe id="datawrapper-chart-vhkHL" src="//datawrapper.dwcdn.net/vhkHL/1/" scrolling="no"
			frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="548">
			</iframe>
			<script type="text/javascript">
			if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["vhkHL"]={},window.datawrapper["vhkHL"].embedDeltas=
			{"100":648,"200":573,"300":573,"400":548,"500":548,"700":548,"800":548,"900":548,"1000":548},
			window.datawrapper["vhkHL"].iframe=document.getElementById("datawrapper-chart-vhkHL"),window.datawrapper["vhkHL"]
			.iframe.style.height=window.datawrapper["vhkHL"]
			.embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["vhkHL"].iframe.offsetWidth/100),100))]+
			"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])
			for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]
			.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>




Line 193:		Line 225:

	The [https://www.r-project.org/ R langauge] is another useful language for statistical analysis and plotting of data. This is not covered in the lab, but checkout the website: https://rmarkdown.rstudio.com/r_notebooks.html		The [https://www.r-project.org/ R langauge] is another useful language for statistical analysis and plotting of data. This is not covered in the lab, but checkout the website: https://rmarkdown.rstudio.com/r_notebooks.html


	~~== Datawrapper ==~~

	~~Even easier than using a spreadsheet, try the datawrapper website to generate the same histogram:~~

	~~https://www.datawrapper.de~~

	~~This site "publishes" your plot and allows access to the underlying data.~~

	~~<html>~~
	<iframe id="datawrapper-chart-vhkHL" src="//datawrapper.dwcdn.net/vhkHL/1/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="548"></iframe><script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["vhkHL"]={},window.datawrapper["vhkHL"].embedDeltas={"100":648,"200":573,"300":573,"400":548,"500":548,"700":548,"800":548,"900":548,"1000":548},window.datawrapper["vhkHL"].iframe=document.getElementById("datawrapper-chart-vhkHL"),window.datawrapper["vhkHL"].iframe.style.height=window.datawrapper["vhkHL"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["vhkHL"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>
	~~</html>~~

	~~Try clicking on the "Get the data" link on the chart.~~

	~~The above chart was created with this code copied from the datawrapper website:~~

	~~<iframe id="datawrapper-chart-vhkHL" src="//datawrapper.dwcdn.net/vhkHL/1/" scrolling="no"~~
	~~frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="548">~~
	~~</iframe>~~
	~~<script type="text/javascript">~~
	~~if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["vhkHL"]={},window.datawrapper["vhkHL"].embedDeltas=~~
	~~{"100":648,"200":573,"300":573,"400":548,"500":548,"700":548,"800":548,"900":548,"1000":548},~~
	~~window.datawrapper["vhkHL"].iframe=document.getElementById("datawrapper-chart-vhkHL"),window.datawrapper["vhkHL"]~~
	~~.iframe.style.height=window.datawrapper["vhkHL"]~~
	~~.embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["vhkHL"].iframe.offsetWidth/100),100))]+~~
	~~"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])~~
	~~for(var b in a.data["datawrapper-height"])if("vhkHL"==b)window.datawrapper["vhkHL"]~~
	~~.iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script>~~