Skip to content

Instantly share code, notes, and snippets.

@denisemauldin

denisemauldin/.block

Last active January 26, 2018 19:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisemauldin/d797804c235365526e8b85c3081c4271 to your computer and use it in GitHub Desktop.
Save denisemauldin/d797804c235365526e8b85c3081c4271 to your computer and use it in GitHub Desktop.
Download ZIP
conditionally changing colour of svg markers
Raw
.block
license: mit
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment