xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
function draw(data) {
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) {
return d.name + ": " + d.status;
});
d3.selectAll("li")
.style("font-weight", function(d){
if (d.status == "GOOD SERVICE"){
return "normal"
} else {
return "bold"
}
});
d3.selectAll("li")
.style("color", function(d){
if (d.status == "GOOD SERVICE"){
return "green"
} else {
return "red"
}
})
}
d3.json("service_status.json", draw);
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js