├── .bowerrc ├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist2 ├── css │ └── app.min.css ├── favicon.ico ├── fonts │ ├── FiraSans-Light.ttf │ ├── FiraSans-Light.woff │ ├── FiraSans-Regular.eot │ ├── FiraSans-Regular.ttf │ └── FiraSans-Regular.woff ├── img │ ├── examples │ │ ├── FamilyIncomes.png │ │ ├── FreeShipment.png │ │ └── SocialMedia.png │ ├── tour │ │ ├── AspectRatio.png │ │ ├── ColorpickerColor.png │ │ ├── ColumnMargin.png │ │ ├── DADIcon.png │ │ ├── DataImport.png │ │ ├── Export.png │ │ ├── HorizontalMargin.png │ │ ├── IconSize.png │ │ ├── Import.png │ │ ├── IsotypeLayout.png │ │ ├── LegendSettings.png │ │ ├── OuterMargin.png │ │ ├── RoundSize.png │ │ ├── RowMargin.png │ │ ├── TypeEqually.png │ │ ├── TypeLines.png │ │ ├── VerticalMargin.png │ │ └── loading.png │ └── ui │ │ ├── adjustments.svg │ │ ├── choose.svg │ │ ├── close.svg │ │ ├── color.svg │ │ ├── column.svg │ │ ├── columnmargin.svg │ │ ├── compare_isotype.svg │ │ ├── data.svg │ │ ├── examples.svg │ │ ├── export.svg │ │ ├── help.svg │ │ ├── horizontalmargin.svg │ │ ├── icon.svg │ │ ├── iconsize.svg │ │ ├── import.svg │ │ ├── logo.svg │ │ ├── new.svg │ │ ├── next.svg │ │ ├── normal_isotype.svg │ │ ├── outermarign.svg │ │ ├── previous.svg │ │ ├── row.svg │ │ ├── rowlegend.svg │ │ ├── rowmargin.svg │ │ ├── ruler.svg │ │ ├── scale.svg │ │ ├── size_isotype.svg │ │ ├── team.svg │ │ ├── text.svg │ │ ├── titleheight.svg │ │ ├── type.svg │ │ ├── versus_isotype.svg │ │ └── verticalmargin.svg ├── index.html ├── js │ ├── app.min.js │ └── header.min.js └── screenshot.png ├── docs ├── AdjustmentsView.html ├── AdjustmentsView.js.html ├── ColorView.html ├── ColorView.js.html ├── DataView.html ├── DataView.js.html ├── ExportView.html ├── ExportView.js.html ├── ExportView_initialize.html ├── GraphView.html ├── GraphView.js.html ├── GraphView_initialize.html ├── HelpView.html ├── HelpView.js.html ├── IconLibraryView.html ├── IconLibraryView.js.html ├── IconMapView.html ├── IconMapView.js.html ├── IconView.html ├── IconView.js.html ├── ImportView.html ├── ImportView.js.html ├── Model.html ├── NewView.html ├── NewView.js.html ├── ScaleView.html ├── ScaleView.js.html ├── TextView.html ├── TextView.js.html ├── TypeView.html ├── TypeView.js.html ├── UiModel.html ├── data.js.html ├── global.html ├── iconLibrary.js.html ├── index.html ├── isotypeLayout.js.html ├── main.js.html ├── options.js.html ├── router.js.html ├── scripts │ ├── linenumber.js │ └── prettify │ │ ├── Apache-License-2.0.txt │ │ ├── lang-css.js │ │ └── prettify.js └── styles │ ├── jsdoc-default.css │ ├── prettify-jsdoc.css │ └── prettify-tomorrow.css ├── package-lock.json ├── package.json ├── src ├── .jshintrc ├── favicon.ico ├── fonts │ ├── FiraSans-Light.ttf │ ├── FiraSans-Light.woff │ ├── FiraSans-Regular.eot │ ├── FiraSans-Regular.ttf │ └── FiraSans-Regular.woff ├── img │ ├── examples │ │ ├── FamilyIncomes.png │ │ ├── FreeShipment.png │ │ └── SocialMedia.png │ ├── tour │ │ ├── AspectRatio.png │ │ ├── ColorpickerColor.png │ │ ├── ColumnMargin.png │ │ ├── DADIcon.png │ │ ├── DataImport.png │ │ ├── Export.png │ │ ├── HorizontalMargin.png │ │ ├── IconSize.png │ │ ├── Import.png │ │ ├── IsotypeLayout.png │ │ ├── LegendSettings.png │ │ ├── OuterMargin.png │ │ ├── RoundSize.png │ │ ├── RowMargin.png │ │ ├── TypeEqually.png │ │ ├── TypeLines.png │ │ ├── VerticalMargin.png │ │ └── loading.png │ └── ui │ │ ├── Help.svg │ │ ├── adjustments.svg │ │ ├── choose.svg │ │ ├── close.svg │ │ ├── color.svg │ │ ├── column.svg │ │ ├── columnmargin.svg │ │ ├── compare_isotype.svg │ │ ├── data.svg │ │ ├── examples.svg │ │ ├── export.svg │ │ ├── horizontalmargin.svg │ │ ├── icon.svg │ │ ├── iconsize.svg │ │ ├── import.svg │ │ ├── logo.svg │ │ ├── new.svg │ │ ├── next.svg │ │ ├── normal_isotype.svg │ │ ├── outermarign.svg │ │ ├── previous.svg │ │ ├── row.svg │ │ ├── rowlegend.svg │ │ ├── rowmargin.svg │ │ ├── ruler.svg │ │ ├── scale.svg │ │ ├── size_isotype.svg │ │ ├── team.svg │ │ ├── text.svg │ │ ├── titleheight.svg │ │ ├── type.svg │ │ ├── versus_isotype.svg │ │ └── verticalmargin.svg ├── index.html ├── js │ ├── iconLibrary.js │ ├── isotypeLayout.js │ ├── main.js │ ├── models │ │ ├── data.js │ │ └── options.js │ ├── router.js │ └── views │ │ ├── AdjustmentsView.js │ │ ├── ColorView.js │ │ ├── DataView.js │ │ ├── ExamplesView.js │ │ ├── ExportView.js │ │ ├── GraphView.js │ │ ├── HelpView.js │ │ ├── IconLibraryView.js │ │ ├── IconMapView.js │ │ ├── ImportView.js │ │ ├── NewView.js │ │ ├── ScaleView.js │ │ ├── TextView.js │ │ ├── TourView.js │ │ └── TypeView.js ├── lib │ └── innersvg.js ├── screenshot.png └── scss │ ├── _settings.scss │ └── app.scss └── test ├── .jshintrc ├── index.html └── isomatic.test.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | .idea/ 3 | .tmp/ 4 | /node_modules/* 5 | /src/bower_components/* 6 | /src/css/app.css 7 | /dist/* 8 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqnull": true, 4 | "eqeqeq": true, 5 | "undef": true, 6 | "unused": true, 7 | "indent": 4, 8 | "trailing": true, 9 | "browser": true, 10 | "devel": true, 11 | "strict": true, 12 | "globals": { 13 | "jQuery": true, 14 | "$": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## About isomatic 2 | ### Functionality 3 | Tired of creating isotype graphics manually? We've created a web application ([www.isomatic.de][isomatic.de]) that does all the heavy lifting for you and still leaves you with the opportunity to customize it in your favorite vector graphics editor like Adobe Illustrator. 4 | 5 | You start by importing your data via copy'n'paste from a spreadsheet application, like Excel or Numbers. The application gives you the choice between several isotype layouts. A broad library contains many custom designed icons and many options to layout and design the graphic. If you seek help, the interactive tour will guide you throughout the whole process. 6 | 7 | We started this project in 2013 as students of the University of Applied Sciences in Augsburg and released it as OpenSource. 8 | 9 | Isomatic is a web application that runs in your browser that lets you easily create isotype graphics. The resulting graphics can be downloaded as SVG files which can be imported to several other applications. There are many customization options - but see for yourself at [www.isomatic.de][isomatic.de]! 10 | 11 | There's a [screencast on YouTube](https://www.youtube.com/watch?v=oZGs0WdSB2g) showcasing isomatic. 12 | 13 | ![alt text][screenshot] 14 | 15 | 16 | ### History 17 | Isomatic was first created 2013 as part of a seminar at the Univsity of Applied Sciences Augsburg. A first Version was released late 2013 which contained all the basic funtionality. In 2014 we've added some more advanced layouting capabilities, an interactive tour and a few minor improvements here and there. 18 | 19 | ### The Team 20 | Lisa Borgenheimer: B. A. Communication Design, currently studing M. A. Interactive Media Systems. Working as Freelancer and Information Designer for Süddeutsche Zeitung and ZEIT ONLINE. 21 | 22 | Simon Heimler: B. A. Interactive Media, currently studing M. S. of Applied Research. Specialized in Mobile and Web Development, Semantic Web Technologies, Content Management and Data Visualization. 23 | 24 | Sebastian Huber: B. A. Interactive Media, currently studing M. A. Interactive Media Systems. Working as a Fullstack Webdeveloper. 25 | 26 | 27 | ## Manual Build 28 | **This is only for developer and advanced users!** 29 | This project uses 3rd party programs for pependency & build management. 30 | To get this project running follow these steps: 31 | Dont forget to prepend sudo if using linux or mac. 32 | 33 | ### Prequisites 34 | * Install Nodejs (http://www.nodejs.org) 35 | * Install Sass (http://sass-lang.com/install). This may require Ruby (https://www.ruby-lang.org) 36 | * Install Bower globally `npm install -g bower` (http://bower.io) 37 | * Install Grunt globally `npm install -g grunt-cli` (http://gruntjs.com) 38 | 39 | ### Install Dependencies & Build Project 40 | Switch to project directory. 41 | 42 | * Install missing Grunt Plugins via `npm install` in the project directory 43 | * Install JavaScript dependencies via Bower: `bower install` in the project directory 44 | * Run the project watch tasks (live sass compilation) via `grunt` in the project directory 45 | 46 | ## Updating 47 | * Update dependencies via: `bower update` in the project directory 48 | * Update grunt plugins via `npm update` 49 | * Update JSDoc Documentation via `bower jsdoc` 50 | * Update Minified JavaScript via `bower build` 51 | 52 | Some 3rd Party Libraries may change in a way that the app can be broken. 53 | If that happens, insert a specific version number into the bower.json file to revert to an older state 54 | 55 | 56 | [isomatic.de]: http://isomatic.de "www.isomatic.de" 57 | [screenshot]: http://isomatic.de/screenshot.png?v002 (Screenshot of isomatic) 58 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "isomatic", 3 | "devDependencies": { 4 | "foundation": "~5.2.2", 5 | "backbone": "~1.1.2", 6 | "backbone.validation": "v0.7.1", 7 | "underscore": "~1.6.0", 8 | "handlebars": "v1.3.0", 9 | "d3": "~3.4.6", 10 | "colpick": "josedvq/colpick-jQuery-Color-Picker#2.0.2", 11 | "slimScroll": "rochal/jQuery-slimScroll#v1.3.1", 12 | "qunit": "~1.14.0", 13 | "unveil": "*" 14 | }, 15 | "version": "0.0.1", 16 | "homepage": "https://github.com/Fannon/isomatic", 17 | "authors": [ 18 | "Lisa Borgenheimer ", 19 | "Simon Heimler ", 20 | "Sebastian Huber " 21 | ], 22 | "description": "An interactive online isotype graphics generator", 23 | "main": "index.html", 24 | "license": "GPL v2", 25 | "private": true, 26 | "ignore": [ 27 | "**/.*", 28 | "node_modules", 29 | "bower_components", 30 | "test", 31 | "tests", 32 | "docs" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /dist2/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/favicon.ico -------------------------------------------------------------------------------- /dist2/fonts/FiraSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/fonts/FiraSans-Light.ttf -------------------------------------------------------------------------------- /dist2/fonts/FiraSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/fonts/FiraSans-Light.woff -------------------------------------------------------------------------------- /dist2/fonts/FiraSans-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/fonts/FiraSans-Regular.eot -------------------------------------------------------------------------------- /dist2/fonts/FiraSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/fonts/FiraSans-Regular.ttf -------------------------------------------------------------------------------- /dist2/fonts/FiraSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/fonts/FiraSans-Regular.woff -------------------------------------------------------------------------------- /dist2/img/examples/FamilyIncomes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/examples/FamilyIncomes.png -------------------------------------------------------------------------------- /dist2/img/examples/FreeShipment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/examples/FreeShipment.png -------------------------------------------------------------------------------- /dist2/img/examples/SocialMedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/examples/SocialMedia.png -------------------------------------------------------------------------------- /dist2/img/tour/AspectRatio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/AspectRatio.png -------------------------------------------------------------------------------- /dist2/img/tour/ColorpickerColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/ColorpickerColor.png -------------------------------------------------------------------------------- /dist2/img/tour/ColumnMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/ColumnMargin.png -------------------------------------------------------------------------------- /dist2/img/tour/DADIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/DADIcon.png -------------------------------------------------------------------------------- /dist2/img/tour/DataImport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/DataImport.png -------------------------------------------------------------------------------- /dist2/img/tour/Export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/Export.png -------------------------------------------------------------------------------- /dist2/img/tour/HorizontalMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/HorizontalMargin.png -------------------------------------------------------------------------------- /dist2/img/tour/IconSize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/IconSize.png -------------------------------------------------------------------------------- /dist2/img/tour/Import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/Import.png -------------------------------------------------------------------------------- /dist2/img/tour/IsotypeLayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/IsotypeLayout.png -------------------------------------------------------------------------------- /dist2/img/tour/LegendSettings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/LegendSettings.png -------------------------------------------------------------------------------- /dist2/img/tour/OuterMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/OuterMargin.png -------------------------------------------------------------------------------- /dist2/img/tour/RoundSize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/RoundSize.png -------------------------------------------------------------------------------- /dist2/img/tour/RowMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/RowMargin.png -------------------------------------------------------------------------------- /dist2/img/tour/TypeEqually.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/TypeEqually.png -------------------------------------------------------------------------------- /dist2/img/tour/TypeLines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/TypeLines.png -------------------------------------------------------------------------------- /dist2/img/tour/VerticalMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/VerticalMargin.png -------------------------------------------------------------------------------- /dist2/img/tour/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/img/tour/loading.png -------------------------------------------------------------------------------- /dist2/img/ui/adjustments.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /dist2/img/ui/choose.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist2/img/ui/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist2/img/ui/color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /dist2/img/ui/column.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dist2/img/ui/columnmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist2/img/ui/compare_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist2/img/ui/data.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /dist2/img/ui/examples.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist2/img/ui/export.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /dist2/img/ui/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /dist2/img/ui/horizontalmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist2/img/ui/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist2/img/ui/iconsize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dist2/img/ui/import.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /dist2/img/ui/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 21 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | 31 | 39 | 44 | 48 | 55 | 58 | 59 | 63 | 64 | 66 | 68 | 69 | -------------------------------------------------------------------------------- /dist2/img/ui/new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist2/img/ui/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist2/img/ui/normal_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist2/img/ui/outermarign.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /dist2/img/ui/previous.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist2/img/ui/row.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dist2/img/ui/rowlegend.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist2/img/ui/rowmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist2/img/ui/scale.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist2/img/ui/size_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist2/img/ui/team.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /dist2/img/ui/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /dist2/img/ui/titleheight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /dist2/img/ui/type.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist2/img/ui/versus_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dist2/img/ui/verticalmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /dist2/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/dist2/screenshot.png -------------------------------------------------------------------------------- /docs/AdjustmentsView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/AdjustmentsView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/AdjustmentsView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Adjustments View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.AdjustmentsView = Backbone.View.extend( /** @lends AdjustmentsView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class AdjustmentsView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 | 
 49 |             this.render();
 50 | 
 51 |             // Register Model Event Listeners
 52 |             this.model.on("change:outerMargin", this.render, this);
 53 |             this.model.on("change:iconHorizontalMargin", this.render, this);
 54 |             this.model.on("change:rowMargin", this.render, this);
 55 |             this.model.on("change:columnMargin", this.render, this);
 56 |             this.model.on("change:iconSize", this.render, this);
 57 | 
 58 |         },
 59 | 
 60 |         /**
 61 |          * Render Adjustment View
 62 |          */
 63 |         render: function(){
 64 | 
 65 |             console.info('AdjustmentsView.render();');
 66 | 
 67 |             var source = $('#adjustments-template').html();
 68 |             var template = Handlebars.compile(source);
 69 |             var html = template({
 70 |                 options: this.model.attributes
 71 |             });
 72 | 
 73 |             this.$el.html(html);
 74 | 
 75 |             Backbone.Validation.bind(this);
 76 | 
 77 |             this.activateIconSize();
 78 | 
 79 |         },
 80 | 
 81 |         /**
 82 |          * Options.ui Model
 83 |          */
 84 |         model: isomatic.options.ui,
 85 | 
 86 |         /**
 87 |          * Adjustment View UI Events
 88 |          */
 89 |         events: {
 90 |             "click #adjustments-apply": "apply",
 91 |             "click #adjustments-apply-close": "apply",
 92 |             "click #auto-icon-size": "activateIconSize"
 93 |         },
 94 | 
 95 |         /**
 96 |          * Apply Adjustments to Graphic
 97 |          */
 98 |         apply: function() {
 99 | 
100 |             var state = {
101 |                 'outerMargin': $('#outer-margin').val(),
102 |                 'iconHorizontalMargin': $('#icon-horizontal-margin').val(),
103 |                 'rowMargin': $('#row-margin').val(),
104 | //                'columnMargin': $('#column-margin').val(),
105 |                 'iconSize': $('#icon-size').val(),
106 |                 'autoIconSize': $('#auto-icon-size').prop('checked')
107 |             };
108 | 
109 |             var isValid = this.model.set(state, {validate: true});
110 | 
111 |             if (isValid) {
112 |                 isomatic.refreshLayout();
113 |             }
114 | 
115 |         },
116 | 
117 |         activateIconSize: function() {
118 |             if ($('#auto-icon-size').prop('checked')) {
119 |                 $('#icon-size').prop("disabled", true);
120 |             } else {
121 |                 $('#icon-size').prop("disabled", false);
122 |             }
123 |         }
124 | 
125 |     });
126 | 
127 | }(isomatic));
128 | 
129 | 
130 |
131 |
132 | 133 | 134 | 135 | 136 |
137 | 138 | 141 | 142 |
143 | 144 |
145 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 146 |
147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /docs/ExportView_initialize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: initialize 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: initialize

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | initialize 31 |

32 | 33 |
ExportView This View is for Exporting the current Graphic to SVG or JSON Files They can optionally be filled with the current Data and Options If they are they can be imported again by the ImportView
34 | 35 |
36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 |

new initialize()

45 | 46 | 47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
Source:
80 |
83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
105 | 106 | 107 |
108 | 109 | 110 |

Extends

111 | 112 |
    113 |
  • Backbone.View
  • 114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 |
133 | 134 |
135 | 136 | 137 | 138 | 139 |
140 | 141 | 144 | 145 |
146 | 147 |
148 | Documentation generated by JSDoc 3.2.2 on Thu Jan 30 2014 09:14:33 GMT+0100 (MEZ) 149 |
150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /docs/GraphView_initialize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: initialize 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: initialize

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | initialize 31 |

32 | 33 |
GraphView Initializes the Graph View. The Graph View creates the Canvas for the Graphic It has all the functions to layout and render the visualisation based on the Data coming from the DataView.
34 | 35 |
36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 |
44 |

new initialize()

45 | 46 | 47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
Source:
80 |
83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
105 | 106 | 107 |
108 | 109 | 110 |

Extends

111 | 112 |
    113 |
  • Backbone.View
  • 114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 |
133 | 134 |
135 | 136 | 137 | 138 | 139 |
140 | 141 | 144 | 145 |
146 | 147 |
148 | Documentation generated by JSDoc 3.2.2 on Thu Jan 30 2014 09:17:04 GMT+0100 (MEZ) 149 |
150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /docs/HelpView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: HelpView 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: HelpView

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | HelpView 31 |

32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |

new HelpView()

43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
Source:
78 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | 107 | 108 |

Extends

109 | 110 |
    111 |
  • Backbone.View
  • 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |

Methods

127 | 128 |
129 | 130 |
131 |

render()

132 | 133 | 134 |
135 |
136 | 137 | 138 |
139 | Render Help View 140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
Source:
171 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
196 | 197 |
198 | 199 | 200 | 201 | 202 | 203 |
204 | 205 |
206 | 207 | 208 | 209 | 210 |
211 | 212 | 215 | 216 |
217 | 218 |
219 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 220 |
221 | 222 | 223 | 224 | 225 | -------------------------------------------------------------------------------- /docs/HelpView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/HelpView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/HelpView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
29 | /* global isomatic, d3, Backbone, _, Handlebars */
30 | 
31 | (function(isomatic) {
32 |     "use strict";
33 | 
34 |     /**
35 |      * Help View
36 |      *
37 |      * @type {*|void|Object}
38 |      */
39 |     isomatic.views.HelpView = Backbone.View.extend( /** @lends HelpView.prototype */ {
40 | 
41 |         /**
42 |          * @class HelpView
43 |          *
44 |          * @augments Backbone.View
45 |          * @contructs
46 |          */
47 |         initialize: function(){
48 |             this.render();
49 |         },
50 | 
51 |         /**
52 |          * Render Help View
53 |          */
54 |         render: function(){
55 | 
56 |             var source = $('#help-template').html();
57 |             var template = Handlebars.compile(source);
58 |             var html = template({
59 |                 palettes: isomatic.options.internal.colorPalettes
60 |             });
61 |             this.$el.html(html);
62 | 
63 |         },
64 |         events: {
65 | 
66 |         }
67 |     });
68 | 
69 | }(isomatic));
70 | 
71 | 
72 |
73 |
74 | 75 | 76 | 77 | 78 |
79 | 80 | 83 | 84 |
85 | 86 |
87 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 88 |
89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /docs/IconLibraryView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/IconLibraryView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/IconLibraryView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Icon View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.IconLibraryView = Backbone.View.extend( /** @lends IconLibraryView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class IconLibraryView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 | 
 49 |             this.render();
 50 | 
 51 |         },
 52 | 
 53 |         /** Render Icon View */
 54 |         render: function(){
 55 | 
 56 |             console.info('IconLibraryView.render();');
 57 | 
 58 |             var source = $('#icon-right-template').html();
 59 |             var template = Handlebars.compile(source);
 60 | 
 61 |             var html = template({
 62 |                 iconLibrary: isomatic.icons
 63 |             });
 64 | 
 65 |             this.$el.html(html);
 66 | 
 67 |             // Display SVG Icons:
 68 |             // Take SVG Paths out from helper attribute "svg-content" and parse it into the div
 69 |             // SVG can't be parsed with the template engine!
 70 |             $('.category-icon').each(
 71 |                 function(){
 72 |                     var el = $(this);
 73 |                     var content = el.attr('svg-content');
 74 |                     var id = el.attr('id').split('-');
 75 |                     el.html('<svg class="' + id[1] + '-' + id[2] + '"><g>' + content + '</g></svg>');
 76 |                     el.removeAttr('svg-content');
 77 |                 }
 78 |             );
 79 | 
 80 | 
 81 |             // Init Scrollbar
 82 |             try {
 83 |                 $('#icon-container .scrollbar').slimScroll({
 84 |                     'height': isomatic.options.ui.attributes.graphHeight - 34
 85 |                 });
 86 | 
 87 |             } catch (e) {
 88 |                 console.error('Error loading Scrollbar Plugin!');
 89 |             }
 90 | 
 91 |         },
 92 | 
 93 |         model: isomatic.icons,
 94 | 
 95 |         currentTarget: null,
 96 | 
 97 |         events: {
 98 |             "dragstart .category-icon": "handleDrag"
 99 |         },
100 | 
101 |         /**
102 |          * Drag and Drop dragging
103 |          * @param e
104 |          */
105 |         handleDrag: function(e) {
106 |             e.originalEvent.dataTransfer.setData("Text", e.target.id);
107 |         }
108 | 
109 |     });
110 | 
111 | }(isomatic));
112 | 
113 | 
114 |
115 |
116 | 117 | 118 | 119 | 120 |
121 | 122 | 125 | 126 |
127 | 128 |
129 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 130 |
131 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /docs/IconView.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: IconView 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: IconView

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | IconView 31 |

32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |

new IconView()

43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
Source:
78 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | 107 | 108 |

Extends

109 | 110 |
    111 |
  • Backbone.View
  • 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |

Methods

127 | 128 |
129 | 130 |
131 |

render()

132 | 133 | 134 |
135 |
136 | 137 | 138 |
139 | Render Icon View 140 |
141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
Source:
171 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
196 | 197 |
198 | 199 | 200 | 201 | 202 | 203 |
204 | 205 |
206 | 207 | 208 | 209 | 210 |
211 | 212 | 215 | 216 |
217 | 218 |
219 | Documentation generated by JSDoc 3.2.2 on Sat Jan 18 2014 10:48:24 GMT+0100 (MEZ) 220 |
221 | 222 | 223 | 224 | 225 | -------------------------------------------------------------------------------- /docs/IconView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/IconView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/IconView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Icon View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.IconView = Backbone.View.extend( /** @lends IconView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class IconView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 |             this.render();
 49 |         },
 50 | 
 51 |         /** Render Icon View */
 52 |         render: function(){
 53 | 
 54 |             var source = $('#icon-template').html();
 55 |             var template = Handlebars.compile(source);
 56 |             var html = template({
 57 |                 palettes: isomatic.options.internal.colorPalettes
 58 |             });
 59 |             this.$el.html(html);
 60 | 
 61 |         },
 62 |         events: {
 63 |             "click #color": "colorClick",
 64 |             "dragstart .category-icon": "handleDragStart",
 65 |             "dragend .category-icon": "handleDragEnd",
 66 |             "drop .category-icon": "handleDrop"
 67 |         },
 68 |         currentTarget: null,
 69 |         handleDragStart: function(e) {
 70 |             $(e.currentTarget).addClass('dragging');
 71 |         },
 72 |         handleDragEnd: function(e) {
 73 |             //todo mapping with image-lib
 74 |             $('.category-icon').removeClass('active');
 75 |             $(e.currentTarget).removeClass('dragging');
 76 |             $(e.currentTarget).addClass('active');
 77 |         },
 78 |         handleDrop: function(e) {
 79 | 
 80 |         }
 81 | 
 82 |     });
 83 | 
 84 | }(isomatic));
 85 | 
 86 | 
87 |
88 |
89 | 90 | 91 | 92 | 93 |
94 | 95 | 98 | 99 |
100 | 101 |
102 | Documentation generated by JSDoc 3.2.2 on Sat Jan 18 2014 10:48:23 GMT+0100 (MEZ) 103 |
104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /docs/Model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: Model 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: Model

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | Model 31 |

32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |

new Model()

43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
Source:
78 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | 107 | 108 |

Extends

109 | 110 |
    111 |
  • Backbone.Model
  • 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
131 | 132 |
133 | 134 | 135 | 136 | 137 |
138 | 139 | 142 | 143 |
144 | 145 |
146 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 147 |
148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /docs/ScaleView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/ScaleView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/ScaleView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Scale View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.ScaleView = Backbone.View.extend( /** @lends ScaleView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class ScaleView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 |             this.render();
 49 | 
 50 |             // Register Model Event Listeners
 51 |             this.model.on("change:scale", this.render, this);
 52 |             this.model.on("change:roundUp", this.render, this);
 53 |             this.model.on("change:roundDown", this.render, this);
 54 | 
 55 |         },
 56 |         render: function(){
 57 | 
 58 |             console.info('ScaleView.render();');
 59 | 
 60 |             var source = $('#scale-template').html();
 61 |             var template = Handlebars.compile(source);
 62 |             var html = template({
 63 |                 options: this.model.attributes
 64 |             });
 65 |             this.$el.html(html);
 66 | 
 67 |             this.activateRoundSize();
 68 |         },
 69 |         model: isomatic.options.ui,
 70 | 
 71 |         events: {
 72 |             "click #scale-apply": "apply",
 73 |             "click #scale-apply-close": "apply",
 74 |             "click #round-size": "activateRoundSize"
 75 |         },
 76 | 
 77 |         /**
 78 |          * Apply Scales to Graphic
 79 |          */
 80 |         apply: function() {
 81 | 
 82 |             var state = {
 83 |                 'scale': $('#scale').val(),
 84 |                 'roundUp': $('#round-up').val(),
 85 |                 'roundDown': $('#round-down').val(),
 86 |                 'roundSize': $('#round-size').prop('checked')
 87 |             };
 88 | 
 89 |             var isValid = this.model.set(state, {validate: true});
 90 | 
 91 |             if (isValid) {
 92 |                 isomatic.refreshLayout();
 93 |             }
 94 |         },
 95 | 
 96 |         /**
 97 |          * Activates and deactivates Rounding Input Boxes depending on if they are used or not
 98 |          */
 99 |         activateRoundSize: function() {
100 |             if ($('#round-size').prop('checked')) {
101 |                 $('#round-up').prop("disabled", false);
102 |                 $('#round-down').prop("disabled", false);
103 |             } else {
104 |                 $('#round-up').prop("disabled", true);
105 |                 $('#round-down').prop("disabled", true);
106 |             }
107 |         }
108 |     });
109 | 
110 | }(isomatic));
111 | 
112 | 
113 |
114 |
115 | 116 | 117 | 118 | 119 |
120 | 121 | 124 | 125 |
126 | 127 |
128 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 129 |
130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /docs/TextView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/TextView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/TextView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Text View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.TextView = Backbone.View.extend( /** @lends TextView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class TextView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 |             this.render();
 49 | 
 50 |             // Register Model Event Listeners
 51 |             this.model.on("change:legendWidth", this.render, this);
 52 |             this.model.on("change:legendTitleHeight", this.render, this);
 53 |             this.model.on("change:drawColumnLegend", this.render, this);
 54 | 
 55 |         },
 56 | 
 57 |         /**
 58 |          * Render Text View
 59 |          */
 60 |         render: function(){
 61 | 
 62 |             var source = $('#text-template').html();
 63 |             var template = Handlebars.compile(source);
 64 |             var html = template({
 65 |                 availableFonts: isomatic.options.internal.availableFonts,
 66 |                 options: isomatic.options.ui.attributes
 67 |             });
 68 |             this.$el.html(html);
 69 | 
 70 |             Backbone.Validation.bind(this);
 71 | 
 72 |         },
 73 | 
 74 |         /**
 75 |          * Options.ui Model
 76 |          */
 77 |         model: isomatic.options.ui,
 78 | 
 79 |         events: {
 80 |             "click #text-apply": "apply",
 81 |             "click #text-apply-close": "apply"
 82 |         },
 83 | 
 84 | 
 85 |         /**
 86 |          * Apply Adjustments to Graphic
 87 |          */
 88 |         apply: function() {
 89 | 
 90 |             var state = {
 91 |                 'legendWidth': $('#legend-width').val(),
 92 |                 'legendTitleHeight': $('#legend-title-height').val(),
 93 |                 'legendFont': $('#legend-font').val(),
 94 |                 'drawColumnLegend': $('#draw-column-legend').prop('checked')
 95 |             };
 96 | 
 97 |             var isValid = this.model.set(state, {validate: true});
 98 | 
 99 |             console.log(isValid);
100 | 
101 |             if (isValid) {
102 |                 isomatic.refreshLayout();
103 |             }
104 | 
105 |         }
106 |     });
107 | 
108 | }(isomatic));
109 | 
110 | 
111 |
112 |
113 | 114 | 115 | 116 | 117 |
118 | 119 | 122 | 123 |
124 | 125 |
126 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 127 |
128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /docs/TypeView.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: views/TypeView.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: views/TypeView.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone, _, Handlebars */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Type View
 36 |      *
 37 |      * @type {*|void|Object}
 38 |      */
 39 |     isomatic.views.TypeView = Backbone.View.extend( /** @lends TypeView.prototype */ {
 40 | 
 41 |         /**
 42 |          * @class TypeView
 43 |          *
 44 |          * @augments Backbone.View
 45 |          * @contructs
 46 |          */
 47 |         initialize: function(){
 48 | 
 49 |             this.render();
 50 | 
 51 |             // Set current Type active
 52 |             var currentType = isomatic.options.ui.get('diagramType');
 53 |             $('.select-type').removeClass('active');
 54 |             $('#' + currentType + '-isotype').addClass('active');
 55 |         },
 56 |         render: function(){
 57 | 
 58 |             var source = $('#type-template').html();
 59 |             var template = Handlebars.compile(source);
 60 |             var html = template({
 61 |                 type: isomatic.options.ui.attributes.type
 62 |             });
 63 | 
 64 |             this.$el.html(html);
 65 | 
 66 | 
 67 | 
 68 |             // Init Scrollbar
 69 |             try {
 70 |                 $('.scrollbar').slimScroll({
 71 |                     'height': isomatic.options.ui.attributes.graphHeight
 72 |                 });
 73 | 
 74 |             } catch (e) {
 75 |                 console.error('Error loading Scrollbar Plugin!');
 76 |             }
 77 | 
 78 | 
 79 |         },
 80 |         events: {
 81 |             "click .select-type": "selectType"
 82 |         },
 83 | 
 84 | 
 85 | 
 86 | 
 87 | 
 88 |         /**
 89 |          * Selects the clicked on Type, deselects others
 90 |          *
 91 |          * @param  {Object} e Event Object
 92 |          */
 93 |         selectType: function(e) {
 94 |             var type = e.currentTarget.id.split('-')[0];
 95 |             $('.select-type').removeClass('active');
 96 |             $(e.currentTarget).addClass('active');
 97 |             isomatic.options.ui.set('diagramType', type);
 98 |         }
 99 |     });
100 | 
101 | }(isomatic));
102 | 
103 | 
104 |
105 |
106 | 107 | 108 | 109 | 110 |
111 | 112 | 115 | 116 |
117 | 118 |
119 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 120 |
121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /docs/UiModel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Class: UiModel 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Class: UiModel

21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |

30 | UiModel 31 |

32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |

new UiModel()

43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
Source:
78 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | 107 | 108 |

Extends

109 | 110 |
    111 |
  • Backbone.Model
  • 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 |

Members

125 | 126 |
127 | 128 |
129 |

validation :Object

130 | 131 | 132 |
133 |
134 | 135 |
136 | UI Model Validation 137 |
138 | 139 | 140 | 141 |
Type:
142 |
    143 |
  • 144 | 145 | Object 146 | 147 | 148 |
  • 149 |
150 | 151 | 152 | 153 |
154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 |
Source:
174 |
177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 |
185 | 186 | 187 | 188 |
189 | 190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 |
199 | 200 |
201 | 202 | 203 | 204 | 205 |
206 | 207 | 210 | 211 |
212 | 213 |
214 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:12 GMT+0200 (MESZ) 215 |
216 | 217 | 218 | 219 | 220 | -------------------------------------------------------------------------------- /docs/data.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: models/data.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: models/data.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Data Namespace
 36 |      * Contains 3 Data Models: Raw, Meta and Processed Data.
 37 |      */
 38 |     isomatic.data = {};
 39 | 
 40 |     /**
 41 |      * Backbone Model
 42 |      * @type {*|void|Object}
 43 |      */
 44 |     isomatic.data.DataModel = Backbone.Model.extend( /** @lends Model.prototype */ {
 45 | 
 46 |         /**
 47 |          * @class Model
 48 |          *
 49 |          * @augments Backbone.Model
 50 |          * @contructs
 51 |          */
 52 |         initialize: function () {
 53 |             console.log('isomatic.data.DataModel initialized.');
 54 |         }
 55 | 
 56 |     });
 57 | 
 58 |     /**
 59 |      * Raw Data Model
 60 |      * The unprocessed Data coming from the Data Import
 61 |      *
 62 |      * @type {isomatic.data.Model}
 63 |      */
 64 |     isomatic.data.raw = new isomatic.data.DataModel({
 65 | 
 66 |         // Contains the Raw Data
 67 |         data: isomatic.options.internal.exampleData,
 68 | 
 69 |         // Pasted Data (from Textarea)
 70 |         pastedData: ''
 71 |     });
 72 | 
 73 |     /**
 74 |      * Meta Data Model
 75 |      * (Calculated) Metainformations about the Raw Data
 76 |      *
 77 |      * @type {isomatic.data.Model}
 78 |      */
 79 |     isomatic.data.meta = new isomatic.data.DataModel({
 80 | 
 81 |         /** Minimum Value in Data */
 82 |         min: 0,
 83 |         /** Maximum Value in Data */
 84 |         max: 0,
 85 |         /** Sum of all Values in Data */
 86 |         sum: 0,
 87 |         /** Array of all Rows. Can be used to get the readable name of an Row ID */
 88 |         rows: [],
 89 |         /** Array of all Columns. Can be used to get the readable name of an Column ID */
 90 |         columns: []
 91 | 
 92 |     });
 93 | 
 94 |     /**
 95 |      * Processed Data Array
 96 |      * @type {Array}
 97 |      */
 98 |     isomatic.data.processed = [];
 99 | 
100 | 
101 | }(isomatic));
102 | 
103 | 
104 |
105 |
106 | 107 | 108 | 109 | 110 |
111 | 112 | 115 | 116 |
117 | 118 |
119 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 120 |
121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Index 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Index

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 53 | 54 |
55 | 56 |
57 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 58 |
59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /docs/router.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSDoc: Source: router.js 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Source: router.js

21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
/* jshint jquery:true, devel: true */
 29 | /* global isomatic, d3, Backbone */
 30 | 
 31 | (function(isomatic) {
 32 |     "use strict";
 33 | 
 34 |     /**
 35 |      * Isomatic Routing
 36 |      * Defines all App Routes
 37 |      */
 38 |     var IsomaticRouter = Backbone.Router.extend({
 39 | 
 40 |         routes: {
 41 |             "home": "home",
 42 |             "new": "newGraphic",
 43 |             "import": "importGraphic",
 44 |             "export": "exportGraphic",
 45 |             "help": "help",
 46 |             "data": "data",
 47 |             "type": "type",
 48 |             "color": "color",
 49 |             "icon": "icon",
 50 |             "adjustments": "adjustments",
 51 |             "scale": "scale",
 52 |             "text": "text"
 53 |         },
 54 | 
 55 |         /** Home Screen. No Overlays shown */
 56 |         home: function() {
 57 |             $(".overlay-container").hide();
 58 |             $(".trigger-ui").removeClass('active');
 59 |             $('#graph').removeClass('move-right');
 60 |         },
 61 | 
 62 |         newGraphic: function() {
 63 |             // Modal
 64 |         },
 65 | 
 66 |         importGraphic: function() {
 67 |             // Modal
 68 |         },
 69 | 
 70 |         exportGraphic: function() {
 71 |             // Modal
 72 |         },
 73 | 
 74 |         help: function() {
 75 |             // Modal
 76 |         },
 77 | 
 78 |         data: function() {
 79 |             this.triggerUi('data', true);
 80 |         },
 81 | 
 82 |         type: function() {
 83 |             this.triggerUi('type', false);
 84 |         },
 85 | 
 86 |         color: function() {
 87 |             this.triggerUi('color', true);
 88 |         },
 89 | 
 90 |         icon: function() {
 91 |             this.triggerUi('icon', true);
 92 |         },
 93 | 
 94 |         adjustments: function() {
 95 |             this.triggerUi('adjustments', false);
 96 |         },
 97 | 
 98 |         scale: function() {
 99 |             this.triggerUi('scale', false);
100 |         },
101 | 
102 |         text: function() {
103 |             this.triggerUi('text', false);
104 |         },
105 | 
106 |         ////////////////////////////////////
107 |         // Helper Functions               //
108 |         ////////////////////////////////////
109 | 
110 |         /**
111 |          * Handles UI Elements
112 |          * @param id
113 |          */
114 |         triggerUi: function(id, isBig) {
115 |             $(".trigger-ui").removeClass('active');
116 |             $(".overlay-container").hide();
117 |             $("#trigger-" + id).addClass('active');
118 |             $('#' + id + '-container').show();
119 | 
120 |             if (!isBig) {
121 |                 $('#graph').addClass('move-right');
122 |             }
123 | 
124 |         }
125 |     });
126 | 
127 |     /**
128 |      * Isomatic Router
129 |      * @type {AppRouter}
130 |      */
131 |     isomatic.router = new IsomaticRouter();
132 | 
133 | 
134 |     // Start Backbone history a necessary step for bookmarkable URL's
135 |     Backbone.history.start();
136 | 
137 | }(isomatic));
138 | 
139 | 
140 |
141 |
142 | 143 | 144 | 145 | 146 |
147 | 148 | 151 | 152 |
153 | 154 |
155 | Documentation generated by JSDoc 3.2.2 on Wed Apr 09 2014 16:28:11 GMT+0200 (MESZ) 156 |
157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /docs/scripts/linenumber.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var counter = 0; 3 | var numbered; 4 | var source = document.getElementsByClassName('prettyprint source'); 5 | 6 | if (source && source[0]) { 7 | source = source[0].getElementsByTagName('code')[0]; 8 | 9 | numbered = source.innerHTML.split('\n'); 10 | numbered = numbered.map(function(item) { 11 | counter++; 12 | return '' + item; 13 | }); 14 | 15 | source.innerHTML = numbered.join('\n'); 16 | } 17 | })(); 18 | -------------------------------------------------------------------------------- /docs/scripts/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", 2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /docs/styles/prettify-jsdoc.css: -------------------------------------------------------------------------------- 1 | /* JSDoc prettify.js theme */ 2 | 3 | /* plain text */ 4 | .pln { 5 | color: #000000; 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | /* string content */ 11 | .str { 12 | color: #006400; 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | /* a keyword */ 18 | .kwd { 19 | color: #000000; 20 | font-weight: bold; 21 | font-style: normal; 22 | } 23 | 24 | /* a comment */ 25 | .com { 26 | font-weight: normal; 27 | font-style: italic; 28 | } 29 | 30 | /* a type name */ 31 | .typ { 32 | color: #000000; 33 | font-weight: normal; 34 | font-style: normal; 35 | } 36 | 37 | /* a literal value */ 38 | .lit { 39 | color: #006400; 40 | font-weight: normal; 41 | font-style: normal; 42 | } 43 | 44 | /* punctuation */ 45 | .pun { 46 | color: #000000; 47 | font-weight: bold; 48 | font-style: normal; 49 | } 50 | 51 | /* lisp open bracket */ 52 | .opn { 53 | color: #000000; 54 | font-weight: bold; 55 | font-style: normal; 56 | } 57 | 58 | /* lisp close bracket */ 59 | .clo { 60 | color: #000000; 61 | font-weight: bold; 62 | font-style: normal; 63 | } 64 | 65 | /* a markup tag name */ 66 | .tag { 67 | color: #006400; 68 | font-weight: normal; 69 | font-style: normal; 70 | } 71 | 72 | /* a markup attribute name */ 73 | .atn { 74 | color: #006400; 75 | font-weight: normal; 76 | font-style: normal; 77 | } 78 | 79 | /* a markup attribute value */ 80 | .atv { 81 | color: #006400; 82 | font-weight: normal; 83 | font-style: normal; 84 | } 85 | 86 | /* a declaration */ 87 | .dec { 88 | color: #000000; 89 | font-weight: bold; 90 | font-style: normal; 91 | } 92 | 93 | /* a variable name */ 94 | .var { 95 | color: #000000; 96 | font-weight: normal; 97 | font-style: normal; 98 | } 99 | 100 | /* a function name */ 101 | .fun { 102 | color: #000000; 103 | font-weight: bold; 104 | font-style: normal; 105 | } 106 | 107 | /* Specify class=linenums on a pre to get line numbering */ 108 | ol.linenums { 109 | margin-top: 0; 110 | margin-bottom: 0; 111 | } 112 | -------------------------------------------------------------------------------- /docs/styles/prettify-tomorrow.css: -------------------------------------------------------------------------------- 1 | /* Tomorrow Theme */ 2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */ 3 | /* Pretty printing styles. Used with prettify.js. */ 4 | /* SPAN elements with the classes below are added by prettyprint. */ 5 | /* plain text */ 6 | .pln { 7 | color: #4d4d4c; } 8 | 9 | @media screen { 10 | /* string content */ 11 | .str { 12 | color: #718c00; } 13 | 14 | /* a keyword */ 15 | .kwd { 16 | color: #8959a8; } 17 | 18 | /* a comment */ 19 | .com { 20 | color: #8e908c; } 21 | 22 | /* a type name */ 23 | .typ { 24 | color: #4271ae; } 25 | 26 | /* a literal value */ 27 | .lit { 28 | color: #f5871f; } 29 | 30 | /* punctuation */ 31 | .pun { 32 | color: #4d4d4c; } 33 | 34 | /* lisp open bracket */ 35 | .opn { 36 | color: #4d4d4c; } 37 | 38 | /* lisp close bracket */ 39 | .clo { 40 | color: #4d4d4c; } 41 | 42 | /* a markup tag name */ 43 | .tag { 44 | color: #c82829; } 45 | 46 | /* a markup attribute name */ 47 | .atn { 48 | color: #f5871f; } 49 | 50 | /* a markup attribute value */ 51 | .atv { 52 | color: #3e999f; } 53 | 54 | /* a declaration */ 55 | .dec { 56 | color: #f5871f; } 57 | 58 | /* a variable name */ 59 | .var { 60 | color: #c82829; } 61 | 62 | /* a function name */ 63 | .fun { 64 | color: #4271ae; } } 65 | /* Use higher contrast and text-weight for printable form. */ 66 | @media print, projection { 67 | .str { 68 | color: #060; } 69 | 70 | .kwd { 71 | color: #006; 72 | font-weight: bold; } 73 | 74 | .com { 75 | color: #600; 76 | font-style: italic; } 77 | 78 | .typ { 79 | color: #404; 80 | font-weight: bold; } 81 | 82 | .lit { 83 | color: #044; } 84 | 85 | .pun, .opn, .clo { 86 | color: #440; } 87 | 88 | .tag { 89 | color: #006; 90 | font-weight: bold; } 91 | 92 | .atn { 93 | color: #404; } 94 | 95 | .atv { 96 | color: #060; } } 97 | /* Style */ 98 | /* 99 | pre.prettyprint { 100 | background: white; 101 | font-family: Menlo, Monaco, Consolas, monospace; 102 | font-size: 12px; 103 | line-height: 1.5; 104 | border: 1px solid #ccc; 105 | padding: 10px; } 106 | */ 107 | 108 | /* Specify class=linenums on a pre to get line numbering */ 109 | ol.linenums { 110 | margin-top: 0; 111 | margin-bottom: 0; } 112 | 113 | /* IE indents via margin-left */ 114 | li.L0, 115 | li.L1, 116 | li.L2, 117 | li.L3, 118 | li.L4, 119 | li.L5, 120 | li.L6, 121 | li.L7, 122 | li.L8, 123 | li.L9 { 124 | /* */ } 125 | 126 | /* Alternate shading for lines */ 127 | li.L1, 128 | li.L3, 129 | li.L5, 130 | li.L7, 131 | li.L9 { 132 | /* */ } 133 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "isomatic", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "node-sass": "*", 6 | "bower": "*", 7 | "jshint-stylish": "~0.1.3", 8 | "load-grunt-tasks": "*", 9 | "time-grunt": "~0.2.3", 10 | "grunt": "*", 11 | "grunt-sass": "*", 12 | "grunt-jsdoc": "*", 13 | "grunt-usemin": "~2.1.0", 14 | "grunt-uncss": "~0.3.0", 15 | "grunt-sizediff": "*", 16 | "grunt-content": "*", 17 | "grunt-contrib-uglify": "*", 18 | "grunt-contrib-watch": "*", 19 | "grunt-contrib-connect": "*", 20 | "grunt-contrib-jshint": "~0.8.0", 21 | "grunt-contrib-concat": "~0.3.0", 22 | "grunt-contrib-clean": "~0.5.0", 23 | "grunt-contrib-copy": "~0.5.0", 24 | "grunt-contrib-cssmin": "~0.7.0", 25 | "grunt-contrib-qunit": "~0.4.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "devel": true, 4 | "jquery": true, 5 | "eqeqeq": true, 6 | "immed": true, 7 | "latedef": true, 8 | "newcap": true, 9 | "noarg": true, 10 | "sub": true, 11 | "undef": true, 12 | "unused": false, 13 | "boss": true, 14 | "eqnull": true, 15 | "browser": true, 16 | "predef": ["jQuery", "d3", "$"] 17 | } 18 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/favicon.ico -------------------------------------------------------------------------------- /src/fonts/FiraSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/fonts/FiraSans-Light.ttf -------------------------------------------------------------------------------- /src/fonts/FiraSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/fonts/FiraSans-Light.woff -------------------------------------------------------------------------------- /src/fonts/FiraSans-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/fonts/FiraSans-Regular.eot -------------------------------------------------------------------------------- /src/fonts/FiraSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/fonts/FiraSans-Regular.ttf -------------------------------------------------------------------------------- /src/fonts/FiraSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/fonts/FiraSans-Regular.woff -------------------------------------------------------------------------------- /src/img/examples/FamilyIncomes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/examples/FamilyIncomes.png -------------------------------------------------------------------------------- /src/img/examples/FreeShipment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/examples/FreeShipment.png -------------------------------------------------------------------------------- /src/img/examples/SocialMedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/examples/SocialMedia.png -------------------------------------------------------------------------------- /src/img/tour/AspectRatio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/AspectRatio.png -------------------------------------------------------------------------------- /src/img/tour/ColorpickerColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/ColorpickerColor.png -------------------------------------------------------------------------------- /src/img/tour/ColumnMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/ColumnMargin.png -------------------------------------------------------------------------------- /src/img/tour/DADIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/DADIcon.png -------------------------------------------------------------------------------- /src/img/tour/DataImport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/DataImport.png -------------------------------------------------------------------------------- /src/img/tour/Export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/Export.png -------------------------------------------------------------------------------- /src/img/tour/HorizontalMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/HorizontalMargin.png -------------------------------------------------------------------------------- /src/img/tour/IconSize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/IconSize.png -------------------------------------------------------------------------------- /src/img/tour/Import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/Import.png -------------------------------------------------------------------------------- /src/img/tour/IsotypeLayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/IsotypeLayout.png -------------------------------------------------------------------------------- /src/img/tour/LegendSettings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/LegendSettings.png -------------------------------------------------------------------------------- /src/img/tour/OuterMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/OuterMargin.png -------------------------------------------------------------------------------- /src/img/tour/RoundSize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/RoundSize.png -------------------------------------------------------------------------------- /src/img/tour/RowMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/RowMargin.png -------------------------------------------------------------------------------- /src/img/tour/TypeEqually.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/TypeEqually.png -------------------------------------------------------------------------------- /src/img/tour/TypeLines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/TypeLines.png -------------------------------------------------------------------------------- /src/img/tour/VerticalMargin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/VerticalMargin.png -------------------------------------------------------------------------------- /src/img/tour/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/img/tour/loading.png -------------------------------------------------------------------------------- /src/img/ui/Help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/img/ui/adjustments.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/img/ui/choose.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/img/ui/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/img/ui/color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/img/ui/column.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/img/ui/columnmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/img/ui/compare_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/img/ui/data.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/img/ui/examples.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/img/ui/export.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/img/ui/horizontalmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/img/ui/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/img/ui/iconsize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/img/ui/import.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/img/ui/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 21 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | 31 | 39 | 44 | 48 | 55 | 58 | 59 | 63 | 64 | 66 | 68 | 69 | -------------------------------------------------------------------------------- /src/img/ui/new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/img/ui/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/img/ui/normal_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/img/ui/outermarign.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/img/ui/previous.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/img/ui/row.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/img/ui/rowlegend.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/img/ui/rowmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/img/ui/scale.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/img/ui/size_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/img/ui/team.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/img/ui/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/img/ui/titleheight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/img/ui/type.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/img/ui/versus_isotype.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/img/ui/verticalmargin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/js/isotypeLayout.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3 */ 3 | 4 | /** 5 | * Isotype Layout 6 | * 2013 Simon Heimler 7 | * 8 | * TODO: Write Description 9 | * 10 | * @returns {Function} 11 | */ 12 | d3.layout.isotype = function() { 13 | "use strict"; 14 | 15 | /** 16 | * This is the scale how much one icon represents. 17 | * Warning: This must be adjusted to the incoming data, otherwise it can lead to massive overload. 18 | * 19 | * @type {number} 20 | */ 21 | var scale = 1; 22 | 23 | /** 24 | * If the remainder of a value is lower than this, the value is completely floored. 25 | * This helps avoiding too small icons. 26 | * 27 | * @type {number} 28 | */ 29 | var roundDown = 0.5; 30 | 31 | /** 32 | * If the remainder of a value is higher than this, the value is completely ceiled. 33 | * 34 | * @type {number} 35 | */ 36 | var roundUp = 0.5; 37 | 38 | /** 39 | * Isotype Layout 40 | * 2013-2014 Simon Heimler 41 | * 42 | * @param data Incoming (raw) Data 43 | * @returns {Array} Processed Data 44 | */ 45 | function isotype(data) { 46 | 47 | /** 48 | * Processed Data with an Item per rendered Icon 49 | * @type {Array} 50 | */ 51 | var processedData = []; 52 | 53 | 54 | /////////////////////////////////////// 55 | // Calculating Layout // 56 | /////////////////////////////////////// 57 | 58 | // Iterate over Rows 59 | for (var rowCounter = 0; rowCounter < data.length; rowCounter++) { 60 | 61 | var columnCounter = 0; 62 | var iconPosition = 0; 63 | var currentRow = data[rowCounter]; 64 | 65 | // Iterate over Columns 66 | for (var obj in currentRow) { 67 | 68 | if(currentRow.hasOwnProperty(obj)){ 69 | 70 | var v = parseFloat(currentRow[obj]); 71 | 72 | if (columnCounter > 0) { 73 | 74 | 75 | /////////////////////////////////////////// 76 | // Round the Value according to Options // 77 | /////////////////////////////////////////// 78 | 79 | var value = 0; 80 | 81 | var roundedValue = Math.floor(v / scale); 82 | var leftOver = (v / scale) % 1; 83 | 84 | if (leftOver > roundDown && leftOver < roundUp) { 85 | value = roundedValue + leftOver; 86 | } else if (leftOver > 0.5) { 87 | value = roundedValue + 1; 88 | } else { 89 | value = roundedValue; 90 | } 91 | 92 | 93 | /////////////////////////////////////////// 94 | // Calculate Processed Data // 95 | /////////////////////////////////////////// 96 | 97 | // Iterate over Icons 98 | for (var relativePos = 0; relativePos < Math.ceil(value); relativePos++) { 99 | 100 | // Calculate Size 101 | var size = 1; 102 | if (relativePos === Math.ceil(value) - 1 && value % 1 !== 0) { 103 | size = value % 1; 104 | } 105 | 106 | processedData.push({ 107 | row: rowCounter, 108 | col: columnCounter - 1, 109 | pos: iconPosition, 110 | relativePos: relativePos, 111 | size: size 112 | }); 113 | 114 | iconPosition += 1; 115 | } 116 | } 117 | 118 | columnCounter += 1; 119 | } 120 | } 121 | 122 | } 123 | 124 | return processedData; 125 | } 126 | 127 | 128 | /** 129 | * Sets the Scale how much one icon is representating 130 | * This is mandatory! 131 | * 132 | * @param n Scale Factor 133 | * @returns {Function} 134 | */ 135 | isotype.scale = function(n) { 136 | 137 | scale = parseFloat(n); 138 | 139 | // TODO: Error Handling? 140 | if (!scale || scale === 0 || isNaN(scale) ) { 141 | console.error('No valid scale! ' + scale); 142 | } 143 | 144 | return isotype; 145 | }; 146 | 147 | /** 148 | * Sets the Option when the Size is rounded down to reduce visual clutter 149 | * This is optional. 150 | * 151 | * @param n 152 | * @returns {Function} 153 | */ 154 | isotype.roundDown = function(n) { 155 | roundDown = n; 156 | return isotype; 157 | }; 158 | 159 | /** 160 | * Sets the Option when the Size is rounded up to reduce visual clutter 161 | * This is optional. 162 | * 163 | * @param n 164 | * @returns {Function} 165 | */ 166 | isotype.roundUp = function(n) { 167 | roundUp = n; 168 | return isotype; 169 | }; 170 | 171 | return isotype; 172 | }; 173 | -------------------------------------------------------------------------------- /src/js/models/data.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Data Namespace 9 | * Contains 3 Data Models: Raw, Meta and Processed Data. 10 | */ 11 | isomatic.data = {}; 12 | 13 | /** 14 | * Backbone Model 15 | * @type {*|void|Object} 16 | */ 17 | isomatic.data.DataModel = Backbone.Model.extend( /** @lends Model.prototype */ { 18 | 19 | /** 20 | * @class Model 21 | * 22 | * @augments Backbone.Model 23 | * @contructs 24 | */ 25 | initialize: function () { 26 | // console.log('isomatic.data.DataModel initialized.'); 27 | } 28 | 29 | }); 30 | 31 | /** 32 | * Raw Data Model 33 | * The unprocessed Data coming from the Data Import 34 | * 35 | * @type {isomatic.data.Model} 36 | */ 37 | isomatic.data.raw = new isomatic.data.DataModel({ 38 | 39 | // Contains the Raw Data 40 | data: isomatic.options.internal.exampleData, 41 | 42 | // Pasted Data (from Textarea) 43 | pastedData: '' 44 | }); 45 | 46 | /** 47 | * Meta Data Model 48 | * (Calculated) Metainformations about the Raw Data 49 | * 50 | * @type {isomatic.data.Model} 51 | */ 52 | isomatic.data.meta = new isomatic.data.DataModel({ 53 | 54 | /** Minimum Value in Data */ 55 | min: 0, 56 | /** Maximum Value in Data */ 57 | max: 0, 58 | /** Sum of all Values in Data */ 59 | sum: 0, 60 | /** Array of all Rows. Can be used to get the readable name of an Row ID */ 61 | rows: [], 62 | /** Array of all Columns. Can be used to get the readable name of an Column ID */ 63 | columns: [] 64 | 65 | }); 66 | 67 | /** 68 | * Processed Data Array 69 | * @type {Array} 70 | */ 71 | isomatic.data.processed = []; 72 | 73 | 74 | }(isomatic)); 75 | 76 | -------------------------------------------------------------------------------- /src/js/views/AdjustmentsView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Adjustments View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.AdjustmentsView = Backbone.View.extend( /** @lends AdjustmentsView.prototype */ { 13 | 14 | /** 15 | * @class AdjustmentsView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | 22 | this.render(); 23 | 24 | // Register Model Event Listeners 25 | this.model.on("change:outerMargin", this.render, this); 26 | this.model.on("change:iconHorizontalMargin", this.render, this); 27 | this.model.on("change:rowMargin", this.render, this); 28 | this.model.on("change:columnMargin", this.render, this); 29 | this.model.on("change:iconSize", this.render, this); 30 | this.model.on("change:diagramType", this.render, this); 31 | 32 | }, 33 | 34 | /** 35 | * Render Adjustment View 36 | */ 37 | render: function(){ 38 | 39 | var source = $('#adjustments-template').html(); 40 | var template = Handlebars.compile(source); 41 | 42 | var advancedOptions = false; 43 | if (isomatic.options.ui.attributes.diagramType !== 'normal') { 44 | advancedOptions = true; 45 | } 46 | 47 | var html = template({ 48 | options: this.model.attributes, 49 | advancedOptions: advancedOptions 50 | }); 51 | 52 | this.$el.html(html); 53 | 54 | Backbone.Validation.bind(this); 55 | 56 | this.activateIconSize(); 57 | 58 | // Init Scrollbar 59 | try { 60 | var slimScrollOptions = isomatic.options.internal.slimScrollOptions; 61 | slimScrollOptions.height = isomatic.options.ui.attributes.graphHeight - 80; 62 | $('#adjustments-container .scrollbar').slimScroll(slimScrollOptions); 63 | } catch (e) { 64 | console.error('Error loading Scrollbar Plugin!'); 65 | } 66 | 67 | }, 68 | 69 | /** 70 | * Options.ui Model 71 | */ 72 | model: isomatic.options.ui, 73 | 74 | /** 75 | * Adjustment View UI Events 76 | */ 77 | events: { 78 | "click #adjustments-apply": "apply", 79 | "click #adjustments-apply-close": "apply", 80 | "click #auto-icon-size": "activateIconSize", 81 | "keydown input": "keyDown" 82 | }, 83 | 84 | /** 85 | * Register the enter key in input fields 86 | * @param e 87 | */ 88 | keyDown: function(e) { 89 | if (e.which === 13) { 90 | e.preventDefault(); 91 | this.apply(); 92 | } 93 | }, 94 | 95 | /** 96 | * Apply Adjustments to Graphic 97 | */ 98 | apply: function() { 99 | 100 | var state = { 101 | 'outerMargin': $('#outer-margin').val(), 102 | 'iconHorizontalMargin': $('#icon-horizontal-margin').val(), 103 | 'iconVerticalMargin': $('#icon-vertical-margin').val() || 0, 104 | 'rowMargin': $('#row-margin').val(), 105 | 'columnMargin': $('#column-margin').val() || 0, 106 | 'iconSize': $('#icon-size').val(), 107 | 'autoIconSize': $('#auto-icon-size').prop('checked') 108 | }; 109 | 110 | var isValid = this.model.set(state, {validate: true}); 111 | 112 | if (isValid) { 113 | isomatic.refreshData(); 114 | } 115 | 116 | }, 117 | 118 | /** 119 | * Activate the automatic icon size 120 | */ 121 | activateIconSize: function() { 122 | if ($('#auto-icon-size').prop('checked')) { 123 | $('#icon-size').prop("disabled", true); 124 | } else { 125 | $('#icon-size').prop("disabled", false); 126 | } 127 | } 128 | 129 | }); 130 | 131 | }(isomatic)); 132 | 133 | -------------------------------------------------------------------------------- /src/js/views/ExamplesView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | isomatic.views.ExamplesView = Backbone.View.extend( /** @lends ExportView.prototype */ { 8 | 9 | /** 10 | * This View is for Exporting the current Graphic to SVG or JSON Files 11 | * They can optionally be filled with the current Data and Options 12 | * If they are they can be imported again by the ImportView 13 | * 14 | * @class ExportView 15 | * @augments Backbone.View 16 | * @contructs 17 | */ 18 | initialize: function(){ 19 | // Delayed Render, triggered via the router! 20 | }, 21 | 22 | /** Render Export View */ 23 | render: function(){ 24 | var source = $('#examples-template').html(); 25 | var template = Handlebars.compile(source); 26 | 27 | var examples = []; 28 | 29 | for (var exampleName in isomatic.options.examples) { 30 | examples.push({ 31 | id: exampleName, 32 | title: isomatic.options.examples[exampleName].title 33 | }); 34 | } 35 | 36 | var html = template({ 37 | examples: examples 38 | }); 39 | this.$el.html(html); 40 | }, 41 | 42 | events: { 43 | "click .example-thumb": "loadExample" 44 | }, 45 | 46 | /** 47 | * Load the example options and data from a selected preset 48 | * @param el 49 | */ 50 | loadExample: function(el) { 51 | var targetExample = el.target.alt; 52 | 53 | if (isomatic.options.examples[targetExample]) { 54 | var example = isomatic.options.examples[targetExample]; 55 | 56 | isomatic.options.ui.set(example.options); 57 | isomatic.data.raw.set(example.data); 58 | 59 | isomatic.refreshData(); 60 | 61 | $('#examples-modal').foundation('reveal', 'close'); 62 | } else { 63 | console.log('Error loading Example!'); 64 | } 65 | 66 | } 67 | 68 | }); 69 | 70 | 71 | }(isomatic)); 72 | 73 | -------------------------------------------------------------------------------- /src/js/views/ExportView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | isomatic.views.ExportView = Backbone.View.extend( /** @lends ExportView.prototype */ { 8 | 9 | /** 10 | * This View is for Exporting the current Graphic to SVG or JSON Files 11 | * They can optionally be filled with the current Data and Options 12 | * If they are they can be imported again by the ImportView 13 | * 14 | * @class ExportView 15 | * @augments Backbone.View 16 | * @contructs 17 | */ 18 | initialize: function(){ 19 | this.render(); 20 | }, 21 | 22 | /** Render Export View */ 23 | render: function(){ 24 | var source = $('#export-template').html(); 25 | var template = Handlebars.compile(source); 26 | var html = template(); 27 | this.$el.html(html); 28 | }, 29 | 30 | events: { 31 | "click #start-export": "startExport", 32 | "click .select-format": "selectFormat" 33 | }, 34 | 35 | /** Currently selected Export-Format. Defaults to SVG Export */ 36 | selectedFormat: 'svg', 37 | 38 | /** 39 | * Select an isotype format 40 | * @param e 41 | */ 42 | selectFormat: function(e) { 43 | var type = e.currentTarget.id; 44 | $('.select-format').addClass('disabled'); 45 | $(e.currentTarget).removeClass('disabled'); 46 | 47 | if (type === 'format-svg') { 48 | this.selectedFormat = 'svg'; 49 | $('#export-modal input').removeAttr('disabled'); 50 | } else { 51 | this.selectedFormat = 'json'; 52 | $('#export-modal input').attr('disabled', true); 53 | } 54 | 55 | }, 56 | 57 | /** 58 | * Start the export of a svg and/or json 59 | */ 60 | startExport: function() { 61 | if (this.selectedFormat === 'svg') { 62 | this.exportSVG(); 63 | } else { 64 | this.exportJSON(); 65 | } 66 | }, 67 | 68 | /** 69 | * Exports current Graphic as SVG 70 | * Embeds current Options and Data, too. 71 | */ 72 | exportSVG: function() { 73 | 74 | // console.log('ExportView.exportSVG();'); 75 | 76 | this.embedData(); 77 | 78 | var content = '\n'; 79 | content += '\n'; 80 | content += $('#graph').html(); 81 | 82 | var filename = isomatic.getFormattedTime() + ".svg"; 83 | 84 | $.generateFile({ 85 | filename: filename, 86 | content: content, 87 | script: 'http://svg-generator.de/download.php' 88 | }); 89 | 90 | }, 91 | 92 | /** 93 | * Exports Options and Data as JSON Object 94 | */ 95 | exportJSON: function() { 96 | 97 | // console.log('ExportView.exportJSON();'); 98 | 99 | var content = this.embedData(); 100 | var filename = isomatic.getFormattedTime() + ".json"; 101 | 102 | $.generateFile({ 103 | filename: filename, 104 | content: content, 105 | script: 'http://svg-generator.de/download.php' 106 | }); 107 | }, 108 | 109 | /** 110 | * Embeds current Options and Data into the SVG 111 | * Helper Function 112 | */ 113 | embedData: function() { 114 | 115 | // console.log('ExportView.embedData();'); 116 | 117 | var data = ''; 118 | var options = ''; 119 | 120 | if ($('#export-data').is(':checked')) { 121 | data = isomatic.data.raw.get('data'); 122 | } 123 | 124 | if ($('#export-options').is(':checked')) { 125 | options = isomatic.options.ui.toJSON(); 126 | } 127 | 128 | var jsonExport = { 129 | data: data, 130 | options: options 131 | }; 132 | 133 | var jsonStringExport = JSON.stringify(jsonExport, null, 2); 134 | 135 | // Check if description tag already exists. If not create it, otherwise update it. 136 | var desc = $('#isomatic-metadata'); 137 | if (desc.length === 0) { 138 | isomatic.views.graphView.svg.append("desc") 139 | .attr("id", "isomatic-metadata") 140 | .text(jsonStringExport); 141 | } else { 142 | desc.text(jsonStringExport); 143 | } 144 | 145 | return jsonStringExport; 146 | } 147 | }); 148 | 149 | 150 | }(isomatic)); 151 | 152 | -------------------------------------------------------------------------------- /src/js/views/HelpView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Help View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.HelpView = Backbone.View.extend( /** @lends HelpView.prototype */ { 13 | 14 | /** 15 | * @class HelpView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | this.render(); 22 | }, 23 | 24 | /** 25 | * Render Help View 26 | */ 27 | render: function(){ 28 | 29 | var source = $('#help-template').html(); 30 | var template = Handlebars.compile(source); 31 | 32 | var advancedOptions = false; 33 | if (isomatic.options.ui.attributes.diagramType !== 'normal') { 34 | advancedOptions = true; 35 | } 36 | 37 | var html = template({ 38 | palettes: isomatic.options.internal.colorPalettes, 39 | advancedOptions: advancedOptions 40 | }); 41 | 42 | this.$el.html(html); 43 | 44 | // Init Scrollbar 45 | try { 46 | var slimScrollOptions = { 47 | height: isomatic.options.ui.attributes.graphHeight - 40, 48 | alwaysVisible: true, 49 | railVisible: true, 50 | color: '#EEE', 51 | railColor: '#222', 52 | railOpacity: 1 53 | }; 54 | 55 | $('#help-container .scrollbar').slimScroll(slimScrollOptions); 56 | 57 | slimScrollOptions.height = isomatic.options.ui.attributes.graphHeight - 80; 58 | 59 | $('#help-container .scrollbar-tour').slimScroll(slimScrollOptions); 60 | 61 | } catch (e) { 62 | console.error('Error loading Scrollbar Plugin!'); 63 | } 64 | 65 | }, 66 | events: { 67 | "click .help-option-nav": "setNavigation" 68 | }, 69 | 70 | /** 71 | * Change highlighted option within the help 72 | * @param e 73 | */ 74 | setNavigation: function(e) { 75 | // Remove old help and show new help 76 | var id = e.currentTarget.id; 77 | $('.help-option-nav').removeClass("active"); 78 | $('#' + id).addClass("active"); 79 | $('.help-right-option-container').hide(); 80 | $('#' + id + '-container').show(); 81 | 82 | // Highlight according UI Element on the left side 83 | $('.highlightable').removeClass('highlight'); 84 | $('.' + id + '-highlight').addClass('highlight'); 85 | } 86 | }); 87 | 88 | }(isomatic)); 89 | 90 | -------------------------------------------------------------------------------- /src/js/views/IconLibraryView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Icon View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.IconLibraryView = Backbone.View.extend( /** @lends IconLibraryView.prototype */ { 13 | 14 | /** 15 | * @class IconLibraryView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | this.render(); 22 | }, 23 | 24 | /** Render Icon View */ 25 | render: function(){ 26 | 27 | var source = $('#icon-right-template').html(); 28 | var template = Handlebars.compile(source); 29 | 30 | var html = template({ 31 | iconLibrary: isomatic.icons 32 | }); 33 | 34 | this.$el.html(html); 35 | 36 | // Display SVG Icons: 37 | // Take SVG Paths out from helper attribute "svg-content" and parse it into the div 38 | // SVG can't be parsed with the template engine! 39 | $('.category-icon').each( 40 | function(){ 41 | var el = $(this); 42 | var content = el.attr('svg-content'); 43 | var id = el.attr('id').split('-'); 44 | el.html('' + content + ''); 45 | el.removeAttr('svg-content'); 46 | } 47 | ); 48 | 49 | // Init Scrollbar 50 | try { 51 | var slimScrollOptions = isomatic.options.internal.slimScrollOptions; 52 | slimScrollOptions.height = isomatic.options.ui.attributes.graphHeight - 34; 53 | $('#icon-right-container .scrollbar').slimScroll(slimScrollOptions); 54 | } catch (e) { 55 | console.error('Error loading Scrollbar Plugin!'); 56 | } 57 | 58 | }, 59 | 60 | model: isomatic.icons, 61 | 62 | currentTarget: null, 63 | 64 | events: { 65 | "dragstart .category-icon": "handleDrag" 66 | }, 67 | 68 | /** 69 | * Drag and Drop dragging 70 | * @param e 71 | */ 72 | handleDrag: function(e) { 73 | e.originalEvent.dataTransfer.setData("Text", e.target.id); 74 | } 75 | 76 | }); 77 | 78 | }(isomatic)); 79 | 80 | -------------------------------------------------------------------------------- /src/js/views/NewView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | isomatic.views.NewView = Backbone.View.extend( /** @lends NewView.prototype */ { 8 | 9 | /** 10 | * @class NewView 11 | * 12 | * @augments Backbone.View 13 | * @contructs 14 | */ 15 | initialize: function(){ 16 | this.render(); 17 | }, 18 | 19 | /** Render New Graphic View */ 20 | render: function(){ 21 | 22 | var source = $('#new-template').html(); 23 | var template = Handlebars.compile(source); 24 | var html = template({ 25 | options: isomatic.options.ui.attributes 26 | }); 27 | this.$el.html(html); 28 | 29 | Backbone.Validation.bind(this); 30 | 31 | // Register Model Event Listeners 32 | this.model.on("change:aspectRatio", this.render, this); 33 | 34 | 35 | }, 36 | 37 | /** 38 | * Options.ui Model 39 | */ 40 | model: isomatic.options.ui, 41 | 42 | events: { 43 | "click #new-canvas-apply": "applyAspectRatio", 44 | "click #new-graphic-apply": "applyNewGraphic", 45 | "change #aspect-ratio": "changeAspectRatio", 46 | "change #aspect-ratio-width": "changeAspectRatioSizing", 47 | "change #aspect-ratio-height": "changeAspectRatioSizing" 48 | }, 49 | 50 | /** 51 | * Applies the currently calculated Aspect Ratio to the Graphic Canvas 52 | */ 53 | applyAspectRatio: function() { 54 | 55 | console.log('NewView.applyAspectRatio'); 56 | 57 | var aspectRatio = this.getAspectRatio(); 58 | 59 | var state = { 60 | 'aspectRatio': aspectRatio 61 | }; 62 | 63 | var isValid = this.model.set(state, {validate: true}); 64 | 65 | if (isValid) { 66 | isomatic.refreshLayout(); 67 | } 68 | 69 | }, 70 | 71 | /** 72 | * Applies the currently calculated Aspect Ratio to the Graphic Canvas 73 | */ 74 | applyNewGraphic: function() { 75 | 76 | console.log('NewView.applyNewGraphic'); 77 | 78 | var aspectRatio = this.getAspectRatio(); 79 | 80 | var state = { 81 | 'aspectRatio': aspectRatio 82 | }; 83 | 84 | var isValid = this.model.set(state, {validate: true}); 85 | 86 | if (isValid) { 87 | isomatic.data.raw.set({ 88 | data: {} 89 | }); 90 | isomatic.refreshData(); 91 | } 92 | 93 | }, 94 | 95 | /** 96 | * Triggered if Aspect Ratio is changed. Adjusts Height 97 | */ 98 | changeAspectRatio: function() { 99 | var aspectRatio = this.getAspectRatio(); 100 | var width = $('#aspect-ratio-width').val(); 101 | var height = width / aspectRatio; 102 | $('#aspect-ratio-height').val(height); 103 | }, 104 | 105 | /** 106 | * Triggered if Width or Height is changed. Adjusts Aspect Ratio 107 | */ 108 | changeAspectRatioSizing: function() { 109 | var width = $('#aspect-ratio-width').val(); 110 | var height = $('#aspect-ratio-height').val(); 111 | 112 | $('#aspect-ratio').val(width / height); 113 | }, 114 | 115 | /** 116 | * Gets and calculates current Aspect Ratio 117 | * If an Fraction is entered (16/9), the Ratio will be calculated 118 | * 119 | * @return {Float} Aspect Ratio Float 120 | */ 121 | getAspectRatio: function() { 122 | var aspectRatio = $('#aspect-ratio').val(); 123 | if (aspectRatio.indexOf("/") !== -1) { // If Value contains a "/" 124 | var temp = aspectRatio.split('/'); 125 | aspectRatio = temp[0] / temp[1]; 126 | } 127 | 128 | console.log('AspectRatio: ' + aspectRatio); 129 | 130 | return aspectRatio; 131 | } 132 | }); 133 | 134 | }(isomatic)); 135 | 136 | -------------------------------------------------------------------------------- /src/js/views/ScaleView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Scale View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.ScaleView = Backbone.View.extend( /** @lends ScaleView.prototype */ { 13 | 14 | /** 15 | * @class ScaleView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | this.render(); 22 | 23 | // Register Model Event Listeners 24 | this.model.on("change:scale", this.render, this); 25 | this.model.on("change:roundUp", this.render, this); 26 | this.model.on("change:roundDown", this.render, this); 27 | 28 | }, 29 | 30 | /** 31 | * Render Scale View 32 | */ 33 | render: function(){ 34 | 35 | var source = $('#scale-template').html(); 36 | var template = Handlebars.compile(source); 37 | var html = template({ 38 | options: this.model.attributes 39 | }); 40 | this.$el.html(html); 41 | 42 | this.activateRoundSize(); 43 | }, 44 | model: isomatic.options.ui, 45 | 46 | events: { 47 | "click #scale-apply": "apply", 48 | "click #scale-apply-close": "apply", 49 | "click #round-size": "activateRoundSize", 50 | "keydown input": "keyDown" 51 | }, 52 | 53 | /** 54 | * Register the enter key in input fields 55 | * @param e 56 | */ 57 | keyDown: function(e) { 58 | if (e.which === 13) { 59 | e.preventDefault(); 60 | this.apply(); 61 | } 62 | }, 63 | 64 | /** 65 | * Apply Scales to Graphic 66 | */ 67 | apply: function() { 68 | 69 | var state = { 70 | 'scale': $('#scale').val(), 71 | 'roundUp': $('#round-up').val(), 72 | 'roundDown': $('#round-down').val(), 73 | 'roundSize': $('#round-size').prop('checked') 74 | }; 75 | 76 | var isValid = this.model.set(state, {validate: true}); 77 | 78 | if (isValid) { 79 | isomatic.refreshLayout(); 80 | } 81 | }, 82 | 83 | /** 84 | * Activates and deactivates Rounding Input Boxes depending on if they are used or not 85 | */ 86 | activateRoundSize: function() { 87 | if ($('#round-size').prop('checked')) { 88 | $('#round-up').prop("disabled", false); 89 | $('#round-down').prop("disabled", false); 90 | } else { 91 | $('#round-up').prop("disabled", true); 92 | $('#round-down').prop("disabled", true); 93 | } 94 | } 95 | }); 96 | 97 | }(isomatic)); 98 | 99 | -------------------------------------------------------------------------------- /src/js/views/TextView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Text View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.TextView = Backbone.View.extend( /** @lends TextView.prototype */ { 13 | 14 | /** 15 | * @class TextView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | this.render(); 22 | 23 | // Register Model Event Listeners 24 | this.model.on("change:legendWidth", this.render, this); 25 | this.model.on("change:legendTitleHeight", this.render, this); 26 | this.model.on("change:drawColumnLegend", this.render, this); 27 | 28 | }, 29 | 30 | /** 31 | * Render Text View 32 | */ 33 | render: function(){ 34 | 35 | var source = $('#text-template').html(); 36 | var template = Handlebars.compile(source); 37 | var html = template({ 38 | availableFonts: isomatic.options.internal.availableFonts, 39 | options: isomatic.options.ui.attributes 40 | }); 41 | this.$el.html(html); 42 | 43 | Backbone.Validation.bind(this); 44 | 45 | // Init Scrollbar 46 | try { 47 | var slimScrollOptions = isomatic.options.internal.slimScrollOptions; 48 | slimScrollOptions.height = isomatic.options.ui.attributes.graphHeight - 80; 49 | $('#text-container .scrollbar').slimScroll(slimScrollOptions); 50 | } catch (e) { 51 | console.error('Error loading Scrollbar Plugin!'); 52 | } 53 | }, 54 | 55 | /** 56 | * Options.ui Model 57 | */ 58 | model: isomatic.options.ui, 59 | 60 | events: { 61 | "click #text-apply": "apply", 62 | "click #text-apply-close": "apply", 63 | "keydown input": "keyDown" 64 | }, 65 | 66 | /** 67 | * Register the enter key in input fields 68 | * @param e 69 | */ 70 | keyDown: function(e) { 71 | if (e.which === 13) { 72 | e.preventDefault(); 73 | this.apply(); 74 | } 75 | }, 76 | 77 | 78 | /** 79 | * Apply Adjustments to Graphic 80 | */ 81 | apply: function() { 82 | 83 | var state = { 84 | 'legendWidth': $('#legend-width').val(), 85 | 'legendTitleHeight': $('#legend-title-height').val(), 86 | 'leftLegendFontSize': $('#left-legend-fontsize').val(), 87 | 'bottomLegendFontSize': $('#bottom-legend-fontsize').val(), 88 | 'legendFont': $('#legend-font').val(), 89 | 'drawColumnLegend': $('#draw-column-legend').prop('checked') 90 | }; 91 | 92 | var isValid = this.model.set(state, {validate: true}); 93 | 94 | if (isValid) { 95 | isomatic.refreshLayout(); 96 | } 97 | 98 | } 99 | }); 100 | 101 | }(isomatic)); 102 | 103 | -------------------------------------------------------------------------------- /src/js/views/TourView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Tour View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.TourView = Backbone.View.extend( /** @lends TourView.prototype */ { 13 | 14 | /** 15 | * @class TourView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | this.render(); 22 | }, 23 | 24 | /** Render Tour Modal View */ 25 | render: function(){ 26 | 27 | var source = $('#tour-template').html(); 28 | var template = Handlebars.compile(source); 29 | 30 | var html = template(); 31 | 32 | this.$el.html(html); 33 | }, 34 | 35 | events: { 36 | "click #start-tour": "tourModal", 37 | "click #close-tour": "tourModal" 38 | }, 39 | 40 | /** 41 | * Close the tour popup and set a cookie 42 | */ 43 | tourModal: function() { 44 | $.createCookie('tour-viewed', "true", 365); 45 | $('#tour-modal').foundation('reveal', 'close'); 46 | } 47 | 48 | 49 | }); 50 | 51 | }(isomatic)); 52 | 53 | -------------------------------------------------------------------------------- /src/js/views/TypeView.js: -------------------------------------------------------------------------------- 1 | /* jshint jquery:true, devel: true */ 2 | /* global isomatic, d3, Backbone, _, Handlebars */ 3 | 4 | (function(isomatic) { 5 | "use strict"; 6 | 7 | /** 8 | * Type View 9 | * 10 | * @type {*|void|Object} 11 | */ 12 | isomatic.views.TypeView = Backbone.View.extend( /** @lends TypeView.prototype */ { 13 | 14 | /** 15 | * @class TypeView 16 | * 17 | * @augments Backbone.View 18 | * @contructs 19 | */ 20 | initialize: function(){ 21 | 22 | this.render(); 23 | 24 | // Set current Type active 25 | var currentType = isomatic.options.ui.get('diagramType'); 26 | $('.select-type').removeClass('active'); 27 | $('#' + currentType + '-isotype').addClass('active'); 28 | }, 29 | 30 | /** 31 | * Render Type View 32 | */ 33 | render: function(){ 34 | 35 | var advancedOptions = false; 36 | 37 | if (isomatic.options.ui.attributes.diagramType !== 'normal') { 38 | advancedOptions = true; 39 | } 40 | 41 | var source = $('#type-template').html(); 42 | var template = Handlebars.compile(source); 43 | var html = template({ 44 | type: isomatic.options.ui.attributes.diagramType, 45 | equallyDistributedColumns: isomatic.options.ui.attributes.equallyDistributedColumns, 46 | drawHorizontalLines: isomatic.options.ui.attributes.drawHorizontalLines, 47 | drawVerticalLines: isomatic.options.ui.attributes.drawVerticalLines, 48 | advancedOptions: advancedOptions 49 | }); 50 | 51 | this.$el.html(html); 52 | 53 | }, 54 | events: { 55 | "click .select-type": "selectType", 56 | "click #equally-distributed-columns": "selectColumnDistribution", 57 | "click #draw-horizontal-lines": "selectDrawHorizontalLines", 58 | "click #draw-vertical-lines": "selectDrawVerticalLines" 59 | 60 | }, 61 | 62 | /** 63 | * Selects the clicked on Type, deselects others 64 | * 65 | * @param {Object} e Event Object 66 | */ 67 | selectType: function(e) { 68 | var type = e.currentTarget.id.split('-')[0]; 69 | $('.select-type').removeClass('active'); 70 | $(e.currentTarget).addClass('active'); 71 | isomatic.options.ui.set('diagramType', type); 72 | isomatic.refreshData(); 73 | this.initialize(); 74 | }, 75 | 76 | /** 77 | * Selects the column distribution 78 | */ 79 | selectColumnDistribution: function() { 80 | var checked = $('#equally-distributed-columns').prop('checked'); 81 | isomatic.options.ui.set('equallyDistributedColumns', checked); 82 | isomatic.refreshLayout(); 83 | }, 84 | 85 | /** 86 | * Selects the drawing of the horizontal lines 87 | */ 88 | selectDrawHorizontalLines: function() { 89 | var checked = $('#draw-horizontal-lines').prop('checked'); 90 | isomatic.options.ui.set('drawHorizontalLines', checked); 91 | isomatic.refreshLayout(); 92 | }, 93 | 94 | /** 95 | * Selects the drawing of the vertical lines 96 | */ 97 | selectDrawVerticalLines: function() { 98 | var checked = $('#draw-vertical-lines').prop('checked'); 99 | isomatic.options.ui.set('drawVerticalLines', checked); 100 | isomatic.refreshLayout(); 101 | } 102 | 103 | 104 | }); 105 | 106 | }(isomatic)); 107 | 108 | -------------------------------------------------------------------------------- /src/lib/innersvg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * innerHTML property for SVGElement 3 | * Copyright(c) 2010, Jeff Schiller 4 | * 5 | * Licensed under the Apache License, Version 2 6 | * 7 | * Works in a SVG document in Chrome 6+, Safari 5+, Firefox 4+ and IE9+. 8 | * Works in a HTML5 document in Chrome 7+, Firefox 4+ and IE9+. 9 | * Does not work in Opera since it doesn't support the SVGElement interface yet. 10 | * 11 | * I haven't decided on the best name for this property - thus the duplication. 12 | */ 13 | 14 | (function() { 15 | var serializeXML = function(node, output) { 16 | var nodeType = node.nodeType; 17 | if (nodeType == 3) { // TEXT nodes. 18 | // Replace special XML characters with their entities. 19 | output.push(node.textContent.replace(/&/, '&').replace(/', '>')); 20 | } else if (nodeType == 1) { // ELEMENT nodes. 21 | // Serialize Element nodes. 22 | output.push('<', node.tagName); 23 | if (node.hasAttributes()) { 24 | var attrMap = node.attributes; 25 | for (var i = 0, len = attrMap.length; i < len; ++i) { 26 | var attrNode = attrMap.item(i); 27 | output.push(' ', attrNode.name, '=\'', attrNode.value, '\''); 28 | } 29 | } 30 | if (node.hasChildNodes()) { 31 | output.push('>'); 32 | var childNodes = node.childNodes; 33 | for (var i = 0, len = childNodes.length; i < len; ++i) { 34 | serializeXML(childNodes.item(i), output); 35 | } 36 | output.push(''); 37 | } else { 38 | output.push('/>'); 39 | } 40 | } else if (nodeType == 8) { 41 | // TODO(codedread): Replace special characters with XML entities? 42 | output.push(''); 43 | } else { 44 | // TODO: Handle CDATA nodes. 45 | // TODO: Handle ENTITY nodes. 46 | // TODO: Handle DOCUMENT nodes. 47 | throw 'Error serializing XML. Unhandled node of type: ' + nodeType; 48 | } 49 | } 50 | // The innerHTML DOM property for SVGElement. 51 | Object.defineProperty(SVGElement.prototype, 'innerHTML', { 52 | get: function() { 53 | var output = []; 54 | var childNode = this.firstChild; 55 | while (childNode) { 56 | serializeXML(childNode, output); 57 | childNode = childNode.nextSibling; 58 | } 59 | return output.join(''); 60 | }, 61 | set: function(markupText) { 62 | // Wipe out the current contents of the element. 63 | while (this.firstChild) { 64 | this.removeChild(this.firstChild); 65 | } 66 | 67 | try { 68 | // Parse the markup into valid nodes. 69 | var dXML = new DOMParser(); 70 | dXML.async = false; 71 | // Wrap the markup into a SVG node to ensure parsing works. 72 | sXML = '' + markupText + ''; 73 | var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement; 74 | 75 | // Now take each node, import it and append to this element. 76 | var childNode = svgDocElement.firstChild; 77 | while(childNode) { 78 | this.appendChild(this.ownerDocument.importNode(childNode, true)); 79 | childNode = childNode.nextSibling; 80 | } 81 | } catch(e) { 82 | throw new Error('Error parsing XML string'); 83 | }; 84 | } 85 | }); 86 | 87 | // The innerSVG DOM property for SVGElement. 88 | Object.defineProperty(SVGElement.prototype, 'innerSVG', { 89 | get: function() { 90 | return this.innerHTML; 91 | }, 92 | set: function(markupText) { 93 | this.innerHTML = markupText; 94 | } 95 | }); 96 | 97 | })(); 98 | -------------------------------------------------------------------------------- /src/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Fannon/isomatic/e97bc32bee72e18e010ba88bc3f7003396df46bb/src/screenshot.png -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "browser": true, 14 | "predef": [ 15 | "plastic", 16 | "jQuery", 17 | "QUnit", 18 | "module", 19 | "test", 20 | "asyncTest", 21 | "expect", 22 | "start", 23 | "stop", 24 | "ok", 25 | "equal", 26 | "notEqual", 27 | "deepEqual", 28 | "notDeepEqual", 29 | "strictEqual", 30 | "notStrictEqual", 31 | "throws" 32 | ], 33 | "globals": { 34 | "jQuery": true, 35 | "$": true, 36 | "isomatic": true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | plastic.js Test Suite 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /test/isomatic.test.js: -------------------------------------------------------------------------------- 1 | (function ($, isomatic) { 2 | /* 3 | ======== A Handy Little QUnit Reference ======== 4 | http://api.qunitjs.com/ 5 | 6 | Test methods: 7 | module(name, {[setup][ ,teardown]}) 8 | test(name, callback) 9 | expect(numberOfAssertions) 10 | stop(increment) 11 | start(decrement) 12 | Test assertions: 13 | ok(value, [message]) 14 | equal(actual, expected, [message]) 15 | notEqual(actual, expected, [message]) 16 | deepEqual(actual, expected, [message]) 17 | notDeepEqual(actual, expected, [message]) 18 | strictEqual(actual, expected, [message]) 19 | notStrictEqual(actual, expected, [message]) 20 | throws(block, [expected], [message]) 21 | */ 22 | 23 | module('isomatic'); 24 | 25 | test('has version number', function () { 26 | ok(isomatic.version, "should have a Version numbers"); 27 | }); 28 | 29 | 30 | }(jQuery, isomatic)); 31 | --------------------------------------------------------------------------------