Giter Club home page Giter Club logo

inappstorewindow's Introduction

INAppStoreWindow

Title bar and traffic light customization for NSWindow

INAppStoreWindow is an NSWindow subclass that was originally developed to mimic the appearance of the main window in the Mac App Store application introduced in OS X 10.6.6.

The MAS application has since transitioned away from this design, but INAppStoreWindow is still being actively developed to provide extensive additional customization options for NSWindow title bars.

INAppStoreWindow

Features of INAppStoreWindow:

  • No private API usage and Mac App Store friendly.
  • Fully customizable title bar view -- add subviews (toolbars, buttons, etc.) and block based drawing for custom backgrounds
  • Adjustable title bar height
  • Customization of the traffic light/fullscreen buttons for all button states.
  • Customization of the window title text.
  • Works on OS X versions 10.6-10.9
  • Compatible with full screen mode in OS X 10.7+

Usage

ARC

INAppStoreWindow now requires ARC to compile. If your project does not use ARC, compile INAppStoreWindow.m with the -fobjc-arc linker flag.

Basic Configuration

Using INAppStoreWindow is as easy as changing the class of the NSWindow in Interface Builder, or simply by creating an instance of INAppStoreWindow in code (if you're doing it programmatically). I've included a sample project demonstrating how to use INAppStoreWindow.

NOTE: The title bar height is set to the standard window title height by default. You must set the 'titleBarHeight' property in order to increase the height of the title bar.

Some people seem to be having an issue where the title bar height property is not set properly when calling the method on an NSWindow without typecasting it to the INAppStoreWindow class. If you are experiencing this issue, do something like this (using a window controller, for example):

INAppStoreWindow *aWindow = (INAppStoreWindow*)[windowController window];
aWindow.titleBarHeight = 60.0;

Adding buttons and other controls to the title bar

Adding controls and other views to the title bar is simple. This can be done either programmatically or through Interface Builder. Here are examples of both methods:

Programmatically

// This code places a 100x100 button in the center of the title bar view
NSView *titleBarView = self.window.titleBarView;
NSSize buttonSize = NSMakeSize(100.f, 100.f);
NSRect buttonFrame = NSMakeRect(NSMidX(titleBarView.bounds) - (buttonSize.width / 2.f), NSMidY(titleBarView.bounds) - (buttonSize.height / 2.f), buttonSize.width, buttonSize.height);
NSButton *button = [[NSButton alloc] initWithFrame:buttonFrame];
[button setTitle:@"A Button"];
[titleBarView addSubview:button];

Interface Builder

NOTE: Even though the content layout for the title bar can be done in Interface Builder, you still need to use the below code to display the view created in IB in the title bar.

// self.titleView is a an IBOutlet to an NSView that has been configured in IB with everything you want in the title bar
self.titleView.frame = self.window.titleBarView.bounds;
self.titleView.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
[self.window.titleBarView addSubview:self.titleView];

Centering the traffic light and full screen buttons

The vertical centering of the traffic light and full screen buttons can be controlled through two properties: centerTrafficLightButtons and centerFullScreenButton.

The traffic light buttons are vertically centered by default.

Hiding the title bar in fullscreen

You can tell INAppStoreWindow to hide when entering fullscreen mode, and reappear on exit. Just set the property hideTitleBarInFullScreenin order to hide it.

Padding the traffic lights and fullscreen buttons

The left padding of the traffic lights can be adjusted with trafficLightButtonsLeftMargin and the right padding of the fullscreen button can be adjusted with fullScreenButtonRightMargin.

Hiding the baseline (divider line between the titlebar and the content view)

The baseline divider can be hidden by setting showsBaselineSeparator to NO, the default value is YES.

Customizing traffic lights buttons

In order to customize these buttons, you would use INWindowButton class. You must create a separate instance for each button and provide your graphics for each state of the button. Currently the following states are supported:

  • Active
  • Active in not main window
  • Inactive (disabled)
  • Rollover
  • Pressed

Please refer to INWindowButton.h header documentation for more details.

Customizing window's title appearance

You can enable title drawing by setting showsTitle property to YES. For NSDocument based apps, you can enable drawing the document proxy icon by setting showsDocumentProxyIcon property to YES. You can adjust appearance using titleTextColor, inactiveTitleTextColor, titleTextShadow, and inactiveTitleTextShadow properties. Also, you can enable title drawing in fullscreen by setting showsTitleInFullscreen property to YES.

Using your own drawing code

A lot of time and effort has gone into making the custom titlebar in INAppStoreWindow function just right, it would be a shame to have to re-implement all this work just to draw your own custom title bar. So INAppStoreWindow has a titleBarDrawingBlock property that can be set to a block containing your own drawing code!

Custom Window

[self.window setTitleBarDrawingBlock:^(BOOL drawsAsMainWindow, CGRect drawingRect, CGRectEdge edge, CGPathRef clippingPath){
    // Custom drawing code!    
}];

This block gets passed some useful parameters like if the window is the main one(drawsAsMainWindow), the drawing rect of the title bar(drawingRect), and a pre-made clipping path with rounded corners at the top(clippingPath).

Setting the title bar colors

If you just want to adjust the color of the title bar without drawing the whole thing yourself, there are a few properties to help you do so:

self.window.titleBarStartColor     = [NSColor colorWithCalibratedWhite: 0.6 alpha: 1.0];
self.window.titleBarEndColor       = [NSColor colorWithCalibratedWhite: 0.9 alpha: 1.0];
self.window.baselineSeparatorColor = [NSColor colorWithCalibratedWhite: 0.2 alpha: 1.0];

self.window.inactiveTitleBarEndColor       = [NSColor colorWithCalibratedWhite: 0.95 alpha: 1.0];
self.window.inactiveTitleBarStartColor     = [NSColor colorWithCalibratedWhite: 0.8  alpha: 1.0];
self.window.inactiveBaselineSeparatorColor = [NSColor colorWithCalibratedWhite: 0.4  alpha: 1.0];

Extensions

Additional extensions for INAppStoreWindow are provided in the Extensions subfolder.

NSDocument+INAppStoreWindowFixes

Add this category to your project to fix title bar layout for document based apps in response to -[NSDocument updateChangeCount:]. This fix was separated from the main INAppStoreWindow codebase because it swizzles methods on NSDocument.

INTitlebarView+CoreUIRendering

Add this category to your project to use CoreUI to render the system default title bar gradient, noise texture, and baseline separator. This will provide the most accurate visual results. You should only add this category to your project if you intend to release outside the App Store!

If you use this category you must define the preprocessor symbol INAPPSTOREWINDOW_NO_COREUI with a value of 1 in the build configuration for your Mac App Store version in order to exclude this code because it uses private APIs and will result in rejection if included in a Mac App Store submission.

When CoreUI rendering is not available, INAppStoreWindow will emulate the rendering of the system title bar as closely as possible.

C# Port (Unofficial)

AppStoreWindow is a pure MonoMac implementation of INAppStoreWindow by @ashokgelal.

Authors

INAppStoreWindow is maintained by Indragie Karunaratne, who could not have done it without many awesome contributors.

Licensing

INAppStoreWindow is licensed under the BSD license.

inappstorewindow's People

Contributors

adib avatar andrew0 avatar andrewmichaelson avatar bdolman avatar beefon avatar codafi avatar douglasheriot avatar gcbrueckmann avatar indragie avatar indragiek avatar jakepetroules avatar js avatar junjie avatar jwilling avatar kalvish21 avatar kgn avatar kudomo avatar macguru avatar martinjbaker avatar nonamelive avatar palleas avatar pfandrade avatar rastersize avatar robin avatar sinbad avatar tomaz avatar tonyarnold avatar torinkwok avatar victorpimentel avatar yjiq150 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  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  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

inappstorewindow's Issues

Tag a New Release?

I've been attempting to use CocoaPods to grab the newest version of your project, but it keeps downloading what you've tagged as 1.0. Would you mind bumping the number?

Incorrect content view height after exiting full screen with standard 22pt title bar

Conditions:

  1. hideTitleBarInFullScreen:YES
  2. Title bar height is not set (or is even explicitly set to 22pt)

When exiting full screen mode, the contentView height is incorrect - it includes the extra height of title bar. What's happening is that the value of _cachedTitleBarHeight is zero inside windowWillExitFullScreen and this is causing the contentView height to be calculated incorrectly.

_cachedTitleBarHeight is only set inside setTitleBarHeight and crucially only if its value is not the same as the current (default?) value, hence why it remains zero.

Cannot move window by dragging titlebar and using e.g. Ctrl+1 shortcut

Ctrl+1, Ctrl+2, etc. shortcuts switch to the numbered Space. Normally, you can click-and-hold a window's titlebar (i.e. initiate drag) and then use the aforementioned shortcuts to move the window to the numbered Space.

Unfortunately this interaction does not work with INAppStoreWindows that have views in the titlebar spanning the entire titlebar's frame.

Title Bar Not visualized

When creating a INAppStoreWindow it seems that no title is present:

// The class of the window has been set in INAppStoreWindow in Interface Builder
INAppStoreWindow *aWindow = (INAppStoreWindow*)self.window;
[aWindow setExcludedFromWindowsMenu:NO];
aWindow.titleBarHeight = 40.0;
[aWindow setMinSize:NSMakeSize(100.0, aWindow.titleBarHeight)];
[aWindow setContentBorderThickness:0.0 forEdge:NSMinYEdge]; // no bottom border
[aWindow setTitle:@"AppStore Window"];

but the app has not a title!
What am I wrong?

Trafficlight Highlight Problem

First- thanks for the nice Class.

I use this in my Application and i know the bug with the Trafficlights - for me no problem, but now Apple has a Problem with this:

"....During our review of your application we noticed a minor issue. While this issue has not prevented your application from being approved, we encourage you to make the necessary changes in order to maximize the user experience of your application.

The standard close/minimize/zoom widgets do not preform as expected. While the buttons do work when the user clicks on them, if the user hovers the mouse over them they do not display the proper symbols. "X, -, +"

We encourage you to resolve this issue in your next update..."

Any ideas or solutions for this problem - i see the problem is solved after i resize the Window, but i can't find a way the fix this.

Traffic light buttons reset their positions when NSDocument becomes edited.

In document app, if the NSDocument becomes edited and "– Edited" label appears in title bar, the position of the traffic light buttons reset to default.

You can check this issue by sending updateChangeCount:NSChangeDiscardable message.

When this happens, no notification is being sent. hasUnautosavedChanges/isDocumentEdited are not KVO observable.

I can't find the workaround to resolve this issue. The only chance to do this without going into Private API is to override updateChangeCount: method and update titlebar's layout from this.

The other option is to re-layout title bar from within drawRect: (since system redraws it), but this solution is ugly.

Any ideas?

Update Podspec

I think we are ready to update the podspec, but I'd like to give the new changes a little bit of time to settle first...

ARC checks are probably pointless

So, files can be built with ARC specifically enabled or disabled for them, in spite of the main project's settings. Also, a static library can be used to segregate ARC from non-ARC code.

Given these things, it seems pointless to have all these checks whether ARC is available. If you want INAppStoreWindow to be able to be built for old systems on old tools, that's totally fine. People using INAppStoreWindow in ARC projects can simply jigger the build settings for those files, or package it in a static library. Thoughts?

Support for Cocoa AutoLayout

Support for Cocoa Autolayout would be nice. Right now, if I try to use auto layout there is a crash because it manually tries to set the frame.

crash when popup menu is used

Calling [NSMenu popUpContextMenu: withEvent: forView:]; crashes the application in - (NSMethodSignature *)methodSignatureForSelector:(SEL)selector of INAppStoreWindowDelegateProxy when no secondary NSWindowDelegate is defined. It also crashes if I associates a menu to a view as context menu and right-click on the view.

[INAppStoreWindow layoutTrafficLightsAndContent]; error

Xcode Image

My INAppStoreWindow has a NSView that covers the contentArea when trying to add subview (loaded from a nib) to that NSView I get the error above. A EXC_BAD_ACCESS on line 284 on INAPPStoreWindow.m. This happens periodically when i try to load a view from a nib and add it to the INAppStoreWindows only view (the one that covers the content area)

This is the code i am using to load the view from the nib and add it to the nsview

//At the very top of the file

import "AllVC.h"

AllVC *vc = [[AllVC alloc] initWithNibName:@"AllVC" bundle:[NSBundle mainBundle]];

[vc.view setFrame:_view.bounds];
[_view addSubview:vc.view];

Customize Bottom border and minimum window size

Hi,
I added these two lines after INAppStoreWindow creation in order to

  • Calculate the window min size in the right way (you have to consider the new title bar's size;
  • Eventually hide the bottom bar
[aWindow setMinSize:NSMakeSize(insideFrameSize.width, aWindow.titleBarHeight)];
[aWindow setContentBorderThickness:0.0 forEdge:NSMinYEdge];

where insideFrameSize is the desidered NSSize of the main window frame

Thanks for this nice gui!

Content borders doesn't draw with window styling

The content border "chrome" (the one set with setContentBorderThickness:forEdge:) is drawn with the default styling, I think it would be nice if the -titleBarDrawingBlock was also also called for content borders

Crashes when autolayout gets disabled

Hello, thank you for this great class!

I have used autolayout to design my nib but now I disabled it. The app keeps crashing on launch. When I use NSWindow instead of INAppStoreWindow it works perfectly fine.

I have posted this on stackoverflow with the crash report an the error: http://stackoverflow.com/questions/13610324/can-not-get-rid-of-autolayout-unable-to-install-constraint-on-view

I am sorry that I can not provide more details. I have tried to use the modified file from #77 but it still crashes.

I have tried to reproduce the bug with a fresh project but I could not.

Define the toolbar view in IB

It would be cool if you could create a view in IB that would be used as the toolbar view where the height of the view controlled the height of the toolbar, but could be over-written.

Title bar bug with document-based apps

I'm writing a document-based application and I would like to use your NSWindow subclass as the class of the document window. Everything works flawlessly, except for one thing: when I save the document (choosing File > Save...), the dialog appears correctly, but when I dismiss it the traffic lights button are not centered anymore.

In other words, when the Save action is triggered, the traffic lights buttons are moved to the top left corner of the window. Resizing the window immediately solves the problem.

Are there any known issues with this subclass and document-based applications?

Window movable in full screen

Basically I have set (in my XIB) the INAppStoreWindow's full screen mode to primary window. Problem is when I go full screen I can move the window around, as shown in the picture. Is it my fault, or is it because INAppStoreWindow is permitted to be dragged around even in full screen?
Screen Shot 2013-01-16 at 6 04 26 PM

INAppStoreWindowDelegateProxy prevents window delegate of receiving windowWillReturnUndoManager:

If using INAppStoreWindow and you add windowWillReturnUndoManager: to your window controller, you would expect it to get invoked at some point (like when opening the Edit menu). Currently it doesn't due to the delegate proxy.

It looks like this can be fixed by adding this method to INAppStoreWindowDelegateProxy

- (NSUndoManager*)windowWillReturnUndoManager:(NSWindow *)window
{
    if ([_secondaryDelegate respondsToSelector:@selector(windowWillReturnUndoManager:)]) {
        return [_secondaryDelegate windowWillReturnUndoManager:window];
    }
    return nil;
}

Problem with setMovableByWindowBackground:NO

If movableByWindowBackground is set to NO and the title bar height is greater than the standard height, the window cannot be dragged by clicking on any part of the titlebar that is below where the standard title bar would have normally ended.

Graphic Errors in Lion

Hi,

when do you plan on supporting Lion? Currently there's a lot wrong with INAppStoreWindow

  1. TitleBarView only gets drawn for the first 22 (?) pixel
  2. TitleBarView still uses Snow Leopard style
  3. Traffic Lights don't get repositioned

Thanks so much!

Customizing The Title Bar and Setting the Window Title

@indragiek I have to questions. My first is how can i use the setTitleDrawingBlock: method to add a custom background image to the title bar like the one in the README

The Image

But I want the Title bar to be bigger like the one in this image (also in the README)

Another Image

so to recap:
I want the title bar to be as tall as the one in the second image but have a custom background image like the one in the first image. How would do this?

Also how would i set the title of my window using INAppStoreWindow please forgive me if I ask questions that have obvious answers I am a newbie to Mac App Developing but Ive been developing for iOS for atleast three years now and I'm trying to get into Mac app developing.

Thanks for all your help

P.S.

How would I add a Navigation Bar-like control to the title bar using INAppStoreWindow like in github for mac

Github for Mac

Thanks again for all your help!

NSSavePanel accessoryView is drawn twice

I have a weird issue with my NSSavePanels. The panel draws the accessoryView twice - once before it slides down and once when it's all the way down. Unfortunately, this means if there is another modal over the top (confirmation, for example) it somehow draws the view's contents OVER this next modal.

To be honest, I don't know whether it's to do with INAppStore Window, but if it's anything else it's probably an ARC / Cocoa bug!

Any help would be greatly appreciated :)

The close widgets not function well.

To activate the close/miniaturize/zoom buttons, you still have to move the cursor into the original close widgets' frame.That means putting the cursor on the lower part of the close widgets won't activate the three buttons. Could this be fixed without using private API?

titleBarDrawingBlock isn't used after exiting full screen mode

I'm just looking at adding full screen mode to our app. I'm using a custom title bar drawing block to draw a dark title bar. However when exiting full screen mode, the title bar reverts to the default appearance (albeit with the traffic light buttons clipped off). It seems that drawRect is not being called.

Traffic lights highlight bug

Hi,

I just found a very weird bug about the traffic lights. After I launched the sample app, I moved my mouse to the traffic lights area, but the traffic lights were not highlighted. But after I moved my mouse to the original traffic lights area, they were highlighted! (see the picture here: http://d.pr/bk5M)

Once I resized the window manually, all the above problems were gone.

Could you take a look at this problem? Thank you!

Kai.

Project name needs to be changed

The App Store no longer uses this style of titlebar. The code is applicable to a lot of customization situations, so something more general would be good. Up for suggestions!

Window Title Bar issue when showing Sheet

This is the title bar i use for my window, it's height is 28: http://f.cl.ly/items/1x0U0G3i2L1K0Y321x0l/Captura%20de%20ecrã%202012-10-21,%20às%2015.39.37.png
When i try to show a sheet from the window's title bar here's what happens: http://f.cl.ly/items/2Q2E1m0j1h1B0R1c0l46/Sem%20nome.png
From the img you can see that the animation when showing the sheet is making the title bar look smaller in height when the sheet is fully displayed. The sheet is not being shown from the bottom of the title bar. How can i fix it?

INAppStoreWindow not working with Xcode 4.2 Mac OS X 10.7 SDK

This is the error i get when i try to use INAppStore in my 10.7 SDK project

unrecognized selector sent to instance 0x10011e250
2011-08-02 17:15:02.167 Randomizr for Mac[1691:707] -[NSWindow setTitleBarHeight:]: unrecognized selector sent to instance 0x10011e250

Traffic lights not displayed if TitleBarView is set to be layer-backed

In the sample app the following line causes the traffic lights to not be displayed:

[self.window.titleBarView setWantsLayer:YES];

I also found this to be the case in my own app when setting the titleBarView to a custom layer-backed NSView. Not sure what is going on at this point...

Document based apps have title hidden by titleBarView.

INAppStoreWindow draws the titleBarView on top of the standard title bar text. This prevents a document-based application from correctly showing the document name in the titlebar. This issue can be visualized by inserting:

NSRect titleBarViewFrame = window.titleBarView.frame;
titleBarViewFrame.origin.y -= 20.0;
window.titleBarView.frame = titleBarViewFrame;

in the -windowControllerDidLoadNib: method of Document.m in the SampleDocumentApp. The original title becomes visible when the titleBarView is moved downwards revealing the original title.

More customization

Hello,

First of all, thanks for this amazing class.
Would it be possible to have options to

  • Change color of the Window border
  • Change gradient colors of the bottom bar?

Thanks

Add Lion Texture to the Window Title

Though the gradient matches the Lion palette, the subtle "noise" added to Lion windows is not generated, so it is still a bit different than the AppStore window (or Chrome, or Twitter, or Reeder).

Using INAppStoreWindow in conjunction with customView class

I'm running into a bug when using the INAppStoreWindow class in conjunction with a custom class I wrote for all my views. I have tried to eliminate any bugs in my class by cutting out any code but the part that sets the views background color.

This is alle the custom code in my class:

- (void)drawRect:(NSRect)dirtyRect {
        [[NSColor redColor] set];
   NSRectFill([self bounds]);
}

The problem

The problem/bug happens when the INAppStoreWindow s being resized while containing a view that autoresizes with the window. As you can see in this picture there's a graphic flaw.

Graphic flaw

I've found the problem to be the code on line 179 in INAppStoreWindow.m.

[nc addObserver:self selector:@selector(_layoutTrafficLightsAndContent) name:NSWindowDidResizeNotification object:self];
[nc addObserver:self selector:@selector(_layoutTrafficLightsAndContent) name:NSWindowDidMoveNotification object:self]; 

The solution?

I simply cannot solve this bug by my own (I'm an epic newbiee). Could you please tell me how you have come around this problem?

Thanks a million for your great work.

Controls in _titleBarView doesn't get inactive state

I noticed that any controls added to the titleBarView doesn't get the inactive state set when the window (or app) isn't frontmost. Compare it with the Finder windows where the buttons also get a slight tint when they're in the background.

The issue can be seen here if you switch back and forth between the main window and the opened window controller: js@6f567d5

I'm not quite sure what kind of state flag (and where) NSWindow is supposed to set on its view in order for the controls to get this state?

Allow title bar gradient colors to be configurable.

It would be useful to be able to set the gradient colors for the title bar view. I know you can set a drawing block and use custom colors with that, but if all you want to do is modify the gradient you're going to have to reimplement all of the other drawing code.

In my particular case this is useful because I have Safari-like tabs underneath my title bar. The default NSWindow title bar color transitions well into the tabs, but INAppStoreWindow's is a bit too dark.

Could you upload a sample project?

Hi,

I changed the class name of my NSWindow to INAppStoreWindow, and write a line of code in the app delegate as follows:

[windowController.window setTitleBarHeight:60];

But it doesn't work at all. Nothing was changed.

Thank you.

kai.

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.