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.
-
-
Save adg29/8853820 to your computer and use it in GitHub Desktop.
Focus + context zooming with D3's brush component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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