alansmithy/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## ext-data.csv

          
            name
            perc1
            perc2

            
              A
              23.36
              42.23

            
              B
              13.94
              60.95

            
              C
              8.50
              19.45

            
              D
              29.44
              35.46

            
              E
              81.27
              35.81

            
              F
              44.75
              12.73

            
              G
              57.45
              98.72

            
              H
              94.11
              82.07

            
              I
              91.98
              66.30

            
              J
              47.44
              64.74

            
              K
              28.31
              5.56

            
              L
              44.78
              29.25

            
              M
              50.42
              13.57

            
              N
              19.49
              18.52

## ext-data2.csv

          
            name
            perc1
            perc2

            
              Enzo
              33.60
              57.30

            
              Alvaro
              84.85
              2.06

            
              Luis
              10.60
              54.79

            
              D
              84.54
              46.75

            
              E
              77.22
              36.62

            
              F
              84.69
              69.73

            
              G
              24.71
              68.72

            
              H
              5.00
              95.76

            
              I
              72.96
              96.04

            
              J
              15.34
              38.53

            
              K
              0.73
              20.27

            
              L
              26.25
              56.94

            
              M
              47.66
              83.25

            
              N
              72.61
              27.30

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

//don't do anything until you have loaded the data
d3.csv("ext-data.csv",function(data){

  	//set the size and margins of the graphic and plot area
    var w = 960;
    var h = 500;
    var margin={left:30,top:66,right:30,bottom:50}
    var plotW = w-(margin.left+margin.right)
    var plotH = h-(margin.top+margin.bottom)

   	//create the svg element - Scalable Vector Graphics
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)

    //Create a title
    svg.append("text")
    	.attr("id","infoText")
      .attr("x",margin.left)
      .attr("y",40)
    	.attr("font-family","Metric")
    	.attr("font-size","30px")
      .text("What title do you want Gisella?")

    //work out the maximum values (this is the long way around - d3 has a much quicker way of doing this)
    var maxValue = 0;
  	var maxValue2 = 0;
    data.forEach(function(d,i){
      maxValue = d3.max([maxValue,data[i].perc1]);
      maxValue2 = d3.max([maxValue,data[i].perc2]);
    })
    var highestMax = d3.max([maxValue,maxValue2])

    //create background rectangle in lovely FT pink
    svg.append("rect")
    	.attr("x",margin.left)
    	.attr("y",margin.top)
    	.attr("width",plotW)
    	.attr("height",plotH)
    	.attr("fill","#fff1e0")

   //create a chart 'group' element that is offset by the margins
   var chart = svg.append("g")
   .attr("transform","translate("+margin.left+","+margin.top+")")

   //create a linear scale for the vertical axis - this maps the input values (the domain) to output pixels (the range)
   var yScale = d3.scaleLinear()
   									.domain([0,highestMax])
   									.range([plotH,0])

   //extract the names for the categories of each bar
   var cats = data.map(function(d){return d.name})

   //use the category names to create a scale for the x axis - note this is different to to the yScale, which is Linear
   var xScale = d3.scaleBand()
   									.domain(cats)
   									.range([0,plotW])
   									.padding(0.2)

  //create and append the xAxis
   var xAxis = d3.axisBottom(xScale)
   chart.append("g")
   	.attr("id","xAxis")
   	.attr("transform","translate(0,"+plotH+")")
   	.call(xAxis)

   //create and append the yAxis
   var yAxis = d3.axisLeft(yScale)
   	.ticks(7)
   	.tickSizeInner(-plotW)
   chart.append("g")
   	.attr("id","yAxis")
   	.call(yAxis)

   //finally - we can actually create the rectangles needed for the chart - notice that the geometry of the chart uses the xScale and yScale objects we have just created to put the chart in the right place
   var rects = chart.append("g")
   								.selectAll("rect")
   								.data(data)
   								.enter()
   								.append("rect")
   								.attr("fill","#bb6d82")
   								.attr("x",function(d){
                    return xScale(d.name)
                  })
   								.attr("width",xScale.bandwidth)
   								.attr("y",function(d){
                    return yScale(d.perc1)
                  })
   								.attr("height",function(d){
                    return plotH-(yScale(d.perc1))
                  })

 //create a circle - to be used for interactivity
 chart.append("circle")
 	.attr("r",20)
 	.attr("cx",50)
 	.attr("cy",50)
 	.attr("fill","blue")
 	.on("mouseover",function(){
   	rects.transition().duration(1000).attr("fill","blue")
 	})
 .on("mouseout",function(){
   	rects.transition().duration(1000).attr("fill","#bb6d82")
 	})
 .on("click",function(){
   rects.transition()
     	.duration(1000)
   		.ease(d3.easeElastic)
   		.delay(function(d,i){
     		//this delays each bar by 100 milliseconds
     		return i*100
   		})
     	.attr("y",function(d){
     		//uses the alternative value (perc2)
        return yScale(d.perc2)
      })
   		.attr("height",function(d){
     		//uses the alternative value (perc2)
        return plotH-(yScale(d.perc2))
      })
 	})

     })


  </script>
