denisemauldin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from JulienAssouline's block: conditionally changing colour of svg markers

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style type="text/css">
      /* No style rules here yet */
body,html{
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
  }

  #chart{
    background-color: white;
    border: 1px solid white;
  }
    .yaxis path{
    fill: none;
    stroke: none;
  }

  .yaxis line{
    fill: none;
    stroke: #dcd9d3;
    stroke-width: 2px;
    shape-rendering: crispEdges;
    opacity: 0.7;
    stroke-dasharray: 3,3;
  }

 h1{
    font-family: Arial;
    font-size: 40px;
    font-weight: normal;
    position: left;
  }

  h2{
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    padding-left: 70px;
  }

  p.title {
    font-family: Arial;
    font-size: 15px;
    font-weight: normal;
    padding-left: 70px;
  }


  .xaxis path {
    fill: none;
    stroke: none;
    stroke-width: 0px;
    shape-rendering: crispEdges;
  }

.xaxis line {
    fill: none;
    stroke: none;
    stroke-width: 0px;
    shape-rendering: crispEdges;
  }

  #nav {
  position: absolute;
  text-align: right;
  width: 90%;
  padding-right: 10px;
  font-size: 15px;
/*  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
}
#nav a{
  padding-right: 5px;
}

.provinces{
  float: middle;
  padding-left: 190px;
}
.provinces_d{
  float: middle;
  padding-right: 190px;
}

h2.title{
  width:600px;
  font-size: 20px;
  font-family: Bree serif;
  padding-left: 270px;

}
p.title{
  width:600px;
  font-size: 17px;
  font-family: Bree serif;
  padding-left: 270px;
}

/*line.brown{
  opacity: 0.5;
}
line.green{
  opacity: 1;
}*/
p.title_2{
  width:600px;
  font-size: 17px;
  font-family: Bree serif;
  padding-left: 75px;
}

.triangle_Territories{
  fill: green;
}

    </style>
  </head>
  <body>
 <script>
 var w = 640;
 var h = 700;

      var margin = {
          top: 55,
          bottom: 0,
          left: 60,
          right: 100
        }

        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;


        var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


         var format = d3.format("+20")

        var xScale = d3.scaleLinear()
          .range([0, width])

        var yScale = d3.scaleBand()
          .range([height, 0])

          provinces_fill = ["red"];

      var yAxis = d3.axisLeft()
        .scale(yScale)
        .tickSize(-width,0,0)


  d3.csv("opioid_province.csv", function(error, data){
    data.forEach(function(d){
      d.provinces = d.provinces;
      d["2007–2008"] = +d["2007–2008"];
      d["2014–2015"] = +d["2014–2015"];
      d.x_1 = +d.x_1;
      d.x_2 = +d.x_2 ;
      d.difference_2007_2015 = +d.difference_2007_2015;
    });


        xScale.domain([0, 20])
        yScale.domain(data.map(function(d){ return d.provinces }))

        svg.append("g")
            .classed("yaxis", true)
            .attr("transform", "translate(0," + -27 + ")")
            .call(yAxis)
            .selectAll("text")
                  .attr("transform", "translate("+ -10 + ",0)")

        // make arrows!!

svg.append("svg:defs")
        .selectAll(".arrows")
        .data(data)
        .enter()
      .append("svg:marker")
      .attr("class", "triangle")
      .attr("id", function(d){ return "triangle_" + d.provinces})
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 6)
      .attr('markerWidth', 4)
      .attr('markerHeight', 4)
      .style("stroke", function(d){
          if(d.difference_2007_2015 > 0){
            return "brown"
          } else {
            return "green" }
        })                    // colour the stroke
      .style("fill", function(d){
          if(d.difference_2007_2015 > 0){
            return "brown"
          } else {
            return "green" }
        })                    // colour the marker fill
      .attr('orient', 'auto')
      .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')

      svg.selectAll(".lines")
        .data(data)
        .enter()
        .append("svg:line")
        .attr("x1", function(d){
          return xScale(d["2007–2008"])
        })
        .attr("x2", function(d){
          return xScale(d["2014–2015"])
        })
        .attr("y1", function(d){
          return yScale(d.provinces)
        })
        .attr("y2", function(d){
          return yScale(d.provinces)
        })
        .attr("marker-end", function(d){ return "url(#triangle_" + d.provinces +')'}) //add the marker
        .style("stroke", function(d){
          if(d.difference_2007_2015 > 0){
            return "brown"
          } else {
            return "green" }
        })
        .style("stroke-width", 2.5)


      svg.selectAll(".labels")
        .data(data)
        .enter()
        .append("text")
        .attr("x", function(d){
          if(d.difference_2007_2015 > 0){
            return xScale(d["2014–2015"]) + 10
          } if(d.provinces == "Territories") {
            return xScale(d["2014–2015"]) - 40
          } if(d.provinces == "P.E.I."){
            return xScale(d["2014–2015"]) - 30
          }
        })
        .attr("y", function(d){
          return yScale(d.provinces)
        })
        .text(function(d){
          return d["2014–2015"]
        })
        .style("fill", "black")
        .style("font-family", "Bree Serif")
        .style("font-size", "12px")

        svg.selectAll(".labels")
        .data(data)
        .enter()
        .append("text")
        .attr("x", function(d){
          if(d.difference_2007_2015 > 0){
            return xScale(d["2007–2008"]) -25
          } if(d.provinces == "Territories") {
            return xScale(d["2007–2008"]) + 10
          } if(d.provinces == "P.E.I."){
            return xScale(d["2007–2008"]) + 10
          }

        })
        .attr("y", function(d){
          return yScale(d.provinces)
        })
        .text(function(d){
          return d["2007–2008"]
        })
        .style("fill", "black")
        .style("font-family", "Bree Serif")
        .style("font-size", "12px")


          svg.append("text")
            .attr("x", 320)
            .attr("y", -30)
            .text("2007-2008")
            .style("font-size", 14)
            .style("font-family", "Bree Serif")
            .style("font-weight", "normal")

            svg.append("text")
            .attr("x", 450)
            .attr("y", -30)
            .text("2014-2015")
            .style("font-size", 14)
            .style("font-family", "Bree Serif")
            .style("font-weight", "normal")

            svg.append("line")
              .attr("x1", 0.5)
              .attr("x2", 0.5)
              .attr("y1", 1)
              .attr("y2", 15)
              .attr("transform", "translate(350,-25)")
              .attr("stroke", "black")

              svg.append("line")
              .attr("x1", 0.5)
              .attr("x2", 0.5)
              .attr("y1", 1)
              .attr("y2", 15)
              .attr("transform", "translate(480,-25)")
              .attr("stroke", "black")


          // svg.append("text")
          //   .attr("x", -30)
          //   .attr("y", -100)
          //   .text("P.E.I and the Territories are the only regions where opioid hospitalization rates decreased")
          //   .style("font-size", 20)
          //   .style("font-family", "Bree Serif")
          //   .style("font-weight", "normal")


                });

   </script>

</body>
</html>

## opioid_province.csv

          
            provinces
            2007–2008
            2008–2009
            2009–2010
            2010–2011
            2011–2012
            2012–2013
            2013–2014
            2014–2015
            x_1
            x_2
            difference_2007_2015

            
              9
              Que.
              7.9
              8.1
              8.1
              8.3
              9.3
              9.1
              10.2
              10.1
              1
              2
              2.1999999999999993

            
              3
              Man.
              10.0
              9.0
              9.0
              8.3
              12.9
              11.1
              10.3
              10.4
              1
              2
              0.40000000000000036

            
              6
              N.S.
              7.6
              7.4
              9.4
              9.2
              9.7
              11.0
              10.2
              11.8
              1
              2
              4.200000000000001

            
              7
              Ont.
              9.6
              9.4
              10.3
              10.5
              12.2
              13.1
              12.2
              12.1
              1
              2
              2.5

            
              5
              N.L.
              7.1
              12.1
              8.9
              8.6
              8.6
              9.5
              10.6
              12.3
              1
              2
              5.200000000000001

            
              11
              Territories
              14.9
              14.8
              17.4
              17.1
              15.1
              13.1
              13.0
              12.9
              1
              2
              -2.0

            
              2
              Canada
              10.2
              10.3
              11.0
              11.5
              12.7
              13.1
              13.0
              13.5
              1
              2
              3.3000000000000007

            
              4
              N.B.
              8.6
              7.4
              11.5
              15.8
              13.6
              14.5
              14.0
              14.6
              1
              2
              6.0

            
              8
              P.E.I.
              16.0
              8.7
              6.4
              3.5
              9.8
              11.0
              12.4
              15.1
              1
              2
              -0.9000000000000004

            
              0
              Alta.
              11.5
              13.0
              14.7
              15.0
              14.1
              15.3
              16.1
              17.7
              1
              2
              6.199999999999999

            
              1
              B.C.
              15.1
              15.7
              15.9
              17.1
              18.8
              19.3
              19.0
              19.5
              1
              2
              4.4

            
              10
              Sask.
              14.6
              11.7
              13.5
              15.2
              17.3
              16.2
              13.6
              19.9
              1
              2
              5.299999999999999
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 11px;
	text-align: center;
	}

	#chart{
	background-color: white;
	border: 1px solid white;
	}
	.yaxis path{
	fill: none;
	stroke: none;
	}

	.yaxis line{
	fill: none;
	stroke: #dcd9d3;
	stroke-width: 2px;
	shape-rendering: crispEdges;
	opacity: 0.7;
	stroke-dasharray: 3,3;
	}

	h1{
	font-family: Arial;
	font-size: 40px;
	font-weight: normal;
	position: left;
	}

	h2{
	font-family: Arial;
	font-size: 25px;
	font-weight: bold;
	padding-left: 70px;
	}

	p.title {
	font-family: Arial;
	font-size: 15px;
	font-weight: normal;
	padding-left: 70px;
	}


	.xaxis path {
	fill: none;
	stroke: none;
	stroke-width: 0px;
	shape-rendering: crispEdges;
	}

	.xaxis line {
	fill: none;
	stroke: none;
	stroke-width: 0px;
	shape-rendering: crispEdges;
	}

	#nav {
	position: absolute;
	text-align: right;
	width: 90%;
	padding-right: 10px;
	font-size: 15px;
	/* font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
	}
	#nav a{
	padding-right: 5px;
	}

	.provinces{
	float: middle;
	padding-left: 190px;
	}
	.provinces_d{
	float: middle;
	padding-right: 190px;
	}

	h2.title{
	width:600px;
	font-size: 20px;
	font-family: Bree serif;
	padding-left: 270px;

	}
	p.title{
	width:600px;
	font-size: 17px;
	font-family: Bree serif;
	padding-left: 270px;
	}

	/*line.brown{
	opacity: 0.5;
	}
	line.green{
	opacity: 1;
	}*/
	p.title_2{
	width:600px;
	font-size: 17px;
	font-family: Bree serif;
	padding-left: 75px;
	}

	.triangle_Territories{
	fill: green;
	}

	</style>
	</head>
	<body>
	<script>
	var w = 640;
	var h = 700;

	var margin = {
	top: 55,
	bottom: 0,
	left: 60,
	right: 100
	}

	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;


	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	var format = d3.format("+20")

	var xScale = d3.scaleLinear()
	.range([0, width])

	var yScale = d3.scaleBand()
	.range([height, 0])

	provinces_fill = ["red"];

	var yAxis = d3.axisLeft()
	.scale(yScale)
	.tickSize(-width,0,0)



	d3.csv("opioid_province.csv", function(error, data){
	data.forEach(function(d){
	d.provinces = d.provinces;
	d["2007–2008"] = +d["2007–2008"];
	d["2014–2015"] = +d["2014–2015"];
	d.x_1 = +d.x_1;
	d.x_2 = +d.x_2 ;
	d.difference_2007_2015 = +d.difference_2007_2015;
	});


	xScale.domain([0, 20])
	yScale.domain(data.map(function(d){ return d.provinces }))

	svg.append("g")
	.classed("yaxis", true)
	.attr("transform", "translate(0," + -27 + ")")
	.call(yAxis)
	.selectAll("text")
	.attr("transform", "translate("+ -10 + ",0)")

	// make arrows!!

	svg.append("svg:defs")
	.selectAll(".arrows")
	.data(data)
	.enter()
	.append("svg:marker")
	.attr("class", "triangle")
	.attr("id", function(d){ return "triangle_" + d.provinces})
	.attr('viewBox', '0 -5 10 10')
	.attr('refX', 6)
	.attr('markerWidth', 4)
	.attr('markerHeight', 4)
	.style("stroke", function(d){
	if(d.difference_2007_2015 > 0){
	return "brown"
	} else {
	return "green" }
	}) // colour the stroke
	.style("fill", function(d){
	if(d.difference_2007_2015 > 0){
	return "brown"
	} else {
	return "green" }
	}) // colour the marker fill
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', 'M0,-5L10,0L0,5')

	svg.selectAll(".lines")
	.data(data)
	.enter()
	.append("svg:line")
	.attr("x1", function(d){
	return xScale(d["2007–2008"])
	})
	.attr("x2", function(d){
	return xScale(d["2014–2015"])
	})
	.attr("y1", function(d){
	return yScale(d.provinces)
	})
	.attr("y2", function(d){
	return yScale(d.provinces)
	})
	.attr("marker-end", function(d){ return "url(#triangle_" + d.provinces +')'}) //add the marker
	.style("stroke", function(d){
	if(d.difference_2007_2015 > 0){
	return "brown"
	} else {
	return "green" }
	})
	.style("stroke-width", 2.5)



	svg.selectAll(".labels")
	.data(data)
	.enter()
	.append("text")
	.attr("x", function(d){
	if(d.difference_2007_2015 > 0){
	return xScale(d["2014–2015"]) + 10
	} if(d.provinces == "Territories") {
	return xScale(d["2014–2015"]) - 40
	} if(d.provinces == "P.E.I."){
	return xScale(d["2014–2015"]) - 30
	}
	})
	.attr("y", function(d){
	return yScale(d.provinces)
	})
	.text(function(d){
	return d["2014–2015"]
	})
	.style("fill", "black")
	.style("font-family", "Bree Serif")
	.style("font-size", "12px")

	svg.selectAll(".labels")
	.data(data)
	.enter()
	.append("text")
	.attr("x", function(d){
	if(d.difference_2007_2015 > 0){
	return xScale(d["2007–2008"]) -25
	} if(d.provinces == "Territories") {
	return xScale(d["2007–2008"]) + 10
	} if(d.provinces == "P.E.I."){
	return xScale(d["2007–2008"]) + 10
	}

	})
	.attr("y", function(d){
	return yScale(d.provinces)
	})
	.text(function(d){
	return d["2007–2008"]
	})
	.style("fill", "black")
	.style("font-family", "Bree Serif")
	.style("font-size", "12px")




	svg.append("text")
	.attr("x", 320)
	.attr("y", -30)
	.text("2007-2008")
	.style("font-size", 14)
	.style("font-family", "Bree Serif")
	.style("font-weight", "normal")

	svg.append("text")
	.attr("x", 450)
	.attr("y", -30)
	.text("2014-2015")
	.style("font-size", 14)
	.style("font-family", "Bree Serif")
	.style("font-weight", "normal")

	svg.append("line")
	.attr("x1", 0.5)
	.attr("x2", 0.5)
	.attr("y1", 1)
	.attr("y2", 15)
	.attr("transform", "translate(350,-25)")
	.attr("stroke", "black")

	svg.append("line")
	.attr("x1", 0.5)
	.attr("x2", 0.5)
	.attr("y1", 1)
	.attr("y2", 15)
	.attr("transform", "translate(480,-25)")
	.attr("stroke", "black")



	// svg.append("text")
	// .attr("x", -30)
	// .attr("y", -100)
	// .text("P.E.I and the Territories are the only regions where opioid hospitalization rates decreased")
	// .style("font-size", 20)
	// .style("font-family", "Bree Serif")
	// .style("font-weight", "normal")





	});

	</script>

	</body>
	</html>
	provinces	2007–2008	2008–2009	2009–2010	2010–2011	2011–2012	2012–2013	2013–2014	2014–2015	x_1	x_2	difference_2007_2015
