Old school D3 from simpler times

All examples By author By category About

dbetebenner

Full window Github gist

D3 Block-a-Day: Day 1, January 1st, 2017

D3 Block-a-Day: Day 1, January, 1st 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 1. Working my way through Nick Qi Zhu's Data Visualization with D3.js Cookbook. This example shamelessly copies one of his examples and modifies the content to something related to education.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>D3 Block-a-Day: Day 1, January 1, 2017</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
<style>
    .h-bar {
        min-height: 40px;
        min-width: 10px;
        background-color: steelblue;
        margin-bottom: 2px;
        font: 20px sans-serif;
        color: #f0f8ff;
        text-align: left;
        padding-left: 10px;
      	padding-top: 20px;
    }

.control-group {
        padding-top: 10px;
        margin: 10px;
    }

.clear {
        clear: both;
    }

.selected {
        background-color: #f08080;
    }
</style>
</head>

<body>

<script type="text/javascript">
        var data = [ // <-A
            {percent_proficient: 70, school_name: "Brush Creek Elementary School", category: "Elementary"},
            {percent_proficient: 65, school_name: "Horizons Elementary School", category: "Elementary"},
            {percent_proficient: 90, school_name: "Barack Obama Elementary School", category: "Elementary"},
            {percent_proficient: 50, school_name: "First Steps Elementary School", category: "Elementary"},
            {percent_proficient: 60, school_name: "Wood River Valley Elementary School", category: "Elementary"},
            {percent_proficient: 45, school_name: "Mountainview Middle School", category: "Middle"},
            {percent_proficient: 55, school_name: "Skyline Middle School", category: "Middle"},
            {percent_proficient: 30, school_name: "Davis Middle School", category: "Middle"},
            {percent_proficient: 70, school_name: "New Horizons Middle School", category: "Middle"},
            {percent_proficient: 30, school_name: "Riverview High School", category: "High"},
            {percent_proficient: 60, school_name: "Walker High School", category: "High"}
        ];
        function render(data, category) {
            d3.select("body").selectAll("div.h-bar")
                    .data(data)
    			.enter()
                .append("div")
                    .attr("class", "h-bar")
    			.append("span");
            d3.select("body").selectAll("div.h-bar")
                    .data(data)
                .exit().remove();
            d3.select("body").selectAll("div.h-bar")
                    .data(data)
                .attr("class", "h-bar")
                .style("width", function (d) {
                    return (d.percent_proficient * 10) + "px";}
                )
                .select("span")
                    .text(function (d) {
                        return d.school_name + ' (' + d.percent_proficient + '%)';
                    });
            d3.select("body").selectAll("div.h-bar")
                    .filter(function (d, i) {
                        return d.category == category;
                    })
                    .classed("selected", true);
        }
        render(data);
        function select(category) {
            render(data, category);
        }
    </script>

<div class="control-group">
        <button onclick="select('Elementary')">
            Elementary School
        </button>
        <button onclick="select('Middle')">
            Middle School
        </button>
        <button onclick="select('High')">
            High School
        </button>
        <button onclick="select()">
            Clear
        </button>
    </div>

</body>

https://d3js.org/d3.v4.min.js