</body>
name	perc1	perc2
A	23.36	42.23
B	13.94	60.95
C	8.50	19.45
D	29.44	35.46
E	81.27	35.81
F	44.75	12.73
G	57.45	98.72
H	94.11	82.07
I	91.98	66.30
J	47.44	64.74
K	28.31	5.56
L	44.78	29.25
M	50.42	13.57
N	19.49	18.52
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>

	//don't do anything until you have loaded the data
	d3.csv("ext-data.csv",function(data){

	//set the size and margins of the graphic and plot area
	var w = 960;
	var h = 500;
	var margin={left:30,top:66,right:30,bottom:50}
	var plotW = w-(margin.left+margin.right)
	var plotH = h-(margin.top+margin.bottom)

	//create the svg element - Scalable Vector Graphics
	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h)

	//Create a title
	svg.append("text")
	.attr("id","infoText")
	.attr("x",margin.left)
	.attr("y",40)
	.attr("font-family","Metric")
	.attr("font-size","30px")
	.text("What title do you want Gisella?")

	//work out the maximum values (this is the long way around - d3 has a much quicker way of doing this)
	var maxValue = 0;
	var maxValue2 = 0;
	data.forEach(function(d,i){
	maxValue = d3.max([maxValue,data[i].perc1]);
	maxValue2 = d3.max([maxValue,data[i].perc2]);
	})
	var highestMax = d3.max([maxValue,maxValue2])

	//create background rectangle in lovely FT pink
	svg.append("rect")
	.attr("x",margin.left)
	.attr("y",margin.top)
	.attr("width",plotW)
	.attr("height",plotH)
	.attr("fill","#fff1e0")

	//create a chart 'group' element that is offset by the margins
	var chart = svg.append("g")
	.attr("transform","translate("+margin.left+","+margin.top+")")

	//create a linear scale for the vertical axis - this maps the input values (the domain) to output pixels (the range)
	var yScale = d3.scaleLinear()
	.domain([0,highestMax])
	.range([plotH,0])

	//extract the names for the categories of each bar
	var cats = data.map(function(d){return d.name})

	//use the category names to create a scale for the x axis - note this is different to to the yScale, which is Linear
	var xScale = d3.scaleBand()
	.domain(cats)
	.range([0,plotW])
	.padding(0.2)

	//create and append the xAxis
	var xAxis = d3.axisBottom(xScale)
	chart.append("g")
	.attr("id","xAxis")
	.attr("transform","translate(0,"+plotH+")")
	.call(xAxis)

	//create and append the yAxis
	var yAxis = d3.axisLeft(yScale)
	.ticks(7)
	.tickSizeInner(-plotW)
	chart.append("g")
	.attr("id","yAxis")
	.call(yAxis)

	//finally - we can actually create the rectangles needed for the chart - notice that the geometry of the chart uses the xScale and yScale objects we have just created to put the chart in the right place
	var rects = chart.append("g")
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("fill","#bb6d82")
	.attr("x",function(d){
	return xScale(d.name)
	})
	.attr("width",xScale.bandwidth)
	.attr("y",function(d){
	return yScale(d.perc1)
	})
	.attr("height",function(d){
	return plotH-(yScale(d.perc1))
	})

	//create a circle - to be used for interactivity
	chart.append("circle")
	.attr("r",20)
	.attr("cx",50)
	.attr("cy",50)
	.attr("fill","blue")
	.on("mouseover",function(){
	rects.transition().duration(1000).attr("fill","blue")
	})
	.on("mouseout",function(){
	rects.transition().duration(1000).attr("fill","#bb6d82")
	})
	.on("click",function(){
	rects.transition()
	.duration(1000)
	.ease(d3.easeElastic)
	.delay(function(d,i){
	//this delays each bar by 100 milliseconds
	return i*100
	})
	.attr("y",function(d){
	//uses the alternative value (perc2)
	return yScale(d.perc2)
	})
	.attr("height",function(d){
	//uses the alternative value (perc2)
	return plotH-(yScale(d.perc2))
	})
	})

	})



	</script>
	</body>