Skip to content

Instantly share code, notes, and snippets.

@nonlogos

nonlogos/D3

Last active January 9, 2017 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nonlogos/962e9aaffb51f036db5ece42f6bec2b7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nonlogos/962e9aaffb51f036db5ece42f6bec2b7 to your computer and use it in GitHub Desktop.
Download ZIP
All about D3
Raw
D3
// simple bar chart
<!DOCTYPE html>
<html>
<head>
<title>Make a simple line chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style type="text/css">
rect:hover {
fill: yellow;
}
</style>
<script>
var w = 300,
h = 150,
dataset = [5, 10, 14, 20, 11, 24, 22, 18, 22, 9],
padding = 2,
svg = d3.select("body").append("svg")
.attr("height", h)
.attr("width", w);
//binding data with svg
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d, i){ return i*(w/dataset.length); },
y: function(d){ return h-(d*4); },
width: w / dataset.length-padding,
height: function(d){ return d*4; },
fill: function(d){
if (d > 10){
return "red";
}
else if (d < 5) {
return "teal";
}
}
});
</script>
//basic horizonal chart
<style type="text/css">
rect:hover {
fill: yellow;
}
</style>
<script>
var w = 300,
h = 300,
dataset = [5, 10, 14, 20, 11, 24, 22, 18, 22, 9],
padding = 2,
svg = d3.select("#chart").append("svg")
.attr("height", h)
.attr("width", w);
//binding data with svg
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d, i){ return 0 },
y: function(d, i){ return i*(h/dataset.length); },
width: function(d){ return d*4; },
height: h / dataset.length-padding,
fill: function(d){
if (d > 10){
return "red";
}
else if (d < 5) {
return "teal";
}
}
});
</script>
Raw
d3_scales_axis
//functions that convert input to value scales to create axis that will scale with dynamic data
//before creating the svg
// simple concept
// initialize scale
var scale = d3.scale.linear();
// set input domain
scale.domain([3, 110]);
// set output range
scale.range([10, 350]);
// more complex scale per axis
var yScale = d3.scale.linear()
.domain([0, d3.max(winPercentageByMonth, function(d){ return d.winPercentage; })])
.range([h-20, 10]); //h-20 for room at the bottom for the x axis
var xScale = d3.scale.linear()
.domain([d3.(max(winPercentageByMonth, function(d){ return d.month; }))])
.range([30, w-7]); //add 20 to the left for the y axis
//optional: radius for scattered plot chart
var rScale = d3.scale.linear()
.domain([0, d3.max(winPercentageByMonth, function(d){ return d.winPercentage; })])
.range([2, 10]);
var svg = d3.select("body").append("svg").attr({width: w, height: h});
var circleMaker = svg.selectAll("circle")
.data(winPercentageByMonth)
.enter()
.append("circle");
var circleAttributes = circleMaker.attr({
cx: function(d){return xScale(d.month);},
cy: function(d){return yScale(d.winPercentage);},
r: function(d) {
//radius for the circles
return rScale(d.winPercentage);},
"z-index": "0.2",
fill: function(d) {
if (d.winPercentage > 10 & d.month > 5) {
return "#882E00"
} else {
return "#888A00"
};
}
});
var axisPadding = 20;
// adding axis (initialize)
var xAxis = d3.svg.axis()
.scale(xScale);
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
// calling the xAxis function
svg.append("g")
.attr("class", "axis")
//transforms take in (x,y) coordinates - move x axis to the bottom
.attr("transform", "translate(0," + (h-axisPadding) + ")")
.call(xAxis);
// calling the yAxis function
svg.append("g")
.atrr("class", "axis")
.attr("transform", "translate(" + (axisPadding+10) + ",0)")
.call(yAxis);
// axis styles
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
Raw
simple_line_chart
<script type="text/javascript">
var h = 300;
var w = 400;
winPercentageByMonth = [
{"month":1, "winPercentage":20},
{"month":2, "winPercentage":14},
{"month":3, "winPercentage":20},
{"month":4, "winPercentage":21},
{"month":5, "winPercentage":15},
{"month":6, "winPercentage":22},
{"month":7, "winPercentage":9},
{"month":8, "winPercentage":6},
{"month":9, "winPercentage":23},
{"month":10, "winPercentage":7},
{"month":11, "winPercentage":40},
{"month":12, "winPercentage":45}
];
var svg = d3.select("body").append("svg").attr({width: w, height: h});
var line_one = d3.svg.line()
.x(function(d) {return d.month*33})
.y(function(d) {return h-(d.winPercentage*3);})
.interpolate("linear");
var viz = svg.append("path")
.attr({
d: line_one(withPercentageByMonth),
"stroke": "blue",
"stroke-width": 2,
"fill": "none"
});
</script>
Raw
simple_scatter_plot
<script type="text/javascript">
var h = 350;
var w = 400;
var winPercentageByMonth = [
{"month":1, "winPercentage": 20},
{"month":2, "winPercentage": 90},
{"month":3, "winPercentage": 20},
{"month":4, "winPercentage": 51},
{"month":5, "winPercentage": 15},
{"month":6, "winPercentage": 22},
{"month":7, "winPercentage": 9},
{"month":8, "winPercentage": 6},
{"month":9, "winPercentage": 23},
{"month":10, "winPercentage": 7},
{"month":11, "winPercentage": 40},
{"month":12, "winPercentage": 45},
{"month":13, "winPercentage": 20},
{"month":14, "winPercentage": 14},
{"month":15, "winPercentage": 3},
{"month":16, "winPercentage": 21},
{"month":17, "winPercentage": 15},
{"month":18, "winPercentage": 69},
{"month":19, "winPercentage": 9},
{"month":20, "winPercentage": 6},
{"month":21, "winPercentage": 110},
{"month":22, "winPercentage": 7},
{"month":23, "winPercentage": 40},
{"month":24, "winPercentage": 45},
];
var svg = d3.select("body").append("svg").attr({width: w, height: h});
var circleMaker = svg.selectAll("circle")
.data(winPercentageByMonth)
.enter()
.append("circle");
var circleAttributes = circleMaker.attr({
cx: function(d){return d.month*15},
cy: function(d){return h-(d.winPercentage);},
r: function(d) {
//radius for the circles
return Math.sqrt(d.winPercentage);
},
fill: function(d) {
if (d.winPercentage > 10 & d.month > 5) {
return "#882E00"
} else {
return "#888A00"
};
}
});
var textMaker = svg.selectAll("text")
.data(winPercentageByMonth)
.enter()
.append("text");
var textAttributes = textMaker
.attr("x", function(d) { return d.month*15; })
.attr("y", function(d) { return h-d.winPercentage; })
.text(function(d) { if (d.winPercentage >= 60) { return d.winPercentage } })
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.attr("z-index", ".3")
.attr("fill", "black");
</script>
Raw
tool_tips
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: #008ABA;
border: 0px;
border-radius: 6px;
pointer-events: none;
}
</style>
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// chain to attr chain of the element you want to add tooltip to
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("<strong>Win Percentage: </strong>" + d.winPercentage)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}).on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment