Skip to content

Instantly share code, notes, and snippets.

View emeeks's full-sized avatar

Elijah Meeks emeeks

717 followers · 16 following
View GitHub Profile
@emeeks
emeeks / index.html
Last active August 29, 2015 14:01
Mixed rendering force layout
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mixed Canvas-SVG Rendered Force Layout</title>
<meta charset="utf-8" />
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<canvas style="background: white;500px;width:500px;position:absolute;z-index:-1;" height=500 width=500></canvas>
<svg id="graphSVG" style="height:500px;width:500px;border:1px lightgray solid;" height=500 width=500></svg>
<div id="numbers" style="position:fixed;top:20px;left:20px;"></div>
@emeeks
emeeks / d3.gnarly.js
Last active August 29, 2015 14:02
Gnarly Chart Upgrade
d3.gnarly = {};
d3.gnarly.circle = function(r,c,w,fillColor,strokeColor,selection) {
selection.append("circle").attr("class", "gnarly").attr("r", r).attr("cx", c[0]).attr("cy", c[1]).style("fill", fillColor)
r = r * 1.5;
//divide width by two to get the offset
var z = w /2;
var gCirclePoints = [];
gCirclePoints.push([c[0],c[1] + r - (r * .35)]);
@emeeks
emeeks / README.md
Last active August 29, 2015 14:03
Canvas Transform

Drawing geo paths to HTML5 canvas is really straightforward--d3.geo.path has a context() function that creates the necessary drawing code. But doing it in conjunction with transform zoom seems to require drawing by hand and accounting for current zoom.scale and zoom.translate individually for each point, which slows down canvas drawing.

The method of transferring the canvas drawing on-the-fly to an svg:image shows significant problems in Safari and is noticeably slower in Chrome than just using the canvas element.

@emeeks
emeeks / README.md
Last active August 29, 2015 14:03
Canvas Transform 2

If you want to use d3.geo.path() with transform zoom, then you simply create a new projection that is identical in settings to your current projection except with its scale multiplied by the scale of your zoom behavior and the projection's translate modified by the translate of your zoom.

You'll notice that this example, unlike the last one, does not use dataUrl to pass the canvas drawn data to an svg:image. Even though this seems practical in drawing raster data (because you can keep it in the SVG and adjust the drawing order accordingly) it is significantly slower (and sometimes buggy) than just having a canvas element on top of your SVG element.

@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
Projection Mode Rendering - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
Center on a Point - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
Changing Markers - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
Zoom to Bounding Box - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
addXYLayer - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;
@emeeks
emeeks / d3map.css
Last active August 29, 2015 14:03
d3.carto.layer - d3.carto.map
path,circle,rect,polygon,ellipse,line {
vector-effect: non-scaling-stroke;
}
svg, canvas {
top: 0;
}
#d3MapZoomBox {
position: absolute;
z-index: 10;
height: 100px;