Skip to content

Instantly share code, notes, and snippets.

@ESeufert ESeufert/index.html
Last active Apr 14, 2018

Embed
What would you like to do?
A simple line chart example using D3.js
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
<title>D3.js Dashboard Introduction</title>
<script src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script>
function getMaxObjectValue(this_array, element) {
var values = [];
for (var i = 0; i < this_array.length; i++) {
values.push(Math.ceil(parseFloat(this_array[i][""+element])));
}
values.sort(function(a,b){return a-b});
return values[values.length-1];
}
function getMinObjectValue(this_array, element) {
var values = [];
for (var i = 0; i < this_array.length; i++) {
values.push(Math.floor(parseFloat(this_array[i][""+element])));
}
values.sort(function(a,b){return a-b});
return values[0];
}
$(document).ready(function() {
var data = [];
// this is our data array
var startingDate = new Date(2012, 8, 18);
// this is a date object. each of our data objects is attached to a date
for (var i = 0; i < 10; i++) {
// loop 10 times to create 10 data objects
var tmpObj = {};
// this is a temporary data object
tmpObj.date = new Date(startingDate.getFullYear(), startingDate.getMonth(), startingDate.getDate()+i);
// the data for this data object. Increment it from the starting date.
tmpObj.DAU = Math.round(Math.random() * 300);
// random value. Round it to a whole number.
data.push(tmpObj);
// push the object into our data array
}
var width = 300, height = 300;
var margin = {top: 30, right: 10, bottom: 40, left: 60}, width = width - margin.left - margin.right, height = height - margin.top - margin.bottom;
// these are graph size settings
var minDate = (data[0].date),
maxDate = data[data.length-1].date;
minObjectValue = getMinObjectValue(data, 'DAU');
maxObjectValue = getMaxObjectValue(data, 'DAU');
//create the graph object
var vis= d3.select("#metrics").append("svg")
.data(data)
.attr("class", "metrics-container")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var y = d3.scale.linear().domain([ minObjectValue - (.1 * minObjectValue) , maxObjectValue + (.1 * maxObjectValue) ]).range([height, 0]),
x = d3.time.scale().domain([minDate, maxDate]).range([0, width]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5);
vis.append("g")
.attr("class", "axis")
.call(yAxis);
vis.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
//add the axes labels
vis.append("text")
.attr("class", "axis-label")
.attr("text-anchor", "end")
.attr("x", 20)
.attr("y", height + 34)
.text('Date');
vis.append("text")
.attr("class", "axis-label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", "-3.4em")
.attr("transform", "rotate(-90)")
.text('Daily Active Users');
var line = d3.svg.line()
.x(function(d) { return x(d["date"]); })
.y(function(d) { return y(d["DAU"]); })
vis.append("svg:path")
.attr("d", line(data))
.style("stroke", function() {
return "#000000";
})
.style("fill", "none")
.style("stroke-width", "2.5");
var dataCirclesGroup = vis.append('svg:g');
var circles = dataCirclesGroup.selectAll('.data-point')
.data(data);
circles
.enter()
.append('svg:circle')
.attr('class', 'dot')
.attr('fill', function() { return "red"; })
.attr('cx', function(d) { return x(d["date"]); })
.attr('cy', function(d) { return y(d["DAU"]); })
.attr('r', function() { return 3; })
.on("mouseover", function(d) {
d3.select(this)
.attr("r", 8)
.attr("class", "dot-selected")
.transition()
.duration(750);
})
.on("mouseout", function(d) {
d3.select(this)
.attr("r", 3)
.attr("class", "dot")
.transition()
.duration(750);
});
});
</script>
<style>
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 1.5px;
}
body {
background: #FFFFFF;
background-repeat:repeat-x;
text-align: center;
font: 10px sans-serif;
}
.dot {
stroke-width: 1.5px;
}
.dot-selected {
fill: #B0C4DE;
stroke: #B0C4DE;
stroke-width: 1.5px;
}
.metrics-container {
width: auto;
height: auto;
padding: 10px 10px 10px 10px;
border-style: solid;
border-width: 1px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>A D3.js Dashboard</h1>
<div id="metrics">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.