Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/index.html Secret

Last active April 27, 2018 05:36
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 Andrew-Reid/886546389ca7dea2c4fafbe2055cfe3a to your computer and use it in GitHub Desktop.
Save Andrew-Reid/886546389ca7dea2c4fafbe2055cfe3a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p>
</div>
<svg class="chart" width="500" height="500"></svg>
<p>Global Performance</p>
<script>
var svg = d3.select("svg"),
margin = 40,
width = svg.attr("width") - margin*2,
height = svg.attr("height") - margin*2;
var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
yScale = d3.scaleLinear().range ([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
var data = [
{year: 2000, value: 100},
{year: 2001, value: 200},
{year: 2002, value: 300},
{year: 2003, value: 400},
{year: 2004, value: 200},
{year: 2005, value: 100},
];
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," + (height) + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return "$" + d;
}).ticks(10))
.append("text")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("value");
</script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment