hamilton/dogfood.html

## dogfood.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dogfood - iodide</title>
<link rel="stylesheet" type="text/css" href="http://localhost:5000/dev/iodide.dev.css">
</head>
<body>
<script id="jsmd" type="text/jsmd">
%% meta
{
  "title": "dogfood",
  "lastSaved": "2018-07-24T23:27:11.772Z",
  "lastExport": "2018-07-24T23:57:07.584Z"
}

%% resource
https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.js
https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.css

%% js
var data
iodide.evalQueue.await([fetch('https://raw.githubusercontent.com/fivethirtyeight/data/master/us-weather-history/KNYC.csv')
	.then(d=>d.text()).then(d=>d3.csvParse(d)).then(d=>{data=d;d})
])

%% js
var time = d3.timeFormat('%Y-%m-%d')
var temps = data.map(d=>{
  d.date = d.date.split("-")
  d.date[0] = parseInt(d.date[0])
  d.date[1] = parseInt(d.date[1])
  d.date[2] = parseInt(d.date[2])
  d.date = new Date(d.date[0], d.date[1], d.date[2])
  d.actual_mean_temp = parseInt(d.actual_mean_temp)
  return d
})
temps

%% raw
Presentational code

%% md
# Dogfood!

This is an attempt to dogfood The `iframe-2` branch, noting the pieces that I think are good / bad about it.

I will write a bit of introductory text, and then do some dom manipulation, and then draw some graphs.

## Temperatures

I am not familiar with this data set, but it is as good as any to test things out. These mean temperatures in NYC seem low.

%% js
// create a target div.
var div = iodide.output.element('div', false)
MG.data_graphic({
  target: div,
  data: temps,
  x_accessor: 'date',
  y_accessor: 'actual_mean_temp',
  title: 'actual mean temperatures in NYC',
  area: false,
  width: 500
})
div

%% css
body {
  background-color: rgba(200,200,190,1);
  box-shadow: inset 0px 0px 100px rgba(0,0,0,.4);
  color: white !important;
  font-weight: 300;
}

div.cell-container.evaluated {
  background-color: transparent;
  outline: none;
}

.user-markdown {
  color: white !important
}

tspan.mg-chart-title {
  fill: white;
  font-weight:300
}

text {
  fill: white !important;
}

line {
  stroke: white !important;
}

%% js
</script>
<div id="panes-container">
  <iframe id="eval-frame" src="http://localhost:5555/dev/iodide.eval-frame.dev.html" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<script src="http://localhost:5000/dev/iodide.dev.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>dogfood - iodide</title>
	<link rel="stylesheet" type="text/css" href="http://localhost:5000/dev/iodide.dev.css">
	</head>
	<body>
	<script id="jsmd" type="text/jsmd">
	%% meta
	{
	"title": "dogfood",
	"lastSaved": "2018-07-24T23:27:11.772Z",
	"lastExport": "2018-07-24T23:57:07.584Z"
	}

	%% resource
	https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js
	https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.js
	https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.15.6/metricsgraphics.min.css

	%% js
	var data
	iodide.evalQueue.await([fetch('https://raw.githubusercontent.com/fivethirtyeight/data/master/us-weather-history/KNYC.csv')
	.then(d=>d.text()).then(d=>d3.csvParse(d)).then(d=>{data=d;d})
	])

	%% js
	var time = d3.timeFormat('%Y-%m-%d')
	var temps = data.map(d=>{
	d.date = d.date.split("-")
	d.date[0] = parseInt(d.date[0])
	d.date[1] = parseInt(d.date[1])
	d.date[2] = parseInt(d.date[2])
	d.date = new Date(d.date[0], d.date[1], d.date[2])
	d.actual_mean_temp = parseInt(d.actual_mean_temp)
	return d
	})
	temps

	%% raw
	Presentational code

	%% md
	# Dogfood!

	This is an attempt to dogfood The `iframe-2` branch, noting the pieces that I think are good / bad about it.

	I will write a bit of introductory text, and then do some dom manipulation, and then draw some graphs.

	## Temperatures

	I am not familiar with this data set, but it is as good as any to test things out. These mean temperatures in NYC seem low.

	%% js
	// create a target div.
	var div = iodide.output.element('div', false)
	MG.data_graphic({
	target: div,
	data: temps,
	x_accessor: 'date',
	y_accessor: 'actual_mean_temp',
	title: 'actual mean temperatures in NYC',
	area: false,
	width: 500
	})
	div

	%% css
	body {
	background-color: rgba(200,200,190,1);
	box-shadow: inset 0px 0px 100px rgba(0,0,0,.4);
	color: white !important;
	font-weight: 300;
	}

	div.cell-container.evaluated {
	background-color: transparent;
	outline: none;
	}

	.user-markdown {
	color: white !important
	}

	tspan.mg-chart-title {
	fill: white;
	font-weight:300
	}

	text {
	fill: white !important;
	}

	line {
	stroke: white !important;
	}

	%% js
	</script>
	<div id="panes-container">
	<iframe id="eval-frame" src="http://localhost:5555/dev/iodide.eval-frame.dev.html" sandbox="allow-scripts allow-same-origin"></iframe>
	</div>
	<script src="http://localhost:5000/dev/iodide.dev.js"></script>
	</body>
	</html>