Example 2

by ktstowell

HTML

<div id="target"></div>

JavaScript

var houses = [
    { name: "Gryffindor", color: "blue" , score: 20},
    { name: "Ravenclaw", color: "red" , score: 25},
    { name: "Hufflepuff", color: "green", score: 45},
    { name: "Slytherin" , color: "purple", score: 55}, 
];


d3.select("#target").selectAll("p")
    .data(houses)
    .enter()
    .append("p")
    .text(function(house) {
        return house.name;
    })
    .style("background-color", function(house) {
        return house.color;
    })
    .style("width", function(house) {
        return house.score + "%";
   });