Skip to content

Instantly share code, notes, and snippets.

@huyng

huyng/index.html

Forked from mbostock/.block
Last active August 29, 2015 14:19
Show Gist options
  • Save huyng/c3dd1863492175412139 to your computer and use it in GitHub Desktop.
Save huyng/c3dd1863492175412139 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>D3 Hello World</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/* colors */
/* 700 #0288d1 */
/* 500 #03a9f4 */
/* 100 #b3e5fc */
/* A400 #ff3d00; */
html {
background: #fff;
}
body {
background: #fff;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.debug {
background: red;
border-color: white;
}
textarea#data {
font-family: Courier, monospace;
font-size:14px;
border:1px solid #eee;
background:#fff;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#canvas {
top:60px;
bottom:60px;
right:60px;
left:60px;
position:absolute;
}
#canvas.edgeExtent {
padding:0px;
line-height: 0px;
}
/* BARCHART STYLE*/
.bar {
fill: rgb(30,187,166);
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: rgb(180,180,180);
shape-rendering: crispEdges;
}
text {
fill: rgb(100,100,100);
}
circle {
fill: rgba(187,30, 41, .6);
}
circle:hover {
fill: rgba(187,187, 41, 1);
}
.x.axis path {
/*display: none;*/
}
.breadcrumb {
background-color: #fff;
height:60px;
padding: 20px;
box-shadow: 0px 0px 4px rgba(0,0,0,.2);
}
.card .title {
margin: 0px 0px 20px 0px;
font-size: 1.5em;
font-weight: 300;
}
.card .description {
color: #aaa;
margin: 10px 0px 40px 0px;
font-weight:300;
}
.card {
margin: 10px;
float: left;
padding: 20px;
width: 350px;
height: 160px;
background: white;
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
border-bottom: 2px solid white;
transition: border-bottom .350s;
}
.card:hover {
box-shadow: 0px 1px 4px rgba(0,0,0, .2);
color: #0277bd;
cursor: pointer;
border-bottom: 2px solid #ff3d00;
}
.card img {
float:left;
margin: 10px 20px 10px 10px;
width: 100px;
height: 100px;
}
/* qplot */
.qplot-text {
font-size: 12px;
color: rgb(180,180,180);
}
.qplot-title {
font-size: 16px;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
Array.prototype.insertAt = function (iIndex, vItem) {
this.splice(iIndex, 0, vItem);
};
qplot = {};
qplot.Figure = function(viewport, opts) {
this.plot = {};
this.plot.margin = opts ? opts.margin : {
top: 40,
right: 40,
bottom: 60,
left:60
};
this.height = viewport.height;
this.width = viewport.width;
this.domSelector = viewport.domSelector;
this.plot.height = this.height - this.plot.margin.top - this.plot.margin.bottom;
this.plot.width = this.width - this.plot.margin.left - this.plot.margin.right;
this.plot.absCenterX = this.plot.width*.5 + this.plot.margin.left;
this.plot.absCenterY = this.plot.height*.5 + this.plot.margin.top;
this.svg = d3.select(this.domSelector)
.append("svg")
.attr("width", this.width)
.attr("height", this.height);
this.plot.svg = this.svg.append("g")
.attr("transform",
"translate("+this.plot.margin.left+","+this.plot.margin.top+")");
}
qplot.Figure.prototype.xlabel = function(lbl) {
this.svg.append("text")
.attr("class", "qplot-x-label qplot-text")
.attr("y", this.height)
.attr("dy", "-.3em")
.attr("transform", "translate(" + this.plot.absCenterX + ", 0)")
.style("text-anchor", "middle")
.text(lbl);
}
qplot.Figure.prototype.ylabel = function(lbl, svg) {
this.svg.append("text")
.attr("transform", "rotate(-90)")
.attr("class", "qplot-y-label qplot-text")
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("x", this.plot.absCenterY * -1)
.text(lbl);
}
qplot.Figure.prototype.title = function(lbl, svg) {
this.svg.append("text")
.attr("class", "qplot-title qplot-text")
.attr("y", 0)
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("x", this.plot.absCenterX)
.text(lbl);
}
var Plot = {};
Plot.name = "lineplot";
Plot.displayName = "line plot";
Plot.photo = "assets/charts/lineplot.png";
Plot.description = "Show how variables evolve over an ordered domain (e.g. time)";
Plot.render = function(rawData, viewport) {
if (!rawData) {
return false;
}
// parse data
var data = d3.csv.parseRows(rawData);
var headers = data.shift();
var addDefaultX = false;
if (headers.length === 1) {
headers.insertAt(0, "index");
addDefaultX = true;
}
var data = data.map(function(d, idx){
var o = {};
for (var i = 0; i < d.length; i++) {
if (addDefaultX) {
var key = headers[i+1];
}
else {
var key = headers[i];
}
var val = parseFloat(d[i]);
o[key] = val;
}
if (addDefaultX) {
o["index"] = idx;
}
return o;
});
console.log(data);
// setup plot dimensions
var fig = new qplot.Figure(viewport);
// setup visulization
var xScale = d3.scale.linear().range([0, fig.plot.width]);
var yScale = d3.scale.linear().range([fig.plot.height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10);
var minX = d3.min(data, function(d) { return d[headers[0]];});
var minY = d3.min(data, function(d) { return d[headers[1]];});
var maxX = d3.max(data, function(d) { return d[headers[0]];});
var maxY = d3.max(data, function(d) { return d[headers[1]];});
var padY = maxY/(maxY - minY);
var padX = maxX/(maxX - minX);
xScale.domain([ minX-0.1*padX, maxX+0.1*padX]);
yScale.domain([ minY-0.8*padY, maxY+0.8*padY]);
// X and Y axis
fig.svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+fig.plot.margin.left+","+(fig.plot.margin.top + fig.plot.height)+")")
.call(xAxis)
.selectAll("text")
.attr("transform", "rotate(-45)translate(-20,0)");
fig.svg.append("g")
.attr("class", "axis")
.attr("transform", "translate("+fig.plot.margin.left+","+fig.plot.margin.top+")")
.call(yAxis)
// X and Y Labels
fig.xlabel(headers[0]);
fig.ylabel(headers[1]);
// Geometry
// ========
// dots
fig.plot.svg.selectAll(".circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return xScale(d[headers[0]]); })
.attr("cy", function(d) { return yScale(d[headers[1]]); })
.attr("r", 4);
// connecting lines
fig.plot.svg.selectAll(".line")
.data(data.slice(0, data.length-1))
.enter()
.append("line")
.attr("stroke", "rgba(187,30, 41, .6)")
.attr("stroke-width", 2)
.attr("x1", function(d, i) { return xScale(data[i][headers[0]]); })
.attr("x2", function(d, i) { return xScale(data[i+1][headers[0]]); })
.attr("y1", function(d, i) { return yScale(data[i][headers[1]]); })
.attr("y2", function(d, i) { return yScale(data[i+1][headers[1]]);
});
return true;
};
var viewport = {
width: $("#canvas").width(),
height:$("#canvas").height(),
domSelector: "#canvas",
};
$.get("data", function(d){
console.log(d);
Plot.render(d, viewport);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment