And-How/index.html

## index.html
<!DOCTYPE html>
<!--modified from bullet chart http://bl.ocks.org/mbostock/4061961-->
<meta charset="utf-8">
<style>

    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: auto;
        padding-top: 40px;
        position: relative;
        width: 960px;
    }

    button {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .bullet { font: 10px sans-serif; }
    .bullet .marker { stroke: #000; stroke-width: 2px; }
    .bullet .tick line { stroke: #666; stroke-width: .5px; }
    .bullet .range.s0 { fill: #eee; }
    .bullet .range.s1 { fill: #ddd; }
    .bullet .range.s2 { fill: #ccc; }
    .bullet .measure.s0 { fill: lightsteelblue; }
    .bullet .measure.s1 { fill: steelblue; }
    .bullet .title { font-size: 14px; font-weight: bold; }
    .bullet .subtitle { fill: #999; }

</style>
<button>Update</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
(function() {

// Chart design based on the recommendations of Stephen Few. Implementation
// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
// http://projects.instantcognition.com/protovis/bulletchart/
    d3.bullet = function() {
        var reverse = false,
            duration = 0,
            ranges = bulletRanges,
            markers = bulletMarkers,
            width = 380,
            height = 30,
            tickFormat = null;

        // For each small multiple
        function bullet(g) {
            g.each(function(d, i) {
                var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
                    markerz = markers.call(this, d, i).slice().sort(d3.descending),
                    g = d3.select(this);

                // Compute the new x-scale.
                var x1 = d3.scale.linear()
                        .domain([0, Math.max(rangez[0],
                        markerz[0]
                )])
                        .range(reverse ? [width, 0] : [0, width]);

                // Retrieve the old x-scale, if this is an update.
                var x0 = this.__chart__ || d3.scale.linear()
                        .domain([0, Infinity])
                        .range(x1.range());

                // Stash the new scale.
                this.__chart__ = x1;

                // Derive width-scales from the x-scales.
                var w0 = bulletWidth(x0),
                        w1 = bulletWidth(x1);

                // Update the range rects.
                var range = g.selectAll("rect.range")
                        .data(rangez);

                range.enter().append("rect")
                        .attr("class", function(d, i) { return "range s" + i; })
                        .attr("width", w0)
                        .attr("height", height)
                        .attr("x", reverse ? x0 : 0)

                range.transition()
                        .duration(duration)
                        .attr("x", reverse ? x1 : 0)
                        .attr("width", w1)
                        .attr("height", height);

                // Update the marker lines.
                var marker = g.selectAll("line.marker")
                        .data(markerz);

                marker.enter().append("line")
                        .attr("class", "marker")
                        .attr("x1", x0)
                        .attr("x2", x0)
                        .attr("y1", height / 6)
                        .attr("y2", height * 5 / 6)

                marker.transition()
                        .duration(duration)
                        .attr("x1", x1)
                        .attr("x2", x1)
                        .attr("y1", height / 6)
                        .attr("y2", height * 5 / 6);

                // Compute the tick format.
                var format = tickFormat || x1.tickFormat(8);

                // Update the tick groups.
                var tick = g.selectAll("g.tick")
                        .data(x1.ticks(8), function(d) {
                            return this.textContent || format(d);
                        });

                // Initialize the ticks with the old scale, x0.
                var tickEnter = tick.enter().append("g")
                        .attr("class", "tick")
                        .attr("transform", bulletTranslate(x0))
                        .style("opacity", 1e-6);

                tickEnter.append("line")
                        .attr("y1", height)
                        .attr("y2", height * 7 / 6);

                tickEnter.append("text")
                        .attr("text-anchor", "middle")
                        .attr("dy", "1em")
                        .attr("y", height * 7 / 6)
                        .text(format);

                // Transition the entering ticks to the new scale, x1.
                tickEnter.transition()
                        .duration(duration)
                        .attr("transform", bulletTranslate(x1))
                        .style("opacity", 1);

            });
        }

        bullet.width = function(x) {
            if (!arguments.length) return width;
            width = x;
            return bullet;
        };

        bullet.height = function(x) {
            if (!arguments.length) return height;
            height = x;
            return bullet;
        };

        bullet.tickFormat = function(x) {
            if (!arguments.length) return tickFormat;
            tickFormat = x;
            return bullet;
        };

        return bullet;
    };

    function bulletRanges(d) {
        return d.ranges;
    }

    function bulletMarkers(d) {
        return d.markers;
    }

    function bulletTranslate(x) {
        return function(d) {
            return "translate(" + x(d) + ",0)";
        };
    }

    function bulletWidth(x) {
        var x0 = x(0);
        return function(d) {
            return Math.abs(x(d) - x0);
        };
    }

})();
var margin = {top: 5, right: 40, bottom: 20, left: 120},
        width = 960 - margin.left - margin.right,
        height = 50 - margin.top - margin.bottom;

var chart = d3.bullet()
        .width(width)
        .height(height);
var bulletdata = [
    {"title":"Revenue",
        "ranges":[300],
        "markers":[250]},
    {"title":"Profit",
        "ranges":[30],
        "markers":[26]},
    {"title":"Order Size",
        "ranges":[600],
        "markers":[550]},
    {"title":"New Customers",
        "ranges":[2500],
        "markers":[2100]},
    {"title":"Satisfaction",
        "ranges":[5],
        "markers":[4.4]}
];

var svg = d3.select("body").selectAll("svg")
        .data(bulletdata)
        .enter().append("svg")
        .attr("class", "bullet")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(chart);

var title = svg.append("g")
        .style("text-anchor", "end")
        .attr("transform", "translate(-6," + height / 2 + ")");

title.append("text")
        .attr("class", "title")
        .text(function(d) { return d.title; });

</script>
	<!DOCTYPE html>
	<!--modified from bullet chart http://bl.ocks.org/mbostock/4061961-->
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	padding-top: 40px;
	position: relative;
	width: 960px;
	}

	button {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	.bullet { font: 10px sans-serif; }
	.bullet .marker { stroke: #000; stroke-width: 2px; }
	.bullet .tick line { stroke: #666; stroke-width: .5px; }
	.bullet .range.s0 { fill: #eee; }
	.bullet .range.s1 { fill: #ddd; }
	.bullet .range.s2 { fill: #ccc; }
	.bullet .measure.s0 { fill: lightsteelblue; }
	.bullet .measure.s1 { fill: steelblue; }
	.bullet .title { font-size: 14px; font-weight: bold; }
	.bullet .subtitle { fill: #999; }

	</style>
	<button>Update</button>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	(function() {

	// Chart design based on the recommendations of Stephen Few. Implementation
	// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
	// http://projects.instantcognition.com/protovis/bulletchart/
	d3.bullet = function() {
	var reverse = false,
	duration = 0,
	ranges = bulletRanges,
	markers = bulletMarkers,
	width = 380,
	height = 30,
	tickFormat = null;

	// For each small multiple
	function bullet(g) {
	g.each(function(d, i) {
	var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
	markerz = markers.call(this, d, i).slice().sort(d3.descending),
	g = d3.select(this);

	// Compute the new x-scale.
	var x1 = d3.scale.linear()
	.domain([0, Math.max(rangez[0],
	markerz[0]
	)])
	.range(reverse ? [width, 0] : [0, width]);

	// Retrieve the old x-scale, if this is an update.
	var x0 = this.__chart__ \|\| d3.scale.linear()
	.domain([0, Infinity])
	.range(x1.range());

	// Stash the new scale.
	this.__chart__ = x1;

	// Derive width-scales from the x-scales.
	var w0 = bulletWidth(x0),
	w1 = bulletWidth(x1);

	// Update the range rects.
	var range = g.selectAll("rect.range")
	.data(rangez);

	range.enter().append("rect")
	.attr("class", function(d, i) { return "range s" + i; })
	.attr("width", w0)
	.attr("height", height)
	.attr("x", reverse ? x0 : 0)

	range.transition()
	.duration(duration)
	.attr("x", reverse ? x1 : 0)
	.attr("width", w1)
	.attr("height", height);

	// Update the marker lines.
	var marker = g.selectAll("line.marker")
	.data(markerz);

	marker.enter().append("line")
	.attr("class", "marker")
	.attr("x1", x0)
	.attr("x2", x0)
	.attr("y1", height / 6)
	.attr("y2", height * 5 / 6)

	marker.transition()
	.duration(duration)
	.attr("x1", x1)
	.attr("x2", x1)
	.attr("y1", height / 6)
	.attr("y2", height * 5 / 6);

	// Compute the tick format.
	var format = tickFormat \|\| x1.tickFormat(8);

	// Update the tick groups.
	var tick = g.selectAll("g.tick")
	.data(x1.ticks(8), function(d) {
	return this.textContent \|\| format(d);
	});

	// Initialize the ticks with the old scale, x0.
	var tickEnter = tick.enter().append("g")
	.attr("class", "tick")
	.attr("transform", bulletTranslate(x0))
	.style("opacity", 1e-6);

	tickEnter.append("line")
	.attr("y1", height)
	.attr("y2", height * 7 / 6);

	tickEnter.append("text")
	.attr("text-anchor", "middle")
	.attr("dy", "1em")
	.attr("y", height * 7 / 6)
	.text(format);

	// Transition the entering ticks to the new scale, x1.
	tickEnter.transition()
	.duration(duration)
	.attr("transform", bulletTranslate(x1))
	.style("opacity", 1);

	});
	}

	bullet.width = function(x) {
	if (!arguments.length) return width;
	width = x;
	return bullet;
	};

	bullet.height = function(x) {
	if (!arguments.length) return height;
	height = x;
	return bullet;
	};

	bullet.tickFormat = function(x) {
	if (!arguments.length) return tickFormat;
	tickFormat = x;
	return bullet;
	};

	return bullet;
	};

	function bulletRanges(d) {
	return d.ranges;
	}

	function bulletMarkers(d) {
	return d.markers;
	}

	function bulletTranslate(x) {
	return function(d) {
	return "translate(" + x(d) + ",0)";
	};
	}

	function bulletWidth(x) {
	var x0 = x(0);
	return function(d) {
	return Math.abs(x(d) - x0);
	};
	}

	})();
	var margin = {top: 5, right: 40, bottom: 20, left: 120},
	width = 960 - margin.left - margin.right,
	height = 50 - margin.top - margin.bottom;

	var chart = d3.bullet()
	.width(width)
	.height(height);
	var bulletdata = [
	{"title":"Revenue",
	"ranges":[300],
	"markers":[250]},
	{"title":"Profit",
	"ranges":[30],
	"markers":[26]},
	{"title":"Order Size",
	"ranges":[600],
	"markers":[550]},
	{"title":"New Customers",
	"ranges":[2500],
	"markers":[2100]},
	{"title":"Satisfaction",
	"ranges":[5],
	"markers":[4.4]}
	];

	var svg = d3.select("body").selectAll("svg")
	.data(bulletdata)
	.enter().append("svg")
	.attr("class", "bullet")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.call(chart);

	var title = svg.append("g")
	.style("text-anchor", "end")
	.attr("transform", "translate(-6," + height / 2 + ")");

	title.append("text")
	.attr("class", "title")
	.text(function(d) { return d.title; });

	</script>