<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
Step1:  D3.js
Step2:  What's D3.js?
Let's start with the basics
D3.js is a JavaScript library for manipulating documents based on data
D3 helps you bring data to life using HTML, SVG, and CSS
Step3:  A website inside a web presentation
Key concepts
Selections
javascript
d3.select("body")
d3.selectAll("p")
d3.select("body").style({"background-color"
Step4:  What is D3.js
How it works
Why is it useful and use cases
How to share them (check the kickstarter project I have financed). Here is the link
Step5:  Scott Murray (@alignedleft)
Step6:  Jérôme Cukier
Step7:  Thanks for coming!
Next time
Xgboost and how to win Kaggle challenges
<ASSISTANT_TASK:>
Python Code:
# Some styling 
from IPython.display import display, HTML
from IPython.display import IFrame, Image
s= 
<style>
.rendered_html h1{
    font-family: "Roboto", helvetica;
    color: #8896B4; !important
}
.rendered_html h2{
    font-family: "Roboto", helvetica;
    color: #5C6E95; !important
}
.rendered_html h3{
    font-family: "Roboto", helvetica;
    color: #3A4E79; !important
}
.rendered_html li{
    font-family: "Roboto", helvetica;
    color: #0D1F45; !important
}
.reveal a{
    font-family: "Roboto", helvetica;
    color: #8896B4; !important
}
#notebook {
    background-color: #365776;
}
.reveal blockquote{
    font-family: "Roboto", helvetica;
    color: #C18451; !important
}
</style>
display(HTML(s))
height=300
Explanation: D3.js: An introduction
End of explanation
IFrame("http://d3js.org/", width=1000, height=height)
Explanation: What's D3.js?
Let's start with the basics
D3.js is a JavaScript library for manipulating documents based on data
D3 helps you bring data to life using HTML, SVG, and CSS
End of explanation
IFrame("http://blockbuilder.org/",  width=1000, height=height)
Explanation: A website inside a web presentation
Key concepts
Selections
javascript
d3.select("body")
d3.selectAll("p")
d3.select("body").style({"background-color": "#196496"})
Data joining
javascript
var myData = d3.range(10);
d3.selectAll("p").data(myData).enter().append("p")
Dynamic properties
javascript
var myData = d3.range(10);
var color = d3.scale.linear()
    .range(["steelblue", "brown"])
    .interpolate(d3.interpolateHcl)
d3.select("body").selectAll("p")
  .data(myData)
  .enter()
  .append("p")
  .style("color", function(d, i){
    return color(i)
})
How to share D3 creations?
Use this awesome kickstarter project: http://blockbuilder.org/
End of explanation
IFrame('http://bost.ocks.org/mike/', width=1000, height=height)
Explanation: What is D3.js
How it works
Why is it useful and use cases
How to share them (check the kickstarter project I have financed). Here is the link: http://blockbuilder.org/ 
Show a live coding example of how to do one yourself
A nice way to explore the d3 API: http://bl.ocksplorer.org/ 
Show an example of a hex bin plot: http://bl.ocks.org/syntagmatic/1092fe86860def004ea7
A list of different projects that could be forked: http://bl.ocks.org/enjalot/raw/211bd42857358a60a936/ 
The kickstarter project: https://www.kickstarter.com/projects/1058500513/building-blocks-0/posts/1392278
Use this map as a supporting example: http://bl.ocks.org/tnightingale/4711787
Add this as another great example of a hex bin: http://bl.ocks.org/mbostock/4248145
References:
Add a reference to scott murray book
http://alignedleft.com/tutorials
Note: 
Be careful about the presentation aspect and how things display in the slides (remark by Theo)
Try to repeat before hand
Some references
The official website: http://d3js.org/
A Wiki containing lots of tutorials and guides: https://github.com/mbostock/d3/wiki/Tutorials
A great website with plenty of tutorials and examples: https://www.dashingd3js.com/
A great set of online tutorials: http://alignedleft.com/tutorials
A great book, by Scott Murray: <center><img src="http://orm-other.s3.amazonaws.com/interactivedatasplash/interactivedatacover.jpg" width="400" height="100"></center>
Interesting people to follow on Twitter
Mike Bostock (@mbostock)
End of explanation
IFrame("http://alignedleft.com/", width=1000, height=height)
Explanation: Scott Murray (@alignedleft)
End of explanation
IFrame("http://www.jeromecukier.net/", width=1000, height=300)
Explanation: Jérôme Cukier
End of explanation
Image("../screenshots/xgboost-sneakpeak.png", width=1000, height=300)
Explanation: Thanks for coming!
Next time
Xgboost and how to win Kaggle challenges
End of explanation
<END_TASK>