9	Que.	7.9	8.1	8.1	8.3	9.3	9.1	10.2	10.1	1	2	2.1999999999999993
3	Man.	10.0	9.0	9.0	8.3	12.9	11.1	10.3	10.4	1	2	0.40000000000000036
6	N.S.	7.6	7.4	9.4	9.2	9.7	11.0	10.2	11.8	1	2	4.200000000000001
7	Ont.	9.6	9.4	10.3	10.5	12.2	13.1	12.2	12.1	1	2	2.5
5	N.L.	7.1	12.1	8.9	8.6	8.6	9.5	10.6	12.3	1	2	5.200000000000001
11	Territories	14.9	14.8	17.4	17.1	15.1	13.1	13.0	12.9	1	2	-2.0
2	Canada	10.2	10.3	11.0	11.5	12.7	13.1	13.0	13.5	1	2	3.3000000000000007
4	N.B.	8.6	7.4	11.5	15.8	13.6	14.5	14.0	14.6	1	2	6.0
8	P.E.I.	16.0	8.7	6.4	3.5	9.8	11.0	12.4	15.1	1	2	-0.9000000000000004
0	Alta.	11.5	13.0	14.7	15.0	14.1	15.3	16.1	17.7	1	2	6.199999999999999
1	B.C.	15.1	15.7	15.9	17.1	18.8	19.3	19.0	19.5	1	2	4.4
10	Sask.	14.6	11.7	13.5	15.2	17.3	16.2	13.6	19.9	1	2	5.299999999999999