benknight / kuler-d3 Goto Github PK
View Code? Open in Web Editor NEWD3.js implementation of the color wheel UI found on http://color.adobe.com, formerly known as Adobe Kuler
Home Page: http://benknight.github.io/kuler-d3
License: MIT License
D3.js implementation of the color wheel UI found on http://color.adobe.com, formerly known as Adobe Kuler
Home Page: http://benknight.github.io/kuler-d3
License: MIT License
Ideas:
Hi Ben,
You project is a great tool for creating color palettes! I noticed, however, that when a use inputs their own hex values, the colors in the palette are not updated. Here is a screen recording of the issue:
var colorwheel = new ColorWheel({
initMode: 'Analogous'
});
colorwheel.bindData(5);
error:
Uncaught ReferenceError: modes is not defined
colorwheel.js:465
Howdy Ben,
I'm working with a university on a MOOC about the fundamentals of programming and, more specifically, currently on a module on game and mobile design. One of the things we'll cover briefly (very briefly) is color theory as it applies to game and mobile design. I saw your interactive, which seems like a perfect fit to allow students to experiment with various basic color theory principles. I wanted to know, might we fork the project and embed it in the course?
The course is free, though participants can pay to receive a verified certificate.
Let me know if this is possible.
HI,
I'm trying to store current theme in a list, and later get theme from this list. The problem ist order of colors in the array. With this plugin can I read colors from wheel:
ColorWheel.extend('update', function (colorWheel) {
colorWheel.dispatch.on('markersUpdated.update', function () {
var t = colorWheel.getVisibleMarkers().data().map(function (d) {
return tinycolor({ h: d.color.h, s: d.color.s, v: d.color.v }).toHexString();
});
$timeout(function () {
$scope.current = { colors:[t[4],t[2],t[0],t[1],t[3]], mode:colorWheel.currentMode };
});
});
});
$scope.addTheme = () => {
$scope.themes.push($scope.current);
}
but when I initialize ColorWheel with
var e = document.getElementById('wheel');
e.innerHTML = '';
var x = [t.colors[2], t.colors[3], t.colors[1], t.colors[4], t.colors[0]];
var colorWheel = new ColorWheel({ initMode:t.mode||'Custom', initRoot:t.colors[0], container: e });
colorWheel.bindData(x);
colorWheel.currentMode = t.mode;
colorWheel.updateHarmony();
are colors sometimes in other sequence. Can you give me an advice?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.