block by GerHobbelt 3173233

d3.js: load Adobe Photoshop ASE color palette file to color graph

Full Screen

Straight from Adobe Photoshop to D3.js …… ? 8

Showcases the Adobe.ASE.load.js file which can load a Photoshop ASE color palette file from the server and convert it to both a standard JS object hierarchy (which includes the group and color names) and a flattened array which can be fed directly to d3.scale.ordinal().range(...) for quick & easy as a color palette for d3.js visualizations.

Using this JavaScript software, you or your designer can concoct any color palette in tools such as Adobe Photoshop, place the exported Adobe ASE file on any server as a static file and you’re Up & Go!

What’s the use?

ZERO server-side / developer / tool effort required to convert artist-created color palettes before those are usable in your web projects, particularly when you’re using D3.js to visualize your data.

Adobe Photoshop > Swatches > Save Swatches for Exchange > upload to server (static content) > use in any d3 visualization

Any hot tips?

Certainly. Get your derrière over to the Adobe Kuler web site to peruse a zillion color palettes created by the community.

And if that’s not enough, there’s a lot of color tools out there which produce ASE files for you to download: anyone who exports color templates for use in Photoshop is producing ASE files!

Technology

The code uses the excellent jDataview.js from Christopher Chedeau.

Using this is very simple:

index.html

Adobe.ASE.load.js

HKS.Z.process.ase

LAB.colorspace.test.ase

adobe.kuler---5.Star.ase

adobe.kuler---A.Touch.of.Mink.ase

adobe.kuler---AEC.New.3.ase

adobe.kuler---Ex.Removal.Connection.ase

adobe.kuler---I.want.Color.Wheels.for.my.Car.ase

adobe.kuler---Streetlamp.ase

adobe.kuler---The.Tough.Go.Shopping.ase

adobe.kuler---a.mix.of.misty.blue.with.purple.ase

callback.palette.arg.format.md

dragon.ase

jdataview.js