Skip to content

Instantly share code, notes, and snippets.

@khailey-zz

khailey-zz/README.md

Created November 4, 2015 00:11
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 khailey-zz/069bf8246a364fb4b681 to your computer and use it in GitHub Desktop.
Save khailey-zz/069bf8246a364fb4b681 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
index.html
<!DOCTYPE html>
/*
see http://bost.ocks.org/mike/bar/
*/
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.chart div {
font: 20px sans-serif;
background-color: steelblue;
text-align: right;
padding: 10px;
margin: 10px;
color: white;
}
</style>
</head>
<div id="comments"> </div>
<div id="log">Initial Content</div>
<div class="chart"></div>
<body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.7.0"></script>
<script type="text/javascript">
document.getElementById('comments').innerHTML = "text";
$("#log").html($('#log').html() + " <br>New content!");
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment