Simple D3 demo not working with altered structure

Question

I was following the official tutorial. Since the structure was pretty rudimentary I decided to do a cleaner one:

&         


        

Answer 1

Your script is on the head, and it's being parsed before the div with a class "chart" being generated .

Just move all your script to the end of the body, after the div you are selecting:

.chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }

If you want to keep the script in the head, for whatever reason, just change d3.select(".chart") for d3.select("body"):

div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
    }