{"id":13701487,"url":"https://github.com/HumbleSoftware/envisionjs","last_synced_at":"2025-05-04T21:31:04.620Z","repository":{"id":1022324,"uuid":"850139","full_name":"HumbleSoftware/envisionjs","owner":"HumbleSoftware","description":"Dynamic HTML5 visualization","archived":false,"fork":false,"pushed_at":"2020-04-10T22:29:11.000Z","size":8024,"stargazers_count":1561,"open_issues_count":24,"forks_count":231,"subscribers_count":86,"default_branch":"master","last_synced_at":"2025-04-08T16:05:46.967Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.humblesoftware.com/envision","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HumbleSoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-08-19T23:58:52.000Z","updated_at":"2025-03-10T06:59:32.000Z","dependencies_parsed_at":"2022-07-18T16:28:40.614Z","dependency_job_id":null,"html_url":"https://github.com/HumbleSoftware/envisionjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumbleSoftware%2Fenvisionjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumbleSoftware%2Fenvisionjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumbleSoftware%2Fenvisionjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumbleSoftware%2Fenvisionjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HumbleSoftware","download_url":"https://codeload.github.com/HumbleSoftware/envisionjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403846,"owners_count":21742454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T20:01:42.330Z","updated_at":"2025-05-04T21:30:59.882Z","avatar_url":"https://github.com/HumbleSoftware.png","language":"JavaScript","readme":"# Envision.js\n-------------\n\nFast interactive HTML5 charts.\n\n![Google Groups](http://groups.google.com/intl/en/images/logos/groups_logo_sm.gif)\n\nhttp://groups.google.com/group/envisionjs/\n\n## Features\n\n* Modern Browsers, IE 6+\n* Mobile / Touch Support\n* Pre-built Templates\n* Adaptable to Existing Libraries\n\n## Dependencies\n\nEnvision.js ships with all it's dependencies.  It uses:\n\n* \u003ca href=\"http://documentcloud.github.com/underscore/\"\u003eunderscore.js\u003c/a\u003e\n* \u003ca href=\"https://github.com/fat/bean\"\u003ebean\u003c/a\u003e\n* \u003ca href=\"https://github.com/ded/bonzo\"\u003ebonzo\u003c/a\u003e\n* \u003ca href=\"http://humblesoftware.com/flotr2/\"\u003eFlotr2\u003c/a\u003e\n\n## Usage\n\nTo use Envision.js, include `envision.min.js` and `envision.min.css` in your\npage. To display a visualization, either use a Template or create a custom\nvisualization with the Envision.js API.\n\n### Templates\n\nTemplates are pre-built visualizations for common use-cases.\n\nExample: \n\n```javascript\n  var\n    container = document.getElementById('container'),\n    x = [],\n    y1 = [],\n    y2 = [],\n    data, options, i;\n\n  // Data Format:\n  data = [\n    [x, y1], // First Series\n    [x, y2]  // Second Series\n  ];\n\n  // Sample the sine function for data\n  for (i = 0; i \u003c 4 * Math.PI; i += 0.05) {\n    x.push(i);\n    y1.push(Math.sin(i));\n    y2.push(Math.sin(i + Math.PI));\n  }\n\n  // TimeSeries Template Options\n  options = {\n    // Container to render inside of\n    container : container,\n    // Data for detail (top chart) and summary (bottom chart)\n    data : {\n      detail : data,\n      summary : data\n    }\n  };\n\n  // Create the TimeSeries\n  new envision.templates.TimeSeries(options);\n```\n\n### Custom\n\nDevelopers can use the envision APIs to build custom visualizations.  The\nexisting templates are a good reference for this.\n\nExample: \n\n```javascript\n  var\n    container = document.getElementById('container'),\n    x = [],\n    y1 = [],\n    y2 = [],\n    data, i,\n    detail, detailOptions,\n    summary, summaryOptions,\n    vis, selection,\n\n  // Data Format:\n  data = [\n    [x, y1], // First Series\n    [x, y2]  // Second Series\n  ];\n\n  // Sample the sine function for data\n  for (i = 0; i \u003c 4 * Math.PI; i += 0.05) {\n    x.push(i);\n    y1.push(Math.sin(i));\n    y2.push(Math.sin(i + Math.PI));\n  }\n  x.push(4 * Math.PI)\n  y1.push(Math.sin(4 * Math.PI));\n  y2.push(Math.sin(4 * Math.PI));\n\n  // Configuration for detail:\n  detailOptions = {\n    name : 'detail',\n    data : data,\n    height : 150,\n    flotr : {\n      yaxis : {\n        min : -1.1,\n        max : 1.1\n      }\n    }\n  };\n\n  // Configuration for summary:\n  summaryOptions = {\n    name : 'summary',\n    data : data,\n    height : 150,\n    flotr : {\n      yaxis : {\n        min : -1.1,\n        max : 1.1\n      },\n      selection : {\n        mode : 'x'\n      }\n    }\n  };\n\n  // Building a custom vis:\n  vis = new envision.Visualization();\n  detail = new envision.Component(detailOptions);\n  summary = new envision.Component(summaryOptions);\n  interaction = new envision.Interaction();\n\n  // Render Visualization\n  vis\n    .add(detail)\n    .add(summary)\n    .render(container);\n\n  // Wireup Interaction\n  interaction\n    .leader(summary)\n    .follower(detail)\n    .add(envision.actions.selection);\n```\n\n## API\n\n### Class `envision.Component`\n_Defines a visualization component._\n\nComponents are the building blocks of a visualization, \nrepresenting one typically graphical piece of the vis.  This class manages\nthe options, DOM and API construction for an adapter which handles the\nactual drawing of the visualization piece.\n\nAdapters can take the form of an actual object, a constructor function\nor a function returning an object.  Only one of these will be used.  If\nnone is submitted, the default adapter Flotr2 is used.\n\n#### Configuration:\n\nAn object is submitted to the constructor for configuration.\n\n* `name` A name for the component.\n* `element` A container element for the component.\n* `height` An explicit component height.\n* `width` An explicit component width.\n* `data` An array of data.  Data may be formatted for \nenvision or for the adapter itself, in which case skipPreprocess will\nalso need to be submitted.\n* `skipPreprocess` Skip data preprocessing.  This is useful\nwhen using the native data format for an adapter.\n* `adapter` An adapter object.\n* `adapterConstructor` An adapter constructor to be\ninstantiated by the component.\n* `adapterCallback` An callback invoked by the component\nreturning an adapter.\n* `config` Configuration for the adapter.\n\n#### Methods:\n\n##### `render ([element])`\nRender the component.\n\nIf no element is submitted, the component will\nrender in the element configured in the constructor.\n\n##### `draw ([data], [options])`\nDraw the component.\n\n##### `trigger ()`\nTrigger an event on the component's API.\n\nArguments are passed through to the API.\n\n##### `attach ()`\nAttach to an event on the component's API.\n\nArguments are passed through to the API.\n\n##### `detach ()`\nDetach a listener from an event on the component's API.\n\nArguments are passed through to the API.\n\n##### `destroy ()`\nDestroy the component.\n\nEmpties the container and calls the destroy method on the\ncomponent's API.\n\n### Class `envision.Visualization`\n_Defines a visualization of componenents._\n\nThis class manages the rendering of a visualization.\nIt provides convenience methods for adding, removing, and reordered\ncomponents dynamically as well as convenience methods for working\nwith a logical group of components.\n\n#### Configuration:\n\nAn object is submitted to the constructor for configuration.\n\n* `name` A name for the visualization.\n* `element` A container element for the visualization.\n\n#### Methods:\n\n##### `render ([element])`\nRender the visualization.\n\nIf no element is submitted, the visualization will\nrender in the element configured in the constructor.\n\nThis method is chainable.\n\n##### `add (component)`\nAdd a component to the visualization.\n\nIf the visualization has already been rendered,\nit will render the new component.\n\nThis method is chainable.\n\n##### `remove ()`\nRemove a component from the visualization.\n\nThis removes the components from the list of components in the\nvisualization and removes its container from the DOM.  It does not\ndestroy the component.\n\nThis method is chainable.\n\n##### `setPosition (component, newIndex)`\nReorders a component.\n\nThis method is chainable.\n\n##### `indexOf (component)`\nGets the position of a component.\n\n##### `getComponent (component)`\nGets the component at a position.\n\n##### `isFirst (component)`\nGets whether or not the component is the first component\nin the visualization.\n\n##### `isLast (component)`\nGets whether or not the component is the last component\nin the visualization.\n\n##### `destroy ()`\nDestroys the visualization.\n\nThis empties the container and destroys all the components which are part\nof the visualization.\n\n### Class `envision.Preprocessor`\n_Data preprocessor._\n\nData can be preprocessed before it is rendered by an adapter.\n\nThis has several important performance considerations.  If data will be \nrendered repeatedly or on slower browsers, it will be faster after being\noptimized.\n\nFirst, data outside the boundaries does not need to be rendered.  Second,\nthe resolution of the data only needs to be at most the number of pixels\nin the width of the visualization.\n\nPerforming these optimizations will limit memory overhead, important\nfor garbage collection and performance on old browsers, as well as drawing\noverhead, important for mobile devices, old browsers and large data sets.\n\n#### Configuration:\n\nAn object is submitted to the constructor for configuration.\n\n* `data` The data for processing.\n\n#### Methods:\n\n##### `getData ()`\nReturns data.\n\n##### `setData ()`\nSet the data object.\n\n##### `length ()`\nReturns the length of the data set.\n\n##### `bound (min, max)`\nBounds the data set at within a range.\n\n##### `subsampleMinMax (resolution)`\nSubsample data using MinMax.\n\nMinMax will display the extrema of the subsample intervals.  This is\nslower than regular interval subsampling but necessary for data that \nis very non-homogenous.\n\n##### `subsample (resolution)`\nSubsample data at a regular interval for resolution.\n\nThis is the fastest subsampling and good for monotonic data and fairly\nhomogenous data (not a lot of up and down).\n\n### Class `envision.Interaction`\n_Defines an interaction between components._\n\nThis class defines interactions in which actions are triggered\nby leader components and reacted to by follower components.  These actions\nare defined as configurable mappings of trigger events and event consumers.\nIt is up to the adapter to implement the triggers and consumers.\n\nA component may be both a leader and a follower.  A leader which is a \nfollower will react to actions triggered by other leaders, but will safely\nnot react to its own.  This allows for groups of components to perform a\ncommon action.\n\nOptionally, actions may be supplied with a callback executed before the \naction is consumed.  This allows for quick custom functionality to be added\nand is how advanced data management (ie. live Ajax data) may be implemented.\n\nThis class follow an observer mediator pattern.\n\n#### Configuration:\n\nAn object is submitted to the constructor for configuration.\n\n* `leader` Component(s) to lead the\ninteraction\n\n#### Methods:\n\n##### `leader (component)`\nAdd a component as an interaction leader.\n\n##### `follower (component)`\nAdd a component as an interaction leader.\n\n##### `group (components)`\nAdds an array of components as both followers and leaders.\n\n##### `add (action, [options])`\nAdds an action to the interaction.\n\nThe action may be optionally configured with the options argument.\nCurrently the accepts a callback member, invoked after an action\nis triggered and before it is consumed by followers.\n\n## Development\n\nThis project uses [smoosh](https://github.com/fat/smoosh) to build and [jasmine](http://pivotal.github.com/jasmine/) \nwith [js-imagediff](https://github.com/HumbleSoftware/js-imagediff) to test.  Tests may be executed by \n[jasmine-headless-webkit](http://johnbintz.github.com/jasmine-headless-webkit/) with \n`cd spec; jasmine-headless-webkit -j jasmine.yml -c` or by a browser by navigating to \n`spec/SpecRunner.html`.\n\n","funding_links":[],"categories":["JavaScript","Data Visualization","Framework or Library","Data Visualization [🔝](#readme)","数据可视化"],"sub_categories":["Runner","Graphics or data visualization","运行器","运行器e2e测试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHumbleSoftware%2Fenvisionjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHumbleSoftware%2Fenvisionjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHumbleSoftware%2Fenvisionjs/lists"}