This repository has been archived by the owner on Apr 3, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from unchartedsoftware/histogram-scale-function
Histogram scale function
- Loading branch information
Showing
6 changed files
with
409 additions
and
3 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
examples/histogram-scale-function/histogram-scale-function.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /* | ||
| * Copyright 2017 Uncharted Software Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| #facet-container { | ||
| width: 240px; | ||
| padding:5px; | ||
| font-family : Helvetica; | ||
| } |
334 changes: 334 additions & 0 deletions
334
examples/histogram-scale-function/histogram-scale-function.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,334 @@ | ||
| /* | ||
| * Copyright 2017 Uncharted Software Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| function main() { | ||
|
|
||
| var container = $('#facet-container'); | ||
|
|
||
| var groups = [ | ||
| { | ||
| label : 'Dates', | ||
| key : 'dates', | ||
| facets : [ | ||
| { | ||
| "histogram": { | ||
| "slices": [ | ||
| { | ||
| "label": "2015-01-20", | ||
| "count": 49, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-06", | ||
| "count": 48, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-07", | ||
| "count": 150, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-14", | ||
| "count": 300, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-14", | ||
| "count": 44, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-20", | ||
| "count": 10, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-02-28", | ||
| "count": 5, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-03-04", | ||
| "count": 26, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-03-04", | ||
| "count": 23, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-03-08", | ||
| "count": 32, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-03-17", | ||
| "count": 24, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-03-18", | ||
| "count": 7, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-04-07", | ||
| "count": 19, | ||
| "metadata": "This is it!!!" | ||
| }, | ||
| { | ||
| "label": "2015-04-13", | ||
| "count": 46, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-04-20", | ||
| "count": 37, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-04-24", | ||
| "count": 48, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-05-05", | ||
| "count": 8, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-05-16", | ||
| "count": 20, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-05-22", | ||
| "count": 22, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-06-25", | ||
| "count": 24, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-07-04", | ||
| "count": 290, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-07-09", | ||
| "count": 1, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-07-18", | ||
| "count": 50, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-07-28", | ||
| "count": 23, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-08-04", | ||
| "count": 39, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-08-21", | ||
| "count": 7, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-08-21", | ||
| "count": 33, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-09-07", | ||
| "count": 34, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-09-12", | ||
| "count": 7, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-09-17", | ||
| "count": 46, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-02", | ||
| "count": 11, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-05", | ||
| "count": 12, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-06", | ||
| "count": 420, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-07", | ||
| "count": 48, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-10", | ||
| "count": 45, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-20", | ||
| "count": 21, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-27", | ||
| "count": 36, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-29", | ||
| "count": 700, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-10-30", | ||
| "count": 23, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-11-03", | ||
| "count": 8, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-11-10", | ||
| "count": 45, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-11-25", | ||
| "count": 6, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-12-15", | ||
| "count": 490, | ||
| "metadata": "This is not it!" | ||
| }, | ||
| { | ||
| "label": "2015-12-22", | ||
| "count": 460, | ||
| "metadata": "This is not it!" | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| var facets = new Facets(container,groups); | ||
|
|
||
| var $controls = $('<div/>').appendTo('body'); | ||
|
|
||
| var $applyLogScale = $('<span style="cursor: pointer; text-decoration: underline; color: #1077ff" />') | ||
| .html('Apply Log function.<br />') | ||
| .appendTo($controls); | ||
|
|
||
| var $clearSelection = $('<span style="cursor: pointer; text-decoration: underline; color: #1077ff" />') | ||
| .html('Clear selection.<br /><br />') | ||
| .appendTo($controls); | ||
|
|
||
| var $hover = $('<span/>') | ||
| .html( | ||
| '<b>Hovering</b><br />' + | ||
| 'Label: N/A<br />' + | ||
| 'Count: N/A<br /><br />' | ||
| ) | ||
| .appendTo($controls); | ||
|
|
||
| var slices = groups[0].facets[0].histogram.slices; | ||
| var $range = $('<span/>') | ||
| .html( | ||
| '<b>Selected Range</b><br />' + | ||
| 'From: ' + slices[0].label + '<br />' + | ||
| 'To: ' + slices[slices.length - 1].label + '<br /><br />' | ||
| ) | ||
| .appendTo($controls); | ||
|
|
||
| /* events */ | ||
| $applyLogScale.on('click', function() { | ||
| container.empty(); | ||
| groups[0].facets[0].scaleFn = Math.log; | ||
| facets = new Facets(container,groups); | ||
| _applyHandlers(); | ||
| }); | ||
|
|
||
| $clearSelection.on('click', function() { | ||
| container.empty(); | ||
| delete(groups[0].facets[0].scaleFn); | ||
| facets = new Facets(container,groups); | ||
| _applyHandlers(); | ||
| }); | ||
|
|
||
| var _applyHandlers = function() { | ||
| facets.on('facet-histogram:mouseenter', function(event, key, barData) { | ||
| $hover.html( | ||
| '<b>Hovering</b><br />' + | ||
| 'Label: ' + barData.label[0] + '<br />' + | ||
| 'Count: ' + barData.count[0] + '<br /><br />' | ||
| ); | ||
| }); | ||
|
|
||
| facets.on('facet-histogram:mouseleave', function(event, key, barData) { | ||
| $hover.html( | ||
| '<b>Hovering</b><br />' + | ||
| 'Label: N/A<br />' + | ||
| 'Count: N/A<br /><br />' | ||
| ); | ||
| }); | ||
|
|
||
| facets.on('facet-histogram:click', function(event, key, barData) { | ||
| $clicked.html( | ||
| '<b>Last clicked</b><br />' + | ||
| 'Label: ' + barData.label[0] + '<br />' + | ||
| 'Count: ' + barData.count[0] + '<br />' + | ||
| 'Metadata: ' + barData.metadata[0] + '<br /><br />' | ||
| ); | ||
| }); | ||
|
|
||
| facets.on('facet-histogram:rangechanged facet-histogram:rangechangeduser', function(event, key, range) { | ||
| $range.html( | ||
| '<b>Selected Range</b><br />' + | ||
| 'From: ' + range.from.label[0] + '<br />' + | ||
| 'To: ' + range.to.label[0] + '<br /><br />' | ||
| ); | ||
| }); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!-- | ||
| ~ Copyright 2017 Uncharted Software Inc. | ||
| ~ | ||
| ~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
| ~ you may not use this file except in compliance with the License. | ||
| ~ You may obtain a copy of the License at | ||
| ~ | ||
| ~ http://www.apache.org/licenses/LICENSE-2.0 | ||
| ~ | ||
| ~ Unless required by applicable law or agreed to in writing, software | ||
| ~ distributed under the License is distributed on an "AS IS" BASIS, | ||
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| ~ See the License for the specific language governing permissions and | ||
| ~ limitations under the License. | ||
| --> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Facets Histogram Scale Function Example</title> | ||
| <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald"> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="../../dist/facets.css"> | ||
| <link rel="stylesheet" href="histogram-scale-function.css"> | ||
| <script src="../../dist/facets.extern.js"></script> | ||
| <script src="../../dist/facets.js"></script> | ||
| <script src="histogram-scale-function.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="facet-container"></div> | ||
| <script> | ||
| main(); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.