Welcome to the D3 Playground

Fun With the Console

Open the console on your browser and paste in the following (but not before I tell you too!)

Pick a color, any color

d3.select("body").style("background-color","COLOR")
d3.select("h1").style("color","COLOR")
d3.select("p").style("color","COLOR")
d3.select("p").style("font-family","serif")
d3.select("#playground").style("background-color","purple")
d3.select("#playground").append("p").text("TEXT")

Let's go to the bar

d3.select("#playground").selectAll("p").data(berniehair).enter().append("p").text(function(d){return d;});
d3.select("#playground").selectAll("div").data(berniehair).enter().append("div").attr("class","chart")
d3.selectAll(".chart").style("width","30px").style("height","10px").style("background-color","green")
d3.selectAll(".chart").style("height", function(d){return d*30+"px"})
d3.selectAll(".chart").style("margin-right", "2px")
d3.select("#playground").append("p").text("The neatness of Bernie Sanders' hair, 2006-2016")