Giter VIP home page Giter VIP logo

kuler-d3's Introduction

Color Wheel with D3

Reconstruction of the color wheel UI found on http://color.adobe.com (formerly known as Kuler) using D3.js.

Demo

http://benknight.github.io/kuler-d3/

Usage

By specifying a number of colors:

var colorWheel = new ColorWheel('.colorwheel');
colorWheel.bindData(5);

or, with preexisting color values:

// Use any valid tinycolor input
// More: github.com/bgrins/TinyColor
var data = [
  'red', 
  '#0ff', 
  {r: 0, g: 255, b: 0},
  {h: 220, s: 1, v: 1},
  {h: 300, s: 1, l: 0.5},
  'hsl(0, 100%, 50%)'
];

var colorWheel = new ColorWheel('.colorwheel');
colorWheel.bindData(data);

kuler-d3's People

Contributors

benknight avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kuler-d3's Issues

Create keyboard shortcuts

Ideas:

  1. Create a keyboard shortcut for turning all lights off.
  2. Create a keyboard shortcut for setting all lamps to a random color.

User input hex values do not change colors

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:

Screen.recording.2022-09-19.11.20.12.AM.webm

Storing themes in list

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?

using option object's 'initMode'

        var colorwheel = new ColorWheel({
            initMode: 'Analogous'
        });
        colorwheel.bindData(5);

error:
Uncaught ReferenceError: modes is not defined
colorwheel.js:465

Project License?

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.