Skip to content

Instantly share code, notes, and snippets.

@ninestar09

ninestar09/_.md

Created February 25, 2016 00:26
Show Gist options
  • Save ninestar09/4041643c56cf6d03effe to your computer and use it in GitHub Desktop.
Save ninestar09/4041643c56cf6d03effe to your computer and use it in GitHub Desktop.
Download ZIP
path
Raw
_.md
Raw
config.json
{"description":"path","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"path":{"default":true,"vim":false,"emacs":false,"fontSize":12},"path.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":true,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":528,"height":570,"hide":false},"thumbnail":"http://i.imgur.com/7uig89c.png","ajax-caching":true}
Raw
inlet.js
var svg = d3.select("svg");
var data1 = d3.range(38);
var rects = svg.selectAll("rect")
.data(data1);
//var colorScale = d3.scale.category20();
/*
var colorScale = d3.scale.ordinal()
.range(["#540069",
"#0033FF",
"#00C2FF",
"#831010"
]);
*/
var colorScale = d3.scale.linear()
.domain([d3.min(data1), d3.max(data1)])
//.interpolate(d3.interpolateHsl)
//.interpolate(d3.interpolateLab)
.interpolate(d3.interpolateHcl)
.range(["#007AFF", "#FFF500"]);
rects.enter()
.append("rect")
.attr({
width: 12,
height: 100,
y: 100,
x: function(d,i) {
return i * 13 + 115;
},
fill: function(d,i) {
return colorScale(d);
}
})
Display the source blob
Display the rendered blob
Raw
inlet.svg
<svg class="tributary_svg" width="1308" height="703"><rect width="12" height="100" y="100" x="115" fill="#007aff"></rect><rect width="12" height="100" y="100" x="128" fill="#4a78ff"></rect><rect width="12" height="100" y="100" x="141" fill="#6a76ff"></rect><rect width="12" height="100" y="100" x="154" fill="#8374fe"></rect><rect width="12" height="100" y="100" x="167" fill="#9971fb"></rect><rect width="12" height="100" y="100" x="180" fill="#ac6ef8"></rect><rect width="12" height="100" y="100" x="193" fill="#be6bf4"></rect><rect width="12" height="100" y="100" x="206" fill="#ce67f0"></rect><rect width="12" height="100" y="100" x="219" fill="#de64ea"></rect><rect width="12" height="100" y="100" x="232" fill="#ec60e4"></rect><rect width="12" height="100" y="100" x="245" fill="#f95ddd"></rect><rect width="12" height="100" y="100" x="258" fill="#ff5ad6"></rect><rect width="12" height="100" y="100" x="271" fill="#ff57cf"></rect><rect width="12" height="100" y="100" x="284" fill="#ff56c6"></rect><rect width="12" height="100" y="100" x="297" fill="#ff55be"></rect><rect width="12" height="100" y="100" x="310" fill="#ff55b5"></rect><rect width="12" height="100" y="100" x="323" fill="#ff57ac"></rect><rect width="12" height="100" y="100" x="336" fill="#ff5aa3"></rect><rect width="12" height="100" y="100" x="349" fill="#ff5e9a"></rect><rect width="12" height="100" y="100" x="362" fill="#ff6390"></rect><rect width="12" height="100" y="100" x="375" fill="#ff6987"></rect><rect width="12" height="100" y="100" x="388" fill="#ff707e"></rect><rect width="12" height="100" y="100" x="401" fill="#ff7874"></rect><rect width="12" height="100" y="100" x="414" fill="#ff806b"></rect><rect width="12" height="100" y="100" x="427" fill="#ff8862"></rect><rect width="12" height="100" y="100" x="440" fill="#ff9158"></rect><rect width="12" height="100" y="100" x="453" fill="#ff994f"></rect><rect width="12" height="100" y="100" x="466" fill="#ffa246"></rect><rect width="12" height="100" y="100" x="479" fill="#ffab3c"></rect><rect width="12" height="100" y="100" x="492" fill="#ffb432"></rect><rect width="12" height="100" y="100" x="505" fill="#ffbc28"></rect><rect width="12" height="100" y="100" x="518" fill="#ffc51c"></rect><rect width="12" height="100" y="100" x="531" fill="#ffcd0e"></rect><rect width="12" height="100" y="100" x="544" fill="#ffd600"></rect><rect width="12" height="100" y="100" x="557" fill="#ffde00"></rect><rect width="12" height="100" y="100" x="570" fill="#ffe600"></rect><rect width="12" height="100" y="100" x="583" fill="#ffed00"></rect><rect width="12" height="100" y="100" x="596" fill="#fff500"></rect></svg>
Raw
path.js
var svg = d3.select("svg");
var data = [{x:0, y:8},
{x:10, y:22},
{x:20, y:20},
{x:30, y:80},
{x:40, y:34},
{x:50, y:54},
{x:60, y:54},
{x:70, y:9},
{x:80, y:128},
{x:90, y:12}
];
var line = d3.svg.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
var group = svg.append("g").attr("transform", "translate("+[50,50]+")")
var path = group.selectAll("path")
.data([data])
.enter()
.append("path")
.attr({
d: line,
fill: "none",
stroke: "#0a0a0a"
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment