Skip to content

Instantly share code, notes, and snippets.

View cool-Blue's full-sized avatar

cool-Blue

3 followers · 0 following
View GitHub Profile
@cool-Blue
cool-Blue / Selecting SVG camelCase
Last active August 29, 2015 14:22 — forked from mbostock/index.html
Cannot find camelCase element, will not render text on textPath if the element is inserted in lower case.
@cool-Blue
cool-Blue / README.md
Last active August 29, 2015 14:23 — forked from mbostock/.block
Gradient Along Stroke

This example demonstrates how to create a gradient that follows a stroke. This technique is sometimes used to indicate directionality along a curved edge, such as with hierarchical edge bundling.

To start, take any SVG path element and uniformly sample points along the path using getPointAtLength. (This method can also be used for path tweening.) Then, for each segment between adjacent points, compute the miter joint via line-line intersection. Lastly fill each segment by interpolating the start and end colors, here green to red, using the normalized length t along the path. Although each segment is a constant color, there are many segments to give the appearance of a continuous gradient.

This example uses a thin stroke in addition to filling the segments. This avoids antialiasing artifacts due to most

@cool-Blue
cool-Blue / README.md
Last active July 30, 2023 20:39 — forked from mbostock/.block
Variable width bar chart with matching, data driven, variable width wordwrap

This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.

  1. Modified wrap to acept text wrap width as a function of data and index.
  2. Made bar widths proportional to values.

Note: The second point is not recommended practice but serves to ilustrate the variable wrap feature!

@cool-Blue
cool-Blue / index.html
Last active November 23, 2015 02:36 — forked from mbostock/.block
Layered gravity with weak side constraints, mass and wind-up
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
/*margin: 200px 500px 100px 500px;*/
}
#inputs {
display: inline-block;
margin: 0 0 0 100px;
border: none;
@cool-Blue
cool-Blue / index.html
Last active August 29, 2015 14:24 — forked from MoritzStefaner/.block
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Force based label placement</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.6.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.6.0"></script>
</head>
<body>
@cool-Blue
cool-Blue / data-alt.csv
Last active August 29, 2015 14:24 — forked from d3noob/.block
Transitioning a line chart, but with data bound to the path element
date close
10-May-12 99.55
8-May-12 76.86
6-May-12 67.62
4-May-12 64.48
2-May-12 60.98
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
@cool-Blue
cool-Blue / README.md
Last active August 29, 2015 14:24 — forked from mbostock/.block

This example demonstrates using the zoom event to constrain the zoom behavior’s translation. This implementation is a bit heavy-handed, as the translate constraint is zoom-dependent.

@cool-Blue
cool-Blue / .gitignore
Last active August 29, 2015 14:25 — forked from GerHobbelt/.gitignore
d3.js: force layout; click to group/bundle nodes; multiple relations
# Editor backup files
*.bak
*~
@cool-Blue
cool-Blue / index.html
Last active August 29, 2015 14:25 — forked from bycoffe/index.html
Point-in-polygon
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
#canvas {
width: 800px;
height: 400px;
border: 1px solid #666;
}
@cool-Blue
cool-Blue / data-generator.js
Last active August 29, 2015 14:26 — forked from m99coder/data-generator.js
D3 Multiline Chart with Data Generator and Path Translation
/**
* Data Generator
*/
var DataGenerator = (function() {
// number of series
var _numberOfSeries = 1;
// number of data points
var _numberOfDataPoints = 40;