Created
October 21, 2014 20:15
-
-
Save anonymous/9c55bec61b7cc68ad162 to your computer and use it in GitHub Desktop.
Revisions
-
Anonymous created this gist
Oct 21, 2014 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ Patient Success Inner Graph --------------------------- A [Pen](http://codepen.io/topher6345/pen/Avine) by [Christopher Saunders](http://codepen.io/topher6345) on [CodePen](http://codepen.io/). [License](http://codepen.io/topher6345/pen/Avine/license). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,2 @@ <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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,196 @@ # 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) This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,18 @@ 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