|
var numColors = 50; |
|
|
|
var colArray = ['red','purple','blue','green', 'yellow','orange','red'] |
|
|
|
// this file should have my code for doing d3 stuff |
|
colorMods = ['default', "hsv","hsl", "lab", "lch"] |
|
|
|
var colSel = d3.select('.info').append('p') |
|
.text('Colorspace:').attr('class', 'colorspace') |
|
.append('select') |
|
.attr('class', "colorspace").style('width', '100px') |
|
.attr("onchange", 'render(this.value)') |
|
//.style('position', 'absolute') |
|
|
|
|
|
d3.select('.info').append('button').text('Spin it') |
|
.on('click', spin); |
|
|
|
d3.select('.info').append('div').html('</br> Number of colors:').attr('id', 'colin').append('input').attr('value',numColors.toString()).on('keydown', function(d){ |
|
//console.log(d3.select(this)[0][0].value) |
|
console.log(d3.select('select.colorspace')[0][0].value) |
|
console.log( d3.event.keyIdentifier) |
|
|
|
numColors = parseInt(d3.select(this)[0][0].value); // same thing console.log(this.value) |
|
|
|
// render(d3.select('select.colorspace')[0][0].value) |
|
if(d3.event.keyIdentifier === 'Enter'){ |
|
|
|
render(d3.select('select.colorspace')[0][0].value) |
|
|
|
console.log('maybe render now') |
|
} |
|
|
|
}) |
|
.style('width', '35px') |
|
|
|
function colChange(num){ |
|
numColors = num; |
|
// console.log(d3.select('.colorpace').value) |
|
} |
|
|
|
|
|
for(i in colorMods){ |
|
colSel.append('option') |
|
.attr('value', colorMods[i]).text(colorMods[i]) |
|
|
|
} |
|
|
|
var vWidth = 1000; |
|
|
|
var r = 240; |
|
|
|
|
|
var rectwi = 30; |
|
|
|
var recthi = 166.666; |
|
|
|
var rectbuf = 30; |
|
var arru = []; |
|
|
|
var color = d3.scale.category20c(); //builtin range of colors |
|
|
|
|
|
|
|
var svg = d3.select('body').append('svg').attr("height", 500).attr("width", vWidth).attr("class", "svger") |
|
|
|
console.log(arru); |
|
|
|
// ['red', 'blue'] |
|
var scale = chroma.scale( colArray) |
|
|
|
console.log(scale(.5).hex) |
|
var xtran = r + 80; |
|
|
|
render('default'); |
|
|
|
function render(colspa){ |
|
|
|
arru = []; |
|
|
|
for(i = 0; i < numColors; i++){ |
|
|
|
arru.push(i); |
|
|
|
} |
|
|
|
svg.data([arru]) |
|
|
|
d3.selectAll('g').remove(); |
|
|
|
|
|
|
|
var g = svg.append('g').attr("transform", "translate(" + xtran + "," + r + ")") |
|
.attr('id', 'wheelie'); |
|
|
|
|
|
|
|
var arc = d3.svg.arc() //this will create <path> elements for us using arc data |
|
.outerRadius(r); |
|
|
|
|
|
var pie = d3.layout.pie() //this will create arc data for us given a list of values |
|
|
|
.value(function(d) { console.log('heres the d for values'); |
|
|
|
// console.log(scale(i*(1/(numColo))).hex) |
|
return 1; |
|
//return d; |
|
}); //we must tell it out to access the value of each element in our data array |
|
|
|
|
|
var arcs = g.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet) |
|
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) |
|
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array |
|
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice) |
|
.attr("class", "slice") |
|
.sort(function(a, b){ |
|
// console.log(a,b) |
|
return a > b; |
|
}); //allow us to style things in the slices (like text) |
|
|
|
|
|
arcs.append("svg:path") |
|
.attr("fill", function(d, i) { |
|
var colval = i*(1/(numColors-1)); |
|
console.log(colval) |
|
|
|
if(colspa === 'default'){ |
|
return scale(colval).hex() |
|
} |
|
|
|
return scale.mode(colspa)(colval).hex() |
|
//return color(i); |
|
} ) |
|
//set the color for each slice to be chosen from the color function defined above |
|
.attr("d", arc) |
|
.attr('class', function(d, i){ |
|
return i |
|
}) |
|
.sort(function(d){ |
|
return i; |
|
}); |
|
|
|
} |
|
|
|
function spin(){ |
|
|
|
console.log('should be spinning') |
|
d3.select('#wheelie') |
|
.transition() |
|
.duration(2000) |
|
.attr("transform", "translate(290,290)") |
|
.attrTween("transform", tween); |
|
|
|
|
|
} |
|
|
|
|
|
function tween(d, i, a) { |
|
//return d3.interpolateString("rotate(0, 0, 0)", "rotate(390, 00, 0)"); |
|
return d3.interpolateString("translate(280,250)rotate(0)", "translate(280,250)rotate(1121060)" ); |
|
|
|
} |
