Skip to content

Instantly share code, notes, and snippets.

@pandafulmanda

pandafulmanda/README.md

Created November 9, 2015 21:45
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 pandafulmanda/634af7ba7ac34fbe4288 to your computer and use it in GitHub Desktop.
Save pandafulmanda/634af7ba7ac34fbe4288 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to D3 Talk
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { height: 100%; }
</style>
</head>
<body>
<svg width="800"></svg>
<script>
var sampleData = [1, 2, 3, 4, 5, 10, 6, 2, 9, 13, 54, 30];
drawBars(sampleData);
function drawBars(data){
var y = data;
var x = data.map(function(dataPoint, index){
return index;
});
var xPosition = d3.scale.ordinal()
.domain(x)
.rangeRoundBands([0, 800], 0.2);
var dataColor = d3.scale.category10(x)
.domain(x);
var eachDataPoint = d3.select("svg")
.selectAll("rect")
.data(data);
eachDataPoint.enter()
.append("rect");
eachDataPoint
.attr("x", function(dataItem, index){
return xPosition(index);
})
.attr("y", function(){
return 0;
})
.attr("width", xPosition.rangeBand)
.attr("height", function(dataItem, index){
return dataItem * 10;
})
.attr("fill", function(dataItem, index){
return dataColor(index);
})
.on('mouseenter', function(dataItem, index){
d3.select(this).attr("fill", "blue");
})
.on('mouseout', function(dataItem, index){
var originalColor = dataColor(index);
d3.select(this).attr("fill", originalColor);
});
eachDataPoint.exit()
.remove();
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment