Skip to content

Instantly share code, notes, and snippets.

@lmatteis

lmatteis/README.md

Last active September 28, 2019 15:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lmatteis/efd9be8f472e673eef6ce9d1951256a9 to your computer and use it in GitHub Desktop.
Save lmatteis/efd9be8f472e673eef6ce9d1951256a9 to your computer and use it in GitHub Desktop.
Download ZIP
Generic interactive D3.js charts using crossfilter.js
Raw
README.md

Try clicking on the various charts. All interactions are handled by crossfilter. Multi selection is also possible using crossfilter. This also shows how one can create reusable charts that support generic dimensions and groups.

Raw
data.js
var data =[{"topic":"BMW","age":"18-24","gender":"male","interactions":25000,"key":"BMW","positiveInteractions":25000},{"topic":"BMW","age":"18-24","gender":"female","interactions":-6400,"key":"BMW","positiveInteractions":6400},{"topic":"BMW","age":"25-34","gender":"male","interactions":21400,"key":"BMW","positiveInteractions":21400},{"topic":"BMW","age":"25-34","gender":"female","interactions":-6800,"key":"BMW","positiveInteractions":6800},{"topic":"BMW","age":"35-44","gender":"male","interactions":12800,"key":"BMW","positiveInteractions":12800},{"topic":"BMW","age":"35-44","gender":"female","interactions":-4900,"key":"BMW","positiveInteractions":4900},{"topic":"BMW","age":"45-54","gender":"male","interactions":5800,"key":"BMW","positiveInteractions":5800},{"topic":"BMW","age":"45-54","gender":"female","interactions":-2900,"key":"BMW","positiveInteractions":2900},{"topic":"BMW","age":"55-64","gender":"male","interactions":2100,"key":"BMW","positiveInteractions":2100},{"topic":"BMW","age":"55-64","gender":"female","interactions":-1300,"key":"BMW","positiveInteractions":1300},{"topic":"BMW","age":"65+","gender":"male","interactions":1200,"key":"BMW","positiveInteractions":1200},{"topic":"BMW","age":"65+","gender":"female","interactions":-700,"key":"BMW","positiveInteractions":700},{"topic":"Honda Accord","age":"25-34","gender":"female","interactions":-10800,"key":"Honda Accord","positiveInteractions":10800},{"topic":"Honda Accord","age":"25-34","gender":"male","interactions":3600,"key":"Honda Accord","positiveInteractions":3600},{"topic":"Honda Accord","age":"35-44","gender":"female","interactions":-7800,"key":"Honda Accord","positiveInteractions":7800},{"topic":"Honda Accord","age":"35-44","gender":"male","interactions":2300,"key":"Honda Accord","positiveInteractions":2300},{"topic":"Honda Accord","age":"18-24","gender":"female","interactions":-6300,"key":"Honda Accord","positiveInteractions":6300},{"topic":"Honda Accord","age":"18-24","gender":"male","interactions":2200,"key":"Honda Accord","positiveInteractions":2200},{"topic":"Honda Accord","age":"45-54","gender":"female","interactions":-5000,"key":"Honda Accord","positiveInteractions":5000},{"topic":"Honda Accord","age":"45-54","gender":"male","interactions":1100,"key":"Honda Accord","positiveInteractions":1100},{"topic":"Honda Accord","age":"55-64","gender":"female","interactions":-3300,"key":"Honda Accord","positiveInteractions":3300},{"topic":"Honda Accord","age":"55-64","gender":"male","interactions":600,"key":"Honda Accord","positiveInteractions":600},{"topic":"Honda Accord","age":"65+","gender":"female","interactions":-2100,"key":"Honda Accord","positiveInteractions":2100},{"topic":"Honda Accord","age":"65+","gender":"male","interactions":400,"key":"Honda Accord","positiveInteractions":400},{"topic":"Jason Vargas","age":"25-34","gender":"female","interactions":-6200,"key":"Jason Vargas","positiveInteractions":6200},{"topic":"Jason Vargas","age":"25-34","gender":"male","interactions":1200,"key":"Jason Vargas","positiveInteractions":1200},{"topic":"Jason Vargas","age":"18-24","gender":"female","interactions":-4200,"key":"Jason Vargas","positiveInteractions":4200},{"topic":"Jason Vargas","age":"18-24","gender":"male","interactions":900,"key":"Jason Vargas","positiveInteractions":900},{"topic":"Jason Vargas","age":"35-44","gender":"female","interactions":-3900,"key":"Jason Vargas","positiveInteractions":3900},{"topic":"Jason Vargas","age":"35-44","gender":"male","interactions":800,"key":"Jason Vargas","positiveInteractions":800},{"topic":"Jason Vargas","age":"45-54","gender":"female","interactions":-2600,"key":"Jason Vargas","positiveInteractions":2600},{"topic":"Jason Vargas","age":"45-54","gender":"male","interactions":400,"key":"Jason Vargas","positiveInteractions":400},{"topic":"Jason Vargas","age":"55-64","gender":"female","interactions":-1900,"key":"Jason Vargas","positiveInteractions":1900},{"topic":"Jason Vargas","age":"55-64","gender":"male","interactions":200,"key":"Jason Vargas","positiveInteractions":200},{"topic":"Jason Vargas","age":"65+","gender":"female","interactions":-1300,"key":"Jason Vargas","positiveInteractions":1300},{"topic":"Jason Vargas","age":"65+","gender":"male","interactions":100,"key":"Jason Vargas","positiveInteractions":100},{"topic":"AMBER Alert","age":"25-34","gender":"female","interactions":-6300,"key":"AMBER Alert","positiveInteractions":6300},{"topic":"AMBER Alert","age":"25-34","gender":"male","interactions":1300,"key":"AMBER Alert","positiveInteractions":1300},{"topic":"AMBER Alert","age":"35-44","gender":"female","interactions":-4400,"key":"AMBER Alert","positiveInteractions":4400},{"topic":"AMBER Alert","age":"35-44","gender":"male","interactions":900,"key":"AMBER Alert","positiveInteractions":900},{"topic":"AMBER Alert","age":"18-24","gender":"female","interactions":-3500,"key":"AMBER Alert","positiveInteractions":3500},{"topic":"AMBER Alert","age":"18-24","gender":"male","interactions":700,"key":"AMBER Alert","positiveInteractions":700},{"topic":"AMBER Alert","age":"45-54","gender":"female","interactions":-2600,"key":"AMBER Alert","positiveInteractions":2600},{"topic":"AMBER Alert","age":"45-54","gender":"male","interactions":400,"key":"AMBER Alert","positiveInteractions":400},{"topic":"AMBER Alert","age":"55-64","gender":"female","interactions":-1800,"key":"AMBER Alert","positiveInteractions":1800},{"topic":"AMBER Alert","age":"55-64","gender":"male","interactions":200,"key":"AMBER Alert","positiveInteractions":200},{"topic":"AMBER Alert","age":"65+","gender":"female","interactions":-1100,"key":"AMBER Alert","positiveInteractions":1100},{"topic":"AMBER Alert","age":"65+","gender":"male","interactions":200,"key":"AMBER Alert","positiveInteractions":200},{"topic":"Honda Civic","age":"18-24","gender":"male","interactions":6300,"key":"Honda Civic","positiveInteractions":6300},{"topic":"Honda Civic","age":"18-24","gender":"female","interactions":-1900,"key":"Honda Civic","positiveInteractions":1900},{"topic":"Honda Civic","age":"25-34","gender":"male","interactions":6000,"key":"Honda Civic","positiveInteractions":6000},{"topic":"Honda Civic","age":"25-34","gender":"female","interactions":-1800,"key":"Honda Civic","positiveInteractions":1800},{"topic":"Honda Civic","age":"35-44","gender":"male","interactions":2500,"key":"Honda Civic","positiveInteractions":2500},{"topic":"Honda Civic","age":"35-44","gender":"female","interactions":-1200,"key":"Honda Civic","positiveInteractions":1200},{"topic":"Honda Civic","age":"45-54","gender":"male","interactions":800,"key":"Honda Civic","positiveInteractions":800},{"topic":"Honda Civic","age":"45-54","gender":"female","interactions":-600,"key":"Honda Civic","positiveInteractions":600},{"topic":"Honda Civic","age":"55-64","gender":"female","interactions":-300,"key":"Honda Civic","positiveInteractions":300},{"topic":"Honda Civic","age":"55-64","gender":"male","interactions":200,"key":"Honda Civic","positiveInteractions":200},{"topic":"Honda Civic","age":"65+","gender":"male","interactions":200,"key":"Honda Civic","positiveInteractions":200},{"topic":"Honda Civic","age":"65+","gender":"female","interactions":-100,"key":"Honda Civic","positiveInteractions":100},{"topic":"Ford Mustang","age":"18-24","gender":"male","interactions":5900,"key":"Ford Mustang","positiveInteractions":5900},{"topic":"Ford Mustang","age":"18-24","gender":"female","interactions":-1000,"key":"Ford Mustang","positiveInteractions":1000},{"topic":"Ford Mustang","age":"25-34","gender":"male","interactions":5600,"key":"Ford Mustang","positiveInteractions":5600},{"topic":"Ford Mustang","age":"25-34","gender":"female","interactions":-900,"key":"Ford Mustang","positiveInteractions":900},{"topic":"Ford Mustang","age":"35-44","gender":"male","interactions":3300,"key":"Ford Mustang","positiveInteractions":3300},{"topic":"Ford Mustang","age":"35-44","gender":"female","interactions":-700,"key":"Ford Mustang","positiveInteractions":700},{"topic":"Ford Mustang","age":"45-54","gender":"male","interactions":2000,"key":"Ford Mustang","positiveInteractions":2000},{"topic":"Ford Mustang","age":"45-54","gender":"female","interactions":-600,"key":"Ford Mustang","positiveInteractions":600},{"topic":"Ford Mustang","age":"55-64","gender":"male","interactions":1000,"key":"Ford Mustang","positiveInteractions":1000},{"topic":"Ford Mustang","age":"55-64","gender":"female","interactions":-300,"key":"Ford Mustang","positiveInteractions":300},{"topic":"Ford Mustang","age":"65+","gender":"male","interactions":500,"key":"Ford Mustang","positiveInteractions":500},{"topic":"Ford Mustang","age":"65+","gender":"female","interactions":-100,"key":"Ford Mustang","positiveInteractions":100},{"topic":"Ford Motor Company","age":"18-24","gender":"male","interactions":6900,"key":"Ford Motor Company","positiveInteractions":6900},{"topic":"Ford Motor Company","age":"18-24","gender":"female","interactions":-800,"key":"Ford Motor Company","positiveInteractions":800},{"topic":"Ford Motor Company","age":"25-34","gender":"male","interactions":5700,"key":"Ford Motor Company","positiveInteractions":5700},{"topic":"Ford Motor Company","age":"25-34","gender":"female","interactions":-1000,"key":"Ford Motor Company","positiveInteractions":1000},{"topic":"Ford Motor Company","age":"35-44","gender":"male","interactions":3100,"key":"Ford Motor Company","positiveInteractions":3100},{"topic":"Ford Motor Company","age":"35-44","gender":"female","interactions":-800,"key":"Ford Motor Company","positiveInteractions":800},{"topic":"Ford Motor Company","age":"45-54","gender":"male","interactions":1500,"key":"Ford Motor Company","positiveInteractions":1500},{"topic":"Ford Motor Company","age":"45-54","gender":"female","interactions":-500,"key":"Ford Motor Company","positiveInteractions":500},{"topic":"Ford Motor Company","age":"55-64","gender":"male","interactions":700,"key":"Ford Motor Company","positiveInteractions":700},{"topic":"Ford Motor Company","age":"55-64","gender":"female","interactions":-300,"key":"Ford Motor Company","positiveInteractions":300},{"topic":"Ford Motor Company","age":"65+","gender":"male","interactions":400,"key":"Ford Motor Company","positiveInteractions":400},{"topic":"Ford Motor Company","age":"65+","gender":"female","interactions":-100,"key":"Ford Motor Company","positiveInteractions":100},{"topic":"Ford GT","age":"18-24","gender":"male","interactions":7500,"key":"Ford GT","positiveInteractions":7500},{"topic":"Ford GT","age":"18-24","gender":"female","interactions":-300,"key":"Ford GT","positiveInteractions":300},{"topic":"Ford GT","age":"25-34","gender":"male","interactions":4300,"key":"Ford GT","positiveInteractions":4300},{"topic":"Ford GT","age":"25-34","gender":"female","interactions":-200,"key":"Ford GT","positiveInteractions":200},{"topic":"Ford GT","age":"35-44","gender":"male","interactions":2800,"key":"Ford GT","positiveInteractions":2800},{"topic":"Ford GT","age":"35-44","gender":"female","interactions":-200,"key":"Ford GT","positiveInteractions":200},{"topic":"Ford GT","age":"45-54","gender":"male","interactions":1800,"key":"Ford GT","positiveInteractions":1800},{"topic":"Ford GT","age":"45-54","gender":"female","interactions":-100,"key":"Ford GT","positiveInteractions":100},{"topic":"Ford GT","age":"55-64","gender":"male","interactions":400,"key":"Ford GT","positiveInteractions":400},{"topic":"Ford GT","age":"65+","gender":"male","interactions":200,"key":"Ford GT","positiveInteractions":200},{"topic":"Cars","age":"25-34","gender":"male","interactions":3300,"key":"Cars","positiveInteractions":3300},{"topic":"Cars","age":"25-34","gender":"female","interactions":-1700,"key":"Cars","positiveInteractions":1700},{"topic":"Cars","age":"18-24","gender":"male","interactions":2800,"key":"Cars","positiveInteractions":2800},{"topic":"Cars","age":"18-24","gender":"female","interactions":-1000,"key":"Cars","positiveInteractions":1000},{"topic":"Cars","age":"35-44","gender":"male","interactions":1900,"key":"Cars","positiveInteractions":1900},{"topic":"Cars","age":"35-44","gender":"female","interactions":-1500,"key":"Cars","positiveInteractions":1500},{"topic":"Cars","age":"45-54","gender":"male","interactions":1100,"key":"Cars","positiveInteractions":1100},{"topic":"Cars","age":"45-54","gender":"female","interactions":-900,"key":"Cars","positiveInteractions":900},{"topic":"Cars","age":"55-64","gender":"male","interactions":600,"key":"Cars","positiveInteractions":600},{"topic":"Cars","age":"55-64","gender":"female","interactions":-500,"key":"Cars","positiveInteractions":500},{"topic":"Cars","age":"65+","gender":"male","interactions":300,"key":"Cars","positiveInteractions":300},{"topic":"Cars","age":"65+","gender":"female","interactions":-200,"key":"Cars","positiveInteractions":200},{"topic":"Honda","age":"25-34","gender":"male","interactions":4200,"key":"Honda","positiveInteractions":4200},{"topic":"Honda","age":"25-34","gender":"female","interactions":-800,"key":"Honda","positiveInteractions":800},{"topic":"Honda","age":"18-24","gender":"male","interactions":4000,"key":"Honda","positiveInteractions":4000},{"topic":"Honda","age":"18-24","gender":"female","interactions":-600,"key":"Honda","positiveInteractions":600},{"topic":"Honda","age":"35-44","gender":"male","interactions":1700,"key":"Honda","positiveInteractions":1700},{"topic":"Honda","age":"35-44","gender":"female","interactions":-500,"key":"Honda","positiveInteractions":500},{"topic":"Honda","age":"45-54","gender":"male","interactions":700,"key":"Honda","positiveInteractions":700},{"topic":"Honda","age":"45-54","gender":"female","interactions":-300,"key":"Honda","positiveInteractions":300},{"topic":"Honda","age":"55-64","gender":"male","interactions":200,"key":"Honda","positiveInteractions":200},{"topic":"Honda","age":"55-64","gender":"female","interactions":-100,"key":"Honda","positiveInteractions":100},{"topic":"Honda","age":"65+","gender":"male","interactions":100,"key":"Honda","positiveInteractions":100},{"topic":"Honda","age":"65+","gender":"female","interactions":-100,"key":"Honda","positiveInteractions":100},{"topic":"Ford Fiesta","age":"25-34","gender":"male","interactions":4200,"key":"Ford Fiesta","positiveInteractions":4200},{"topic":"Ford Fiesta","age":"25-34","gender":"female","interactions":-400,"key":"Ford Fiesta","positiveInteractions":400},{"topic":"Ford Fiesta","age":"18-24","gender":"male","interactions":3400,"key":"Ford Fiesta","positiveInteractions":3400},{"topic":"Ford Fiesta","age":"18-24","gender":"female","interactions":-300,"key":"Ford Fiesta","positiveInteractions":300},{"topic":"Ford Fiesta","age":"35-44","gender":"male","interactions":1500,"key":"Ford Fiesta","positiveInteractions":1500},{"topic":"Ford Fiesta","age":"35-44","gender":"female","interactions":-200,"key":"Ford Fiesta","positiveInteractions":200},{"topic":"Ford Fiesta","age":"45-54","gender":"male","interactions":300,"key":"Ford Fiesta","positiveInteractions":300},{"topic":"Ford Fiesta","age":"45-54","gender":"female","interactions":-200,"key":"Ford Fiesta","positiveInteractions":200},{"topic":"Sedan, France","age":"25-34","gender":"male","interactions":3900,"key":"Sedan, France","positiveInteractions":3900},{"topic":"Sedan, France","age":"25-34","gender":"female","interactions":-100,"key":"Sedan, France","positiveInteractions":100},{"topic":"Sedan, France","age":"18-24","gender":"male","interactions":3300,"key":"Sedan, France","positiveInteractions":3300},{"topic":"Sedan, France","age":"18-24","gender":"female","interactions":-100,"key":"Sedan, France","positiveInteractions":100},{"topic":"Sedan, France","age":"35-44","gender":"male","interactions":1400,"key":"Sedan, France","positiveInteractions":1400},{"topic":"Sedan, France","age":"35-44","gender":"female","interactions":-200,"key":"Sedan, France","positiveInteractions":200},{"topic":"Sedan, France","age":"45-54","gender":"male","interactions":300,"key":"Sedan, France","positiveInteractions":300},{"topic":"Sedan, France","age":"45-54","gender":"female","interactions":-100,"key":"Sedan, France","positiveInteractions":100},{"topic":"Monterey County, California","age":"25-34","gender":"female","interactions":-2500,"key":"Monterey County, California","positiveInteractions":2500},{"topic":"Monterey County, California","age":"25-34","gender":"male","interactions":400,"key":"Monterey County, California","positiveInteractions":400},{"topic":"Monterey County, California","age":"35-44","gender":"female","interactions":-1600,"key":"Monterey County, California","positiveInteractions":1600},{"topic":"Monterey County, California","age":"35-44","gender":"male","interactions":300,"key":"Monterey County, California","positiveInteractions":300},{"topic":"Monterey County, California","age":"18-24","gender":"female","interactions":-1500,"key":"Monterey County, California","positiveInteractions":1500},{"topic":"Monterey County, California","age":"18-24","gender":"male","interactions":300,"key":"Monterey County, California","positiveInteractions":300},{"topic":"Monterey County, California","age":"45-54","gender":"female","interactions":-1000,"key":"Monterey County, California","positiveInteractions":1000},{"topic":"Monterey County, California","age":"45-54","gender":"male","interactions":100,"key":"Monterey County, California","positiveInteractions":100},{"topic":"Monterey County, California","age":"55-64","gender":"female","interactions":-700,"key":"Monterey County, California","positiveInteractions":700},{"topic":"Monterey County, California","age":"65+","gender":"female","interactions":-400,"key":"Monterey County, California","positiveInteractions":400},{"topic":"Jacob Vargas","age":"25-34","gender":"female","interactions":-1700,"key":"Jacob Vargas","positiveInteractions":1700},{"topic":"Jacob Vargas","age":"25-34","gender":"male","interactions":200,"key":"Jacob Vargas","positiveInteractions":200},{"topic":"Jacob Vargas","age":"35-44","gender":"female","interactions":-1400,"key":"Jacob Vargas","positiveInteractions":1400},{"topic":"Jacob Vargas","age":"35-44","gender":"male","interactions":200,"key":"Jacob Vargas","positiveInteractions":200},{"topic":"Jacob Vargas","age":"45-54","gender":"female","interactions":-900,"key":"Jacob Vargas","positiveInteractions":900},{"topic":"Jacob Vargas","age":"45-54","gender":"male","interactions":100,"key":"Jacob Vargas","positiveInteractions":100},{"topic":"Jacob Vargas","age":"18-24","gender":"female","interactions":-600,"key":"Jacob Vargas","positiveInteractions":600},{"topic":"Jacob Vargas","age":"55-64","gender":"female","interactions":-600,"key":"Jacob Vargas","positiveInteractions":600},{"topic":"Jacob Vargas","age":"65+","gender":"female","interactions":-300,"key":"Jacob Vargas","positiveInteractions":300},{"topic":"Daimler DS420","age":"18-24","gender":"male","interactions":1300,"key":"Daimler DS420","positiveInteractions":1300},{"topic":"Daimler DS420","age":"25-34","gender":"male","interactions":1000,"key":"Daimler DS420","positiveInteractions":1000},{"topic":"Daimler DS420","age":"25-34","gender":"female","interactions":-100,"key":"Daimler DS420","positiveInteractions":100},{"topic":"Daimler DS420","age":"35-44","gender":"male","interactions":900,"key":"Daimler DS420","positiveInteractions":900},{"topic":"Daimler DS420","age":"45-54","gender":"male","interactions":600,"key":"Daimler DS420","positiveInteractions":600},{"topic":"Daimler DS420","age":"55-64","gender":"male","interactions":300,"key":"Daimler DS420","positiveInteractions":300},{"topic":"Daimler DS420","age":"65+","gender":"male","interactions":100,"key":"Daimler DS420","positiveInteractions":100},{"topic":"Ferrari 328","age":"18-24","gender":"male","interactions":1300,"key":"Ferrari 328","positiveInteractions":1300},{"topic":"Ferrari 328","age":"25-34","gender":"male","interactions":1000,"key":"Ferrari 328","positiveInteractions":1000},{"topic":"Ferrari 328","age":"25-34","gender":"female","interactions":-100,"key":"Ferrari 328","positiveInteractions":100},{"topic":"Ferrari 328","age":"35-44","gender":"male","interactions":900,"key":"Ferrari 328","positiveInteractions":900},{"topic":"Ferrari 328","age":"45-54","gender":"male","interactions":600,"key":"Ferrari 328","positiveInteractions":600},{"topic":"Ferrari 328","age":"55-64","gender":"male","interactions":300,"key":"Ferrari 328","positiveInteractions":300},{"topic":"Ferrari 328","age":"65+","gender":"male","interactions":100,"key":"Ferrari 328","positiveInteractions":100},{"topic":"Jaguar XJ","age":"18-24","gender":"male","interactions":1300,"key":"Jaguar XJ","positiveInteractions":1300},{"topic":"Jaguar XJ","age":"25-34","gender":"male","interactions":1000,"key":"Jaguar XJ","positiveInteractions":1000},{"topic":"Jaguar XJ","age":"25-34","gender":"female","interactions":-100,"key":"Jaguar XJ","positiveInteractions":100},{"topic":"Jaguar XJ","age":"35-44","gender":"male","interactions":900,"key":"Jaguar XJ","positiveInteractions":900},{"topic":"Jaguar XJ","age":"45-54","gender":"male","interactions":600,"key":"Jaguar XJ","positiveInteractions":600},{"topic":"Jaguar XJ","age":"55-64","gender":"male","interactions":300,"key":"Jaguar XJ","positiveInteractions":300},{"topic":"Jaguar XJ","age":"65+","gender":"male","interactions":100,"key":"Jaguar XJ","positiveInteractions":100},{"topic":"Porsche 924","age":"18-24","gender":"male","interactions":1300,"key":"Porsche 924","positiveInteractions":1300},{"topic":"Porsche 924","age":"25-34","gender":"male","interactions":1000,"key":"Porsche 924","positiveInteractions":1000},{"topic":"Porsche 924","age":"25-34","gender":"female","interactions":-100,"key":"Porsche 924","positiveInteractions":100},{"topic":"Porsche 924","age":"35-44","gender":"male","interactions":900,"key":"Porsche 924","positiveInteractions":900},{"topic":"Porsche 924","age":"45-54","gender":"male","interactions":600,"key":"Porsche 924","positiveInteractions":600},{"topic":"Porsche 924","age":"55-64","gender":"male","interactions":300,"key":"Porsche 924","positiveInteractions":300},{"topic":"Porsche 924","age":"65+","gender":"male","interactions":100,"key":"Porsche 924","positiveInteractions":100},{"topic":"BMW M3","age":"18-24","gender":"male","interactions":1600,"key":"BMW M3","positiveInteractions":1600},{"topic":"BMW M3","age":"25-34","gender":"male","interactions":1500,"key":"BMW M3","positiveInteractions":1500},{"topic":"BMW M3","age":"35-44","gender":"male","interactions":600,"key":"BMW M3","positiveInteractions":600},{"topic":"BMW M3","age":"45-54","gender":"male","interactions":200,"key":"BMW M3","positiveInteractions":200},{"topic":"Turbocharger","age":"18-24","gender":"male","interactions":1300,"key":"Turbocharger","positiveInteractions":1300},{"topic":"Turbocharger","age":"25-34","gender":"male","interactions":1200,"key":"Turbocharger","positiveInteractions":1200},{"topic":"Turbocharger","age":"35-44","gender":"male","interactions":600,"key":"Turbocharger","positiveInteractions":600},{"topic":"Turbocharger","age":"45-54","gender":"male","interactions":500,"key":"Turbocharger","positiveInteractions":500},{"topic":"Turbocharger","age":"55-64","gender":"male","interactions":200,"key":"Turbocharger","positiveInteractions":200},{"topic":"Ford Ranger (North America)","age":"25-34","gender":"male","interactions":800,"key":"Ford Ranger (North America)","positiveInteractions":800},{"topic":"Ford Ranger (North America)","age":"25-34","gender":"female","interactions":-300,"key":"Ford Ranger (North America)","positiveInteractions":300},{"topic":"Ford Ranger (North America)","age":"18-24","gender":"male","interactions":800,"key":"Ford Ranger (North America)","positiveInteractions":800},{"topic":"Ford Ranger (North America)","age":"18-24","gender":"female","interactions":-200,"key":"Ford Ranger (North America)","positiveInteractions":200},{"topic":"Ford Ranger (North America)","age":"35-44","gender":"male","interactions":500,"key":"Ford Ranger (North America)","positiveInteractions":500},{"topic":"Ford Ranger (North America)","age":"35-44","gender":"female","interactions":-300,"key":"Ford Ranger (North America)","positiveInteractions":300},{"topic":"Ford Ranger (North America)","age":"45-54","gender":"male","interactions":200,"key":"Ford Ranger (North America)","positiveInteractions":200},{"topic":"Ford Ranger (North America)","age":"45-54","gender":"female","interactions":-100,"key":"Ford Ranger (North America)","positiveInteractions":100},{"topic":"Ford Ranger (North America)","age":"55-64","gender":"female","interactions":-100,"key":"Ford Ranger (North America)","positiveInteractions":100},{"topic":"Pará","age":"25-34","gender":"male","interactions":1000,"key":"Pará","positiveInteractions":1000},{"topic":"Pará","age":"25-34","gender":"female","interactions":-200,"key":"Pará","positiveInteractions":200},{"topic":"Pará","age":"18-24","gender":"male","interactions":900,"key":"Pará","positiveInteractions":900},{"topic":"Pará","age":"18-24","gender":"female","interactions":-100,"key":"Pará","positiveInteractions":100},{"topic":"Pará","age":"35-44","gender":"male","interactions":700,"key":"Pará","positiveInteractions":700},{"topic":"Pará","age":"35-44","gender":"female","interactions":-200,"key":"Pará","positiveInteractions":200},{"topic":"Pará","age":"45-54","gender":"male","interactions":200,"key":"Pará","positiveInteractions":200},{"topic":"Pará","age":"45-54","gender":"female","interactions":-100,"key":"Pará","positiveInteractions":100},{"topic":"TOYO TIRES","age":"18-24","gender":"male","interactions":2200,"key":"TOYO TIRES","positiveInteractions":2200},{"topic":"TOYO TIRES","age":"25-34","gender":"male","interactions":900,"key":"TOYO TIRES","positiveInteractions":900},{"topic":"TOYO TIRES","age":"35-44","gender":"male","interactions":300,"key":"TOYO TIRES","positiveInteractions":300},{"topic":"Audi Switzerland","age":"18-24","gender":"male","interactions":1200,"key":"Audi Switzerland","positiveInteractions":1200},{"topic":"Audi Switzerland","age":"18-24","gender":"female","interactions":-300,"key":"Audi Switzerland","positiveInteractions":300},{"topic":"Audi Switzerland","age":"25-34","gender":"male","interactions":800,"key":"Audi Switzerland","positiveInteractions":800},{"topic":"Audi Switzerland","age":"25-34","gender":"female","interactions":-300,"key":"Audi Switzerland","positiveInteractions":300},{"topic":"Audi Switzerland","age":"35-44","gender":"male","interactions":400,"key":"Audi Switzerland","positiveInteractions":400},{"topic":"Audi Switzerland","age":"35-44","gender":"female","interactions":-100,"key":"Audi Switzerland","positiveInteractions":100},{"topic":"Audi Switzerland","age":"45-54","gender":"male","interactions":100,"key":"Audi Switzerland","positiveInteractions":100},{"topic":"Off-road vehicle","age":"18-24","gender":"male","interactions":2200,"key":"Off-road vehicle","positiveInteractions":2200},{"topic":"Off-road vehicle","age":"25-34","gender":"male","interactions":900,"key":"Off-road vehicle","positiveInteractions":900},{"topic":"Off-road vehicle","age":"35-44","gender":"male","interactions":300,"key":"Off-road vehicle","positiveInteractions":300},{"topic":"Glassworks Unlimited","age":"18-24","gender":"male","interactions":2200,"key":"Glassworks Unlimited","positiveInteractions":2200},{"topic":"Glassworks Unlimited","age":"25-34","gender":"male","interactions":900,"key":"Glassworks Unlimited","positiveInteractions":900},{"topic":"Glassworks Unlimited","age":"35-44","gender":"male","interactions":300,"key":"Glassworks Unlimited","positiveInteractions":300},{"topic":"Ford Ranger","age":"25-34","gender":"male","interactions":1400,"key":"Ford Ranger","positiveInteractions":1400},{"topic":"Ford Ranger","age":"25-34","gender":"female","interactions":-100,"key":"Ford Ranger","positiveInteractions":100},{"topic":"Ford Ranger","age":"35-44","gender":"male","interactions":800,"key":"Ford Ranger","positiveInteractions":800},{"topic":"Ford Ranger","age":"35-44","gender":"female","interactions":-100,"key":"Ford Ranger","positiveInteractions":100},{"topic":"Ford Ranger","age":"45-54","gender":"male","interactions":200,"key":"Ford Ranger","positiveInteractions":200},{"topic":"Ford Ranger","age":"18-24","gender":"male","interactions":200,"key":"Ford Ranger","positiveInteractions":200},{"topic":"Gigi Hadid","age":"35-44","gender":"male","interactions":1400,"key":"Gigi Hadid","positiveInteractions":1400},{"topic":"Gigi Hadid","age":"35-44","gender":"female","interactions":-300,"key":"Gigi Hadid","positiveInteractions":300},{"topic":"Gigi Hadid","age":"45-54","gender":"male","interactions":500,"key":"Gigi Hadid","positiveInteractions":500},{"topic":"Gigi Hadid","age":"45-54","gender":"female","interactions":-100,"key":"Gigi Hadid","positiveInteractions":100},{"topic":"Gigi Hadid","age":"25-34","gender":"male","interactions":400,"key":"Gigi Hadid","positiveInteractions":400},{"topic":"Gigi Hadid","age":"25-34","gender":"female","interactions":-100,"key":"Gigi Hadid","positiveInteractions":100},{"topic":"Gigi Hadid","age":"18-24","gender":"male","interactions":200,"key":"Gigi Hadid","positiveInteractions":200},{"topic":"Nissan","age":"25-34","gender":"male","interactions":700,"key":"Nissan","positiveInteractions":700},{"topic":"Nissan","age":"25-34","gender":"female","interactions":-200,"key":"Nissan","positiveInteractions":200},{"topic":"Nissan","age":"18-24","gender":"male","interactions":600,"key":"Nissan","positiveInteractions":600},{"topic":"Nissan","age":"18-24","gender":"female","interactions":-200,"key":"Nissan","positiveInteractions":200},{"topic":"Nissan","age":"35-44","gender":"male","interactions":500,"key":"Nissan","positiveInteractions":500},{"topic":"Nissan","age":"35-44","gender":"female","interactions":-200,"key":"Nissan","positiveInteractions":200},{"topic":"Nissan","age":"45-54","gender":"male","interactions":300,"key":"Nissan","positiveInteractions":300},{"topic":"Nissan","age":"45-54","gender":"female","interactions":-100,"key":"Nissan","positiveInteractions":100},{"topic":"Nissan","age":"55-64","gender":"male","interactions":100,"key":"Nissan","positiveInteractions":100},{"topic":"Honda CR-V","age":"25-34","gender":"male","interactions":500,"key":"Honda CR-V","positiveInteractions":500},{"topic":"Honda CR-V","age":"25-34","gender":"female","interactions":-400,"key":"Honda CR-V","positiveInteractions":400},{"topic":"Honda CR-V","age":"35-44","gender":"female","interactions":-400,"key":"Honda CR-V","positiveInteractions":400},{"topic":"Honda CR-V","age":"35-44","gender":"male","interactions":300,"key":"Honda CR-V","positiveInteractions":300},{"topic":"Honda CR-V","age":"18-24","gender":"female","interactions":-200,"key":"Honda CR-V","positiveInteractions":200},{"topic":"Honda CR-V","age":"18-24","gender":"male","interactions":200,"key":"Honda CR-V","positiveInteractions":200},{"topic":"Honda CR-V","age":"45-54","gender":"female","interactions":-300,"key":"Honda CR-V","positiveInteractions":300},{"topic":"Honda CR-V","age":"45-54","gender":"male","interactions":200,"key":"Honda CR-V","positiveInteractions":200},{"topic":"Honda CR-V","age":"55-64","gender":"female","interactions":-200,"key":"Honda CR-V","positiveInteractions":200},{"topic":"Honda CR-V","age":"65+","gender":"female","interactions":-100,"key":"Honda CR-V","positiveInteractions":100}]
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
.bar--positive {
fill: #9BCCF5;
}
.bar--negative {
fill: pink;
}
text {
font: 10px sans-serif;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.title {
font-size: 13px;
font-weight:bold;
}
.active {
stroke: black;
stroke-width: 1.5px;
}
.reset {
fill:blue;
text-decoration: underline;
cursor: pointer;
}
text.negative,
text.positive,
.label,
.bar,
.node text,
circle {
cursor: pointer;
}
</style>
<body>
<div>
<span id='tornado-chart'></span>
<span id='tornado-chart2'></span>
</div>
<div>
<span id='bubble-chart'></span>
<span id='bar-chart'></span>
</div>
<script src='http://crossfilter.github.io/crossfilter/crossfilter.v1.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='./data.js'></script>
<script>
function drawBubble (selector, dispatch, dimension, group) {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 480 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var onClick;
var color = d3.scale.category20();
var bubble = d3.layout.pack()
.sort(null)
.size([width, height])
.padding(1.5);
var t = d3.transition()
.duration(750);
var svg = d3.select(selector),
g = svg.select('g');
if (!svg.empty()) {
svg.select('svg').remove()
}
g = svg.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'bubble')
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
var reset = g.append('text')
.attr('class', 'reset')
.style('display', 'none')
.attr('y', 10)
.attr('x', 20)
.text('reset')
.on('click', click)
function click(d) {
dimension.filter(d ? d.key : null);
dispatch.redraw();
svg.selectAll('circle').classed('active', false)
if(!d) {
return reset.style('display', 'none');
}
svg.select('.' + btoa(d.key).replace(/=/g, '')).classed('active', true)
reset.style('display', 'block')
}
var node = g.selectAll('.node')
.data(bubble.nodes({ children: group.all() }).filter(function(d) { return !d.children; }))
node.enter().append('g')
.attr('class', 'node')
.attr('transform', function(d) {return 'translate(' + d.x + ',' + d.y + ')'; });
node.append('title')
.text(function(d) { return d.key; });
node.append('circle')
.attr('class', function (d) { return btoa(d.key).replace(/=/g, '')})
.attr('r', function(d) { return d.r; })
.style('fill', function(d) { return color(d.key); })
node.append('text')
.attr('dy', '.3em')
.attr('class', 'label')
.style('text-anchor', 'middle')
dispatch.on('redraw.' + selector, function () {
var reset = g.selectAll('.reset')
node = g.selectAll('.node')
.data(bubble.nodes({ children: group.all() }).filter(function(d) { return !d.children; }))
node
.attr('class', 'node')
.transition(t)
.attr('transform', function(d) {return 'translate(' + d.x + ',' + d.y + ')'; });
node.select('circle')
.on('click', click)
.transition(t)
.attr('r', function(d) { return d.r; })
.style('fill', function(d) { return color(d.key); })
node.select('text')
.attr('dy', '.3em')
.style('text-anchor', 'middle')
.text(function(d) { return d.key.substring(0, d.r / 3); })
.on('click', click)
})
}
function drawTornado (selector, dispatch, dimension, group, height) {
var margin = {top: 20, right: 30, bottom: 40, left: 100},
width = 475 - margin.left - margin.right,
height = (height || 250) - margin.top - margin.bottom;
var t = d3.transition()
.duration(750);
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0.1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(7)
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(0)
var svg = d3.select(selector).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var reset = svg.append('text')
.attr('class', 'reset')
.style('display', 'none')
.attr('y', 0)
.attr('x', 20)
.text('reset')
.on('click', click)
function click(d) {
dimension.filter(d ? d.key : null);
dispatch.redraw();
svg.selectAll('rect').classed('active', false)
if(!d) {
return reset.style('display', 'none');
}
svg.selectAll('.' + btoa(d.key).replace(/=/g, '')).classed('active', true)
reset.style('display', 'block')
}
dispatch.on('redraw.' + selector, function () {
var data = group.all()
var arr = []
data.forEach(function(d) {
arr.push(d.value.negative)
arr.push(d.value.positive)
})
var domain = [d3.min(arr), d3.max(arr)]
x.domain(domain).nice();
y.domain(data.map(function(d) { return d.key; }));
var minInteractions = Math.min.apply(Math, data.map(function(o){ if(o.value) return o.value.negative;}))
yAxis.tickPadding(Math.abs(x(minInteractions) - x(0)) + 10);
var bar = svg.selectAll(".bar")
.data(data)
var gEnter = bar.enter()
var barPositive = svg.selectAll('.bar--positive')
if (barPositive.empty()) {
barPositive = gEnter.append("rect")
.attr("class", function (d) { return btoa(d.key).replace(/=/g, '') + ' bar bar--positive' })
}
barPositive
.transition(t)
.attr("x", function(d) { return x(Math.min(0, d.value.positive)); })
.attr("y", function(d) { return y(d.key); })
.attr("width", function(d) { return Math.abs(x(d.value.positive) - x(0)); })
.attr("height", y.rangeBand())
var barNegative = svg.selectAll('.bar--negative')
if (barNegative.empty()) {
barNegative = gEnter.append("rect")
.attr("class", function (d) { return btoa(d.key).replace(/=/g, '') + ' bar bar--negative' })
}
barNegative
.transition(t)
.attr("x", function(d) { return x(Math.min(0, d.value.negative)); })
.attr("y", function(d) { return y(d.key); })
.attr("width", function(d) { return Math.abs(x(d.value.negative) - x(0)); })
.attr("height", y.rangeBand())
svg.selectAll('.bar').on('click', click)
var textPositive = svg.selectAll('text.positive')
if (textPositive.empty()) {
textPositive = gEnter.append('text')
.attr('class', 'positive')
.attr("text-anchor", "middle")
.attr("dy", ".35em")
}
textPositive
.transition(t)
.attr("x", function(d,i) {
return x(Math.min(0, d.value.positive)) + (Math.abs(x(d.value.positive) - x(0)) / 2);
})
.attr("y", function(d,i) {
return y(d.key) + (y.rangeBand() / 2);
})
.text(function (d) { return d.value.positive || ''; })
var textNegative = svg.selectAll('text.negative')
if (textNegative.empty()) {
textNegative = gEnter.append('text')
.attr('class', 'negative')
.attr("text-anchor", "middle")
.attr("dy", ".35em")
}
textNegative
.transition(t)
.attr("x", function(d,i) {
return x(Math.min(0, d.value.negative)) + (Math.abs(x(d.value.negative) - x(0)) / 2);
})
.attr("y", function(d,i) {
return y(d.key) + (y.rangeBand() / 2);
})
.text(function (d) { return -d.value.negative || ''; })
svg.selectAll('text').on('click', click)
// var title = svg.selectAll('.title')
// .data([data.reduce(function(a,b) { return b.key })])
//
// title.enter().append('text')
// .attr('class', 'title')
// .attr('x', function (d, i) { return width/2; })
// .attr("text-anchor", "middle")
// .text(function (d) { return d; })
var xAxisDom = svg.selectAll('.x.axis')
if (xAxisDom.empty()) {
xAxisDom = svg.append("g")
.attr("class", "x axis")
}
xAxisDom
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
xAxisDom
.selectAll('.tick text')
.text(function (d) { if (d < 0) return -d; else return d; })
var yAxisDom = svg.selectAll('.y.axis')
if (yAxisDom.empty()) {
yAxisDom = svg.append("g")
.attr("class", "y axis")
}
yAxisDom
.transition(t)
.attr("transform", "translate(" + x(0) + ",0)")
.call(yAxis);
});
}
function drawBar (selector, dispatch, dimension, group) {
var margin = {top: 0, right: 0, bottom: 40, left: 50},
width = 475 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(10);
var t = d3.transition()
.duration(750);
var svg = d3.select(selector),
g = svg.select('g');
function click(d) {
dimension.filter(d ? d.key : null);
dispatch.redraw();
svg.selectAll('rect').classed('active', false)
if(!d) {
return reset.style('display', 'none');
}
svg.select('.' + btoa(d.key).replace(/=/g, '')).classed('active', true)
reset.style('display', 'block')
}
if (g.empty()) {
g = svg.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
g.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
g.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Interactions');
var reset = g.append('text')
.attr('class', 'reset')
.attr('y', 10)
.attr('x', -40)
.style('display', 'none')
.text('reset')
.on('click', click)
}
dispatch.on('redraw.' + selector, function () {
x.domain(group.all().map(function(d) { return d.key; }));
y.domain([0, d3.max(group.all(), function(d) { return d.value; })]);
g.select('.y.axis')
.transition(t)
.call(yAxis)
var xAxisDom = g.select('.x.axis')
.transition(t)
.call(xAxis)
var rects = g.selectAll('rect')
.data(group.all());
rects.enter().append('rect')
.on('click', click)
.attr('class', function (d) { return btoa(d.key).replace(/=/g, '') })
rects
.classed('bar', true)
.classed('bar--negative', function (d) { return d.key == 'female'})
.classed('bar--positive', function (d) { return d.key == 'male'})
.transition(t)
// .attr('class', function(d) { return 'bar bar--' + (d.key == 'female' ? 'negative' : 'positive'); })
.attr('x', function(d) { return x(d.key); })
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d.value); })
.attr('height', function(d) { return height - y(d.value); })
var texts = g.selectAll('.label')
.data(group.all())
texts.enter().append('text').attr('class', 'label').on('click', click)
texts
.transition(t)
.attr('text-anchor', 'middle')
.attr('x', function(d,i) {
return x(d.key) + (x.rangeBand() / 2);
})
.attr('y', function(d,i) {
return y(d.value) + ((height - y(d.value)) / 2);
})
.attr('dy', '.35em')
.text(function (d) { return d.value })
})
}
var xf = crossfilter(data)
var gender = xf.dimension(function (d) { return d.gender; }),
genders = gender.group().reduceSum(function (d) { return d.positiveInteractions; }),
topic = xf.dimension(function (d) { return d.topic }),
topics = topic.group().reduceSum(function (d) { return d.positiveInteractions; }),
age = xf.dimension(function (d) { return d.age; }),
ages = age.group().reduce(
function (p, v) {
if (v.gender == 'female')
p.negative += v.interactions;
else if (v.gender == 'male')
p.positive += v.interactions;
return p;
},
function (p, v) {
if (v.gender == 'female')
p.negative -= v.interactions;
else if (v.gender == 'male')
p.positive -= v.interactions;
return p;
},
function () {
return { positive: 0, negative: 0 }
}
),
newTopic = xf.dimension(function (d) { return d.topic }),
topicGroup = newTopic.group().reduce(
function (p, v) {
if (v.gender == 'female')
p.negative += v.interactions;
else if (v.gender == 'male')
p.positive += v.interactions;
return p;
},
function (p, v) {
if (v.gender == 'female')
p.negative -= v.interactions;
else if (v.gender == 'male')
p.positive -= v.interactions;
return p;
},
function () {
return { positive: 0, negative: 0 }
}
);
var dispatch = d3.dispatch('redraw');
drawTornado('#tornado-chart', dispatch, newTopic, topicGroup);
drawTornado('#tornado-chart2', dispatch, age, ages)
drawBar('#bar-chart', dispatch, gender, genders);
drawBubble('#bubble-chart', dispatch, topic, topics);
dispatch.redraw();
d3.select(self.frameElement).style("height", "738px");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment