Skip to content

Instantly share code, notes, and snippets.

@adg29
Forked from mbostock/.block
Last active April 27, 2017 17:46
Show Gist options
  • Save adg29/8853820 to your computer and use it in GitHub Desktop.
Save adg29/8853820 to your computer and use it in GitHub Desktop.
Focus + context zooming with D3's brush component

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.area {
fill: steelblue;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale(d3.time.year).range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.closing); })
.y0(height)
.y1(function(d) { return y(d.years); });
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x2(d.closing); })
.y0(height2)
.y1(function(d) { return y2(d.years); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("vanishingny.csv", type, function(error, data) {
x.domain(d3.extent(data.map(function(d) { return d.closing; })));
y.domain([0, d3.max(data.map(function(d) { return d.years; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
});
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select(".area").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.closing = parseDate(d.closing);
d.years = +parseInt(d.years);
return d;
}
</script>
closing place years reason location
2014 Peels 3.5 Open since the late summer of 2010, Taavo Somer and William Tigertt's agreed to shutter after talks with the real-estate-investment group that purchased the building summer 2013 325 Bowery
2014 Gray's Papaya 28 They wanted to raise my rent to $50,000 from $30,000, owner Nicholas Gray says. 402 Sixth Avenue
2014 Milady's 70+ No longer able to survive in the gentrified Manhattan neighborhood. Building up for sale at $10M Thompson and Prince Streets
2013 The Clocktower Gallery 42 The sale of the gallery's landmarked, city-owned building to real estate development company Peebles Corporation was part of Mayor Bloomberg's plan to reduce government office space by 1.2 million square feet. The building will be turned into luxury residences 108 Leonard Street
2013 The Emerald Inn 70 100% rent increases, relocated.
2013 Silver Spurs diner 34 Major rent hike.
2013 Rawhide gay bar 34 Rent hike, to be turned into a pizza chain from California
2013 Capucine's Italian restaurant 33 Rent hike
2013 9th Street Bakery 87 38% rent hike, replaced by juice-cleanse and smoothie shop
2013 Sofia's Italian restaurant 35 Lost their lease
2013 Blarney Cove 50+ Evicted for new development
2013 Bleecker Bob's Records 46 Rent hike
2013 Joe's Dairy 60 Cost of doing business
2013 Max Fish 24 Rent increase
2013 Big Nick's Burger and Pizza Joint 51 Rent increase from $42,000 to $60,000 a month
2013 Paradise Café 20 Rent hike
2013 Splash gay bar 22 Lack of business
2013 Odessa Restaurant 48 Building sold, gastropub to move in, now for rent
2013 D'Auito's Bakery 89 Unknown
2013 Vercesi Hardware 101 Building sold to be demolished for luxury condos
2013 Ray Beauty Supply 50 Property seized by landlord
2013 Famous Roio's/Ray's Pizza 40 Building sold
2013 5Pointz, formerly Phun Phactory 20 White-washed by owner, to be demolished for luxury condo towers
2013 Stile's Market 26 Pushed out by landlord, to be demolished for luxury development
2012 H&H Bagels 40 Last location evicted
2012 Lenox Lounge 63 Landlord doubled the rent, given to upscale restaurateur
2012 The Stage Deli 75 Rent increase
2012 Village Chess Shop 40 Closed due to lack of business
2012 El Faro 85 Possibly evicted? Needed to raise 80K to correct code violations "Apparently, the restaurant has received calls and emails of support from customers around the world since it closed. El Faro still has a devoted clientele, noting,"People have their packages delivered to us. It's like an extension of their house...We delivered food to some of our elderly [customers] and even brought them milk and bread if they couldn't leave home." 822 Greenwich St
2012 University Diner 60 Evicted
2012 Partners & Crime Bookshop 18 Closed due to lack of business
2012 Lafayette French Bakery 30+ Evicted
2012 Movie Star News 73 Rent hiked, turned into a luxury bathroom fixture store
2012 Colony Records 60 Closed when the new landlord, Stonehenge Properties, quintupled the rent to $5 million per month
2012 Lascoff Pharmacy 113 Closed and gutted
2012 Prime Burger 47 Lost lease when building sold
2012 Atlas Barber School 64 Lost lease due to hiked rent, now a UPS
2012 Bill's Gay 90s 88 Lost its lease to a trendy restaurateur, gutted and upscaled
2012 Chelsea Gallery Diner 30 Forced out of Chelsea
2012 World of Video 29 Lost its lease
2012 A Clean Well-Lighted Place 36 Now an upscale boutique
2012 Manganaro's Grosseria 119 Sold and gutted for a more upscale restaurant
2012 McCullough's Kiddie Park, Coney Island 50 Lost their lease
2012 Kenny's Castaway's 45 Rising cost of business
2012 The Holiday Cocktail Lounge 47 Sold and gutted for a gastropub
2012 Rocco Ristorante 90 Lost lease to trendy restaurateurs, gutted and upscaled
2011 Elaine's 48 Death of owner
2011 Life Café 30 Dispute with landlord over repairs
2011 Chelsea Hotel 127 Sold and closed to guests
2011 Brownfeld Auto 120 Evicted when landlord decided to sell for luxury High Line development
2011 Mars Bar 26 Demolished to build luxury condos, to become a bank
2011 The Original Ray's Pizza 52 Legal dispute with landlord
2011 Auggie's Coffee shop 45 Could not afford the rent
2011 Polonia 22 Probable rent hike
2011 Gansevoort Pumping Station, Premier Veal plant 105 Evicted and demolished for new Whitney Museum and High Line headquarters
2010 Carnegie Hall Studios 116 1894-2010, All 180 historic studios have been demolished, including sawtooth skylights on the roof of the building (meant for painters from the Arts Student League),replaced by the "Sanford and Joan Weill Rooftop Terrace".
2010 The Starlight Lounge 50+ Eviction
2010 New York Doll Hospital 109 Death of owner, no successor
2010 St. Vincent's Hospital 161 Closed and demolished for a billion-dollar luxury condo project
2010 Carmine's at the Seaport 107 Closed when landlord raised the rent to $13,000 a month
2010 Fedora 58 Closed by owner in old age, taken over by a trendy restaurateur, gutted and upscaled
2010 Shore Hotel 107 Coney Island hotel, demolished by Thor Equities to make room for new construction
2010 Guss' Pickles 100 Left the Lower East Side due to rising neighborhood rents
2010 Empire Diner 34 Lost their lease
2010 Gino 65 Closed when landlord raised rent $8,000 per month, turned into a cupcake bakery chain
2010 Telephone Bar and Grill 22 Sold and replaced with a frat bar
2010 JJ's Navy Yard bar 103 Evicted, sold, and demolished, replaced by hipster coffee
2010 Skyline Books 20 Probable rent hike, replaced with a body waxing salon
2009 Biography Bookshop 25 Rent hike, owners relocated as BookBook
2009 Provincetown Playhouse 91 Demolished by NYU
2009 Manny's Music 74 Bought out by Sam Ash, also later shuttered
2009 Café Des Artistes 92 Bankruptcy
2009 Tavern on the Green 75 Bankruptcy
2009 Love Saves the Day 43 Closed in part due to high rent
2009 Amato Opera House 61 Closed by the owner in old age, building sold
2009 P&G Bar 67 Lost lease, gutted and replaced by upscale cafe
2009 Joe Jr.'s diner 35 Lost their lease, now upscale coffee
2009 Arnold Hatters 50 Unable to make rent after original location taken by eminent domain to build New York Times tower, replaced by 7-Eleven
2008 Nikos Magazine & Smoke Shop 31 Closing due to high rent 11th Street and Sixth Avenue
2008 BOK LEI TAT SUPPLIES INC. 40+ Rent hike for Martial Arts supplies store in Chinatown 77 Mulberry St New York, NY 10013
2008 Cheyenne Diner 68 Lost its lease, moved away
2008 M&G Diner 40 Sold and shuttered
2008 Vesuvio Bakery 88 Sold
2008 Florent 24 Closed due to rent hike, from $6,000 to $50,000 per month
2008 Shea Stadium 44 Demolished and replaced with upscale, corporate-named Citi-Field
2008 Yankee Stadium 85 Demolished and replaced with an upscale ballpark
2008 Cafe Figaro 39 Lost their lease, became fast-food burrito chain and bank
2008 Chez Brigitte 50 Rent doubled, replaced by frozen yogurt chain
2008 Bobby's Happy House 61 Building sold for a big-box chain store
2008 The Minetta Tavern 71 Landlord raised the rent, gave lease to upscale restaurateur
2008 Donnell Library 53 Closed and demolished for a luxury hotel
2008 Astroland amusement park 46 Sold to Thor Equities for redevelopment
2008 Fazil's Times Square Studio 73 Closed for building demolition
2008 Jefferson Market 79 Money trouble, now sales office for billion-dollar luxury condo project at St. Vincent's
2007 Coliseum Books 33 Rent too high
2007 Rose's Turn 56 Family sold building for $3.5 million
2007 Teresa's Polish restaurant 22 Rent hike
2007 Sucelt Coffee 31 Rent hike
2007 Donuts Coffee Shop 32 Evicted
2007 Copeland's 49 Victim of gentrification
2007 Kurowycky Meats 52 Closed due to lack of business
2007 Moondance Diner 74 Closed for condo development, moved to Wyoming
2007 Jade Mountain 76 Death of owner
2007 Chumley's 79 Collapsed
2007 The Playpen Theater 100 Sold and demolished for luxury hotel tower and Shake Shack chain
2007 Gertel's Bakery 93 Sold, demolished for condo development
2007 Dojo's Restaurant 33 Rent hike
2007 The Roxy 29 Shut down for conversion to luxury condos
2007 Limelight 24 Shuttered by police, reopened, eventually closed and converted to luxury shopping mall
2006 CBGBs 33 Rent dispute, replaced by John Varvatos upscale boutique
2006 The Second Avenue Deli 52 Rent increase, replaced with a bank
2006 McHale's Bar 62 Demolished for luxury condo tower
2006 Gotham Book Mart 86 Evicted
2006 Cedar Tavern 140 Demolished for condos, replaced with a body waxing salon
2005 Fulton Fish Market 170 Moved to the Bronx due to “the creeping conversion of Manhattan into a monstrous mall” --NY Times
2005 Variety Photoplays Theater 108 Demolished by the Toll Brothers for a 21-story condo tower
2004 Domino Sugar Factory 150 Declining business, to be converted to luxury condos
2004 Jon Vie Bakery 42 “a victim of soaring rents in a neighborhood populated as much by bankers as by bohemians.” --NY Times
2004 The original Kim's Video 17 ?
2004 The Bottom Line 30 NYU raised the rent
2004 A. Zito & Sons Bakery 80 Rising cost of business
2002 Madison Avenue Bookshop 30 Lack of business
2002 Ratner's 97 Cost of doing business
2001 The Grand Tocino 82 an old style Italain restaurant on Thompson, had an incredible clientele of neighborhood people and local painters and writers. W. H. Auden went there for dinner every night during one period. 1919-2001
2001 Wetlands 13 Building sold for luxury condos
2000 McBurney YMCA 94 Sold and replaced by luxury condos and a David Barton gym. This Y, reputedly the inspiration for the famous song 23rd Street & 8th Ave
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment