Old school D3 from simpler times

All examples By author By category About

jfost00

Full window Github gist

Subway Status Board

Built with blockbuilder.org

Working through the book Getting Started with D3

<!DOCTYPE html>
<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