index.haml

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'><div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>

Patient-Success-Inner-Graph.markdown

Patient Success Inner Graph

A Pen by Christopher Saunders on CodePen.

License.

script.coffee

# Container Variables
height = 300
width = 75
middle = width/2


# Data From Server
data = {
  range: [50, 250]
  target_range: [90, 140]
  current_value: 125
  last_value: 110
  goal: 100
  units: 'mm Hg'
  labelFrequency: 2
  tickFrequency: 10
}

# Global Styles
successColor = "#00CC11"
failColor = 'red'
goalColor = "#00C1B3"
fontFamily = 'Source Sans Pro'
strokeWidth = 2

# Calculate Transfer Function
scale = (height/(data.range[1] - data.range[0]))
position = (value) ->
  (height + (data.range[0] * scale)) - scale*value

# Draw Container
svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)

# Units label
svg.append("text")
   .attr("x", width*5/8)
   .attr("y", 7)
   .text(data.units)
   .attr('font-size', 7)
   .attr("fill", "black")
   .attr('font-family', fontFamily)
   .attr('font-weight', 800)

    
drawLine = (svg, data) ->
  # Middle Line Red
  svg.append("line")
  .attr("x1", middle)
  .attr("y1", position(data.range[1]))
  .attr("x2", middle)
  .attr("y2", position(data.range[0]))
  .attr("stroke-width", strokeWidth)
  .attr("stroke", failColor)

  # Middle Line Range
  svg.append("line")
  .attr("x1", middle)
  .attr("y1", position(data.target_range[0]))
  .attr("x2", middle)
  .attr("y2", position(data.target_range[1]))
  .attr("stroke-width", strokeWidth)
  .attr("stroke", successColor)

# Ticks

drawTicks = (svg, data)->
  count = (data.range[1] - data.range[0])/data.tickFrequency
  count = count + 1
  for i in [0...count]
    frequency = data.tickFrequency
    svg.append("line")
     .attr("x1", middle - 5)
     .attr("y1", i*scale*frequency)
     .attr("x2", middle - 2)
     .attr("y2", i*scale*frequency)
     .attr("stroke-width", 1)
     .attr("stroke", "black")


drawTickLabels = (svg, data)->
  textFor = (i) ->
    tmp = i*data.tickFrequency
    tmp = tmp + data.range[0] + data.tickFrequency
    tmp = tmp - (data.range[0] + data.range[1])
    tmp*(-1)

  # Text Lables
  count = (data.range[1] - data.range[0])/data.tickFrequency
  for i in [0...count] by data.labelFrequency
    frequency = data.tickFrequency
    svg.append("text")
       .attr("x", middle - 25)
       .attr("y",(i*scale*frequency) + 18)
       .text(textFor(i))
       .attr('font-size', 10)
       .attr('text-align', 'right')
       .attr('font-family', fontFamily)
       .attr('font-weight', '800')
       .attr('fill', '#555')


drawCurrentValue = (svg, value) ->
  if value > data.target_range[0] && value < data.target_range[1]
    color = successColor
  else
    color = failColor
  point = position(value)

  # Green Triangle SVG
  svg.append("polygon")
     .style("fill", color)
     .attr("points", "#{middle},#{point}, #{width - 5},#{point + 20}, #{width - 5},#{point - 20}")
  # Green Triangle Text
  svg.append("text")
     .attr("x", middle + 10)
     .attr("y", point + 3)
     .text(data.current_value)
     .attr('font-size', 11)
     .attr("fill", "white")
     .attr('font-family', fontFamily)


      

drawGoal = (svg, goal) ->
  goal_size = 5
  goal = position(goal)
  svg.append("polygon")
     .style("fill", goalColor)
     .attr(
       "points",
       "#{middle}, #{goal}, #{middle - goal_size}, #{goal + goal_size}, #{middle- goal_size}, #{goal - goal_size}"
     )

  # Blue Bubble #2
  svg.append('rect')
     .style("fill", goalColor)
     .attr("x", middle - goal_size*4)
     .attr("y", goal - goal_size)
     .attr("height", goal_size*2)
     .attr("width", goal_size*3)

  # Blue Bubble #3
  svg.append('rect')
     .style("fill", goalColor)
     .attr("x", middle - goal_size*6)
     .attr("y", goal - goal_size)
     .attr("height", goal_size*2)
     .attr("width", goal_size*3)
     .attr('rx', goal_size)
     .attr('ry', goal_size)

  # Blue Bubble Text
  svg.append("text")
     .attr("x", middle - goal_size*5)
     .attr("y", goal + goal_size/2)
     .text('GOAL')
     .attr('font-size', goal_size+3)
     .attr("fill", "white")
     .attr('font-family', fontFamily)

drawLastValue = (svg, data) ->
  point = position(data.last_value)

  svg.append("polygon")
     .style("fill", '#AAA')
     .attr("points", "#{middle},#{point}, #{width - 25},#{point + 10}, #{width - 25},#{point - 10}")

  svg.append("ellipse")
     .style("fill", '#AAA')
     .attr("cx", 59)
     .attr("cy", point)
     .attr("rx", 15)
     .attr("ry", 12)

  svg.append('text')
     .attr('x', middle + 10)
     .attr('y', point + 3)
     .attr('font-size', 11)
     .attr('font-family', fontFamily)
     .style('fill', 'white')
     .text(data.last_value)

drawLine(svg, data)
drawTickLabels(svg, data)
drawGoal(svg, data.goal)
drawTicks(svg, data)
drawCurrentValue(svg, data.current_value)
drawLastValue(svg, data)

style.sass

body
  margin: 0px
  padding: 0px
  background-color: #DDD
  
svg 
  background-color: #BBB
  max-width: 100px
  min-width: 50px
  
  
.grid, .tick 
  stroke: lightgrey
  opacity: 0.7

.grid, path 
  stroke-width: 0