D3.js Hello World

D3 DataVisualization Cookbook Chapter 2

by Denise Nepraunig

HTML

<h1>Create dynamic boxes - yeah!</h1>

CSS

div {
    min-width: 200px;
    float: left;
    margin: 5px;
    padding: 10px;
}

.red {
    background-color: red;
    text-align: center;
}
.blue {
    background-color: blue;
    text-align: center;
}

JavaScript

var body = d3.select("body"); // <-- A

body.append("section") // <-- B
    .attr("id", "section1") // <-- C
    .append("div") // <-- D
    .attr("class", "blue") // <-- E
    .append("p") // <-- F
    .text("dynamic blue box sooooo long long long"); // <-- G

body.append("section")
    .attr("id", "section2")
    .append("div")
    .attr("class", "red ")
    .append("p")
    .text("dynamic red box");