Skip to content

Instantly share code, notes, and snippets.

@mtodd
Created Apr 22, 2013
Embed
What would you like to do?
Tributary inlet
{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"patch.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"surface.scss":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"surface.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
width = 80
height = 80
radius = Math.min(width, height) / 2
xPad = 0
roundPx = 5
turnt = "#336633"
svg = d3.select(".surface").append("svg").attr("width", "100%").attr("height", "100%")
knobIns = d3.selectAll(".knob")
knobSurface = svg.append("g").classed("surface", true)
.attr("transform", "translate(" + width * knobIns.length + "," + height + ")")
containers = knobSurface.selectAll("rect")
.data(knobIns)
.enter()
.append("rect")
.classed("knob-container", true)
.attr("x", (d, i) -> i * width + xPad)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("rx", roundPx)
.attr("ry", roundPx)
.attr("fill", "none")
.attr("stroke", turnt)
.attr("stroke-width", 1)
circles = knobSurface.selectAll("circle")
.data(knobIns)
.enter()
.append("circle")
.classed("knob", true)
.attr("cx", 5)
.attr("cy", 50)
.attr("r", 12)
labels = knobSurface.selectAll("text")
.data(knobIns)
.enter()
.append("text")
.text((d) -> $(d).val())
knobArcs = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 20)
knobPies = d3.layout.pie()
.sort(null)
.value (d) -> Math.max($(d).val(), 1)
knobSurface.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
g = knobSurface.selectAll(".arc")
.data(knobPies(knobIns))
.enter().append("g")
.classed("arc", true)
g.append("path")
.attr("d", knobArcs)
.style("fill", turnt)
knobIns.attr "radius", (d) -> Math.min(width, height) / 2
var width = 80
, height = 80
, radius = Math.min(width, height) / 2
, xPad = 0
, roundPx = 5
, turnt = "#336633"
var svg = d3.select(".surface").append("svg").attr("width", "100%").attr("height", "100%")
var knobIns = d3.selectAll(".knob")
var knobSurface = svg.append("g").classed("surface", true)
.attr("transform", "translate(" + width * knobIns.length + "," + height + ")")
var containers = knobSurface.selectAll("rect")
.data(knobIns)
.enter()
.append("rect")
.classed("knob-container", true)
.attr("x", function(d, i){ return i * width + xPad })
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("rx", roundPx)
.attr("ry", roundPx)
.attr("fill", "none")
.attr("stroke", turnt)
.attr("stroke-width", 1)
var circles = knobSurface.selectAll("circle")
.data(knobIns)
.enter()
.append("circle")
.classed("knob", true)
.attr("cx", 5)
.attr("cy", 50)
.attr("r", 12)
var labels = knobSurface.selectAll("text")
.data(knobIns)
.enter()
.append("text")
.text(function(d){ return $(d).val() })
var knobArcs = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 20)
var knobPies = d3.layout.pie()
.sort(null)
.value(function(d){ return Math.max($(d).val(), 1) })
knobSurface.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
var g = knobSurface.selectAll(".arc")
.data(knobPies(knobIns))
.enter().append("g")
.classed("arc", true)
g.append("path")
.attr("d", knobArcs)
.style("fill", turnt)
knobIns.attr("radius", function(d){ return Math.min(width, height) / 2 })
<input class="knob a" type="number" min="0" max="127" value="0" />
<input class="knob d" type="number" min="0" max="127" value="60" />
<input class="knob s" type="number" min="0" max="127" value="5" />
<input class="knob r" type="number" min="0" max="127" value="10" />
<div class="surface"></div>
/*
$turnt: #336633;
$accent: #fff;
$width: 80px;
$height: 80px;
$xPad: 0px;
$roundPx: 5px;
*/
.surface {
width: 500px;
height: 300px;
background-color: #ddd;
}
.surface text {
color: #336633;
}
.surface arc path {
stroke: #fff;
}
$turnt: #336633;
$accent: #fff;
$width: 80px;
$height: 80px;
$xPad: 0px;
$roundPx: 5px;
.surface {
width: 500px;
height: 300px;
background-color: #ddd;
text {
color: $turnt;
}
.arc path {
stroke: $accent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment