<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="d3.js"></script>
    <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;
                    }
                );
        }
    </script>
    <title>Template for D3 visualizations</title>
</head>
<body>
<script>
    var data_path = "data/service_status.json";
    d3.json(data_path, draw)
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="d3.js"></script>
    <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[0] === "GOOD SERVICE") {
                        return 'normal';
                    } else {
                        return 'bold';
                    }
                });
        }
    </script>
    <title>Template for D3 visualizations</title>
</head>
<body>
<script>
    var data_path = "data/service_status.json";
    d3.json(data_path, draw)
</script>

</body>
</html>
Add styling and use typed comparison. d.status is a list so need to index.
Add styling and use typed comparison.  d.status is a list so need to index.
