timelyportfolio/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from d3noob's block: Simple bar graph in v4
... to demonstrate how to add a brush for each bar for partial selection

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://unpkg.com/d3@4.12.0/build/d3.min.js"></script>

</head>
<body style="background-color:white;">
<style>.brush .selection {fill: red; fill-opacity: 1;}</style>
<script>

    // bar chart code entirely from d3noob

    //    https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4


    // set the dimensions and margins of the graph

    var margin = {top: 20, right: 20, bottom: 30, left: 40},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom;


    // set the ranges

    var x = d3.scaleBand()

    .range([0, width])

    .padding(0.1);

    var y = d3.scaleLinear()

    .range([height, 0]);


    // append the svg object to the body of the page

    // append a group element to svg

    // moves the group element to the top left margin

    var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

    .append("g")

    .attr("transform",

    "translate(" + margin.left + "," + margin.top + ")");


    // make up data instead of get from csv

    data = [

    {salesperson: "A", sales: Math.random() * 100},

    {salesperson: "B", sales: Math.random() * 100},

    {salesperson: "C", sales: Math.random() * 100}

    ];


    // Scale the range of the data in the domains

    x.domain(data.map(function(d) { return d.salesperson; }));

    y.domain([0, d3.max(data, function(d) { return d.sales; })]);


    // append the rectangles for the bar chart

    //  but use g to contain each bar

    var barg = svg.selectAll(".bar")

    .data(data)

    .enter().append("g")

    .attr("class", "bar")

    .attr(

    "transform",

    function(d) {

    return "translate(" + x(d.salesperson) + "," + 0 + ")"

    }

    )


    barg.append("rect")

    .attr("width", x.bandwidth())

    .attr("height", function(d) { return height - y(d.sales); })

    .attr("y", function(d) {return y(d.sales)})

    .style("fill", "#888");


    // now for fun add a brush on each bar

    var brush = d3.brushY()


    barg.append("g")

    .attr("class", "brush")

    .each(function(d) {

    d3.select(this)

    .call(brush.extent([[0,y(d.sales)], [x.bandwidth(), height]]))

    })


    // add the x Axis

    svg.append("g")

    .attr("transform", "translate(0," + height + ")")

    .call(d3.axisBottom(x));


    // add the y Axis

    svg.append("g")

    .call(d3.axisLeft(y));

    </script>
</body>
</html>

## sales.csv

          
            salesperson
            sales

            
              Bob
              33

            
              Robin
              12

            
              Anne
              41

            
              Mark
              16

            
              Joe
              59

            
              Eve
              38

            
              Karen
              21

            
              Kirsty
              25

            
              Chris
              30

            
              Lisa
              47

            
              Tom
              5

            
              Stacy
              20

            
              Charles
              13

            
              Mary
              29

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<script src="https://unpkg.com/d3@4.12.0/build/d3.min.js"></script>

	</head>
	<body style="background-color:white;">
	<style>.brush .selection {fill: red; fill-opacity: 1;}</style>
	<script>

	// bar chart code entirely from d3noob

	// https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4





	// set the dimensions and margins of the graph

	var margin = {top: 20, right: 20, bottom: 30, left: 40},

	width = 960 - margin.left - margin.right,

	height = 500 - margin.top - margin.bottom;



	// set the ranges

	var x = d3.scaleBand()

	.range([0, width])

	.padding(0.1);

	var y = d3.scaleLinear()

	.range([height, 0]);



	// append the svg object to the body of the page

	// append a group element to svg

	// moves the group element to the top left margin

	var svg = d3.select("body").append("svg")

	.attr("width", width + margin.left + margin.right)

	.attr("height", height + margin.top + margin.bottom)

	.append("g")

	.attr("transform",

	"translate(" + margin.left + "," + margin.top + ")");



	// make up data instead of get from csv

	data = [

	{salesperson: "A", sales: Math.random() * 100},

	{salesperson: "B", sales: Math.random() * 100},

	{salesperson: "C", sales: Math.random() * 100}

	];



	// Scale the range of the data in the domains

	x.domain(data.map(function(d) { return d.salesperson; }));

	y.domain([0, d3.max(data, function(d) { return d.sales; })]);



	// append the rectangles for the bar chart

	// but use g to contain each bar

	var barg = svg.selectAll(".bar")

	.data(data)

	.enter().append("g")

	.attr("class", "bar")

	.attr(

	"transform",

	function(d) {

	return "translate(" + x(d.salesperson) + "," + 0 + ")"

	}

	)



	barg.append("rect")

	.attr("width", x.bandwidth())

	.attr("height", function(d) { return height - y(d.sales); })

	.attr("y", function(d) {return y(d.sales)})

	.style("fill", "#888");



	// now for fun add a brush on each bar

	var brush = d3.brushY()



	barg.append("g")

	.attr("class", "brush")

	.each(function(d) {

	d3.select(this)

	.call(brush.extent([[0,y(d.sales)], [x.bandwidth(), height]]))

	})



	// add the x Axis

	svg.append("g")

	.attr("transform", "translate(0," + height + ")")

	.call(d3.axisBottom(x));



	// add the y Axis

	svg.append("g")

	.call(d3.axisLeft(y));

	</script>
	</body>
	</html>
	salesperson	sales
	Bob	33
	Robin	12
	Anne	41
	Mark	16
	Joe	59
	Eve	38
	Karen	21
	Kirsty	25
	Chris	30
	Lisa	47
	Tom	5
	Stacy	20
	Charles	13
	Mary	29