{"id":16719168,"url":"https://github.com/kgryte/backbone-and-d3","last_synced_at":"2025-10-15T11:52:11.706Z","repository":{"id":8920088,"uuid":"10647753","full_name":"kgryte/backbone-and-d3","owner":"kgryte","description":"Backbone.js + D3.js","archived":false,"fork":false,"pushed_at":"2013-09-14T00:16:34.000Z","size":442,"stargazers_count":18,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T09:48:25.511Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"kaplan/meet-rails3-p2","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kgryte.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":"2013-06-12T17:17:51.000Z","updated_at":"2015-05-29T16:48:07.000Z","dependencies_parsed_at":"2022-08-27T22:31:33.392Z","dependency_job_id":null,"html_url":"https://github.com/kgryte/backbone-and-d3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kgryte/backbone-and-d3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgryte%2Fbackbone-and-d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgryte%2Fbackbone-and-d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgryte%2Fbackbone-and-d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgryte%2Fbackbone-and-d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kgryte","download_url":"https://codeload.github.com/kgryte/backbone-and-d3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgryte%2Fbackbone-and-d3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279077123,"owners_count":26098233,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-12T21:40:43.233Z","updated_at":"2025-10-15T11:52:11.675Z","avatar_url":"https://github.com/kgryte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Backbone.js + D3.js\n===============\n\n\u003ca href=\"http://www.d3js.org\" target=\"_blank\"\u003eD3.js\u003c/a\u003e has quickly become the visualization kernel for data visualization on the web, and \u003ca href=\"http://backbonejs.org/\" target=\"_blank\"\u003eBackbone.js\u003c/a\u003e is an MV* framework used frequently for its flexibility and ease-of-use. \n\nD3 is a low-level framework for creating data-driven documents, which has empowered developers to create highly bespoke and unique data visualizations.  D3 development is not without downside, however, as development typically entails considerable refactoring when attempting to apply a similar design framework in different data contexts.\n\nRecently, the idea of reusable charts has gained considerable traction. The primary aim is to develop a consistent chart API to facilitate code reuse and modularity. While several efforts have attempted to create reusable chart APIs building atop D3, most of these have followed a similar functional (and declarative) paradigm, as originally outlined by \u003ca href=\"http://bost.ocks.org/mike/chart/\" target=\"_blank\"\u003eMike Bostock\u003c/a\u003e, D3's principle maintainer. This approach has its merits, allowing a consistent API through closures.\n\nNevertheless, the closure approach requires that we first define exactly what can and what cannot be accessible. Once defined, the result is a monolithic function encompassing all behavior and the only way of changing behavior is by directly modifying the source code. In contrast, we may prefer an approach which permits extensibility, similar to that which we find in OOP paradigm class hierarchies. \n\nBackbone provides such facilities through its `extend' method. Hence, we may ask whether we can leverage Backbone and D3 to create a framework which explicitly separates concerns pertaining to data models and views and explicitly addresses the layered nature of statistical graphics.\n\n\n\n---\n### Models\n\nSeveral models form the basis for a chart. \n\n* DataPoint: the atomic data unit, even if not actually displayed, e.g., in a line chart.\n* DataSeries: extends the DataPoint model to manage a collection of data points, i.e., a data series. This is the primary unit for a line chart.\n* ChartModel: this is a ViewModel which contains meta data related to the View representation, such as chart margins, axis labels, transition parameters, etc.\n* DataCollection: the array of Models to be translated into graphical units. For a line chart, the collection is of data series.\n\n\n---\n### Views\n\nViews correspond to chart layers. Each additional layer within a hierarchy extends the Views of layers below. This makes the implementation more modular and provides flexibility to include layers (functionality) only as needed.\n\n\n#### Layers\n\nMultiple layers comprise a chart. \n\n* Chart Base: the layer which creates the base canvas and defines chart dimensions\n\t* this layer exists as 'ChartBase'\n* Chart Area: the layer which creates axes (lines, ticks, labels) and specifies the x and y scales \n\t* this layer exists as 'ChartArea'\n* Line Chart: the layer which actually plots the data\n\t* this layer exists as 'DataLayer'\n* Annotations: the layer which provides chart annotations, e.g., title, caption, data labels, etc.\n\t* this layer exists as 'AnnotationLayer'\n* Listeners: a meta-layer which coordinates model updates and corresponding view changes\n\t* this layer exists as 'ListenerLayer'\n* Interaction: the layer which enables user interaction, e.g., providing additional context upon hover\n\t* this layer exists as 'InteractionLayer'\n* Animation: the layer which introduces transition animations for various lifecycle events\n\t* this layer exists as 'AnimationLayer'\n\n\n---\n### Classes\n\nClasses are assigned within each chart layer, providing a more direct API for CSS and JS targeting.\n\n* base: canvas layer, i.e., the SVG element\n* chart: chart layer, i.e., the SVG group element holding all chart contents\n* axis: axes layer, which is further classed by \n\t* x: x axis\n\t* y: y axis\n* label: axes labels\n* title: chart title\n* caption: chart caption\n* data-series: the group of data sets plotted, even if only 1 data set\n* line: the SVG path element for an individual data series, which is further classed in order of generation\n\t* line0: first line\n\t* line1: second line\n\t* ...\n\t* line(M-1): mth line\n\n\n---\n### Dependencies\n\nThis implementation uses multiple libraries/frameworks.\n* \u003ca href=\"http://www.d3js.org\" target=\"_blank\"\u003eD3.js\u003c/a\u003e: a visualization kernel\n* \u003ca href=\"http://www.backbonejs.org\" target=\"_blank\"\u003eBackbone.js\u003c/a\u003e: an MV* framework\n* \u003ca href=\"http://afeld.github.io/backbone-nested/\" target=\"_blank\"\u003eBackbone-nested.js\u003c/a\u003e: a Backbone extension\n* \u003ca href=\"http://underscorejs.org/\" target=\"_blank\"\u003eUnderscore.js\u003c/a\u003e: a utility library used by Backbone.js\n* \u003ca href=\"http://www.jquery.com\" target=\"_blank\"\u003ejQuery.js\u003c/a\u003e: a general purpose library\n\n\n\n---\n### References\n\nSeveral works have influenced this implementation. In no particular order:\n* Mike Bostock's \u003ca href=\"http://bost.ocks.org/mike/chart/\" target=\"_blank\"\u003eTowards Reusable Charts\u003c/a\u003e\n* Bocoup's \u003ca href=\"http://weblog.bocoup.com/reusability-with-d3/\" target=\"_blank\"\u003eReusability with D3\u003c/a\u003e (and Github \u003ca href=\"https://github.com/jugglinmike/d3-experiments\" target=\"_blank\"\u003erepository\u003c/a\u003e)\n* Shirley Wu's \u003ca href=\"http://shirley.quora.com/Marrying-Backbone-js-and-D3-js\" target=\"_blank\"\u003eMarrying Backbone.js and D3.js\u003c/a\u003e\n* \u003ca href=\"http://www.twitter.com/jtuulos\" target=\"_blank\"\u003e@jtuulos\u003c/a\u003e talk at the \u003ca href=\"http://jtuulos.github.io/bayd3-may2013/#/\" target=\"_blank\"\u003eSan Francisco D3.js Meetup\u003c/a\u003e\n* \u003ca href=\"http://www.twitter.com/milr0c\" target=\"_blank\"\u003e@milr0c\u003c/a\u003e talk at the \u003ca href=\"http://bl.ocks.org/milroc/raw/5553051/#0\" target=\"_blank\"\u003eSan Francisco D3.js meetup\u003c/a\u003e and associated \u003ca href=\"http://bl.ocks.org/milroc/5522467\" target=\"_blank\"\u003eGist\u003c/a\u003e\n* Christophe Viau's book \u003ca href=\"https://gumroad.com/l/vyYr/\" target=\"blank\"\u003eDeveloping a D3.js Edge\u003c/a\u003e\n* Trifacta's \u003ca href=\"https://github.com/trifacta/vega/wiki/Tutorial\" target=\"_blank\"\u003eVega\u003c/a\u003e\n* Hadley Wickham's paper \u003ca href=\"http://vita.had.co.nz/\" target=\"_blank\"\u003eA layered grammar of graphics\u003c/a\u003e\n\n\n\n---\n### Copyright\n\nCopyright (c) 2013. \u003ca href=\"http://www.kgryte.com\" target=\"_blank\"\u003eKristofer Gryte\u003c/a\u003e.\nLicense: \u003ca href=\"http://www.opensource.org/licenses/mit-license.php\" target=\"_blank\"\u003eMIT\u003c/a\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkgryte%2Fbackbone-and-d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkgryte%2Fbackbone-and-d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkgryte%2Fbackbone-and-d3/lists"}