{"id":20119236,"url":"https://github.com/harrystevens/d3-marcon","last_synced_at":"2025-07-18T22:08:35.186Z","repository":{"id":66335698,"uuid":"98082816","full_name":"HarryStevens/d3-marcon","owner":"HarryStevens","description":"Margin conventions for d3-selection.","archived":false,"fork":false,"pushed_at":"2023-02-27T17:35:20.000Z","size":99,"stargazers_count":8,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-06T14:37:10.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarryStevens.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-23T07:50:38.000Z","updated_at":"2019-07-07T19:18:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c17e1d4-e1ba-4fe7-b041-93b3a8c72ba9","html_url":"https://github.com/HarryStevens/d3-marcon","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/HarryStevens/d3-marcon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-marcon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-marcon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-marcon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-marcon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarryStevens","download_url":"https://codeload.github.com/HarryStevens/d3-marcon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fd3-marcon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265845082,"owners_count":23837723,"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-11-13T19:14:51.646Z","updated_at":"2025-07-18T22:08:35.178Z","avatar_url":"https://github.com/HarryStevens.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-marcon\n\n[Margin conventions](https://bl.ocks.org/mbostock/3019563) for [d3-selection](https://github.com/d3/d3-selection).\n\n## Installing\nIf you use NPM, `npm install d3-marcon`. Otherwise, download the [latest release](https://github.com/HarryStevens/d3-marcon/tree/master/build).\nYou can also load directly from [unpkg](https://unpkg.com/d3-marcon/build/d3-marcon.min.js). You may use the entire [D3.js library](https://d3js.org/) or, at a minimum, [d3-selection](https://github.com/d3/d3-selection).\n```html\n\u003cscript src=\"https://d3js.org/d3-selection.v1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/d3-marcon/build/d3-marcon.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\nvar m = d3.marcon()\n    .top(10)\n    .bottom(10)\n    .left(10)\n    .right(10);\n\nm.render();\n\nm.svg().append(\"rect\")\n    .attr(\"width\", m.innerWidth())\n    .attr(\"height\", m.innerHeight())\n    .style(\"fill\", \"steelblue\");\n\n\u003c/script\u003e\n```\n\n![image](https://github.com/HarryStevens/d3-marcon/blob/master/img/marcon.png \"margin convention\")\n\n[A live example on bl.ocks.org](https://bl.ocks.org/HarryStevens/de1069536e00256d7aa82299fac0f3d5).\n\n## API Reference\n\n\u003ca href=\"#marcon\" name=\"marcon\"\u003e#\u003c/a\u003e d3.\u003cb\u003emarcon\u003c/b\u003e([\u003ci\u003eoptions\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js \"Source\")\n\nConstructs a visualization generator, or \u003ci\u003eviz\u003c/i\u003e, on which you can set and get the dimensions and margins, and append an `svg` element with a nested `g` to a DOM element.\n\n\u003ca href=\"#marcon_element\" name=\"marcon_element\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003eelement\u003c/b\u003e([\u003ci\u003eelement\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L53 \"Source\")\n\nSelects a DOM element to append the viz to. Defaults to `\"body\"`.\n\n\u003ca href=\"#marcon_top\" name=\"marcon_top\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003etop\u003c/b\u003e([\u003ci\u003emargin\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L17 \"Source\")\n\nSets or gets the viz's top margin. Defaults to `0`.\n\n\u003ca href=\"#marcon_right\" name=\"marcon_right\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003eright\u003c/b\u003e([\u003ci\u003emargin\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L29 \"Source\")\n\nSets or gets the viz's right margin. Defaults to `0`.\n\n\u003ca href=\"#marcon_bottom\" name=\"marcon_bottom\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003ebottom\u003c/b\u003e([\u003ci\u003emargin\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L35 \"Source\")\n\nSets or gets the viz's bottom margin. Defaults to `0`.\n\n\u003ca href=\"#marcon_left\" name=\"marcon_left\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003eleft\u003c/b\u003e([\u003ci\u003emargin\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L23 \"Source\")\n\nSets or gets the viz's left margin. Defaults to `0`.\n\n\u003ca href=\"#marcon_width\" name=\"marcon_height\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003ewidth\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L41 \"Source\")\n\nSets or gets the viz's width. Defaults to `900`.\n\n\u003ca href=\"#marcon_height\" name=\"marcon_height\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003eheight\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L47 \"Source\")\n\nSets or gets the viz's height. Defaults to `600`.\n\n\u003ca href=\"#marcon_innerWidth\" name=\"marcon_innerWidth\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003einnerWidth\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L59 \"Source\")\n\nGets the viz's innerWidth, which is equal to `width - left - right`.\n\n\u003ca href=\"#marcon_innerHeight\" name=\"marcon_innerHeight\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003einnerHeight\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L63 \"Source\")\n\nGets the viz's innerHeight, which is equal to `height - top - bottom`.\n\n\u003ca href=\"#marcon_render\" name=\"marcon_render\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003erender\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L71 \"Source\")\n\nRenders the viz to the DOM.\n\n\u003ca href=\"#marcon_svg\" name=\"marcon_svg\"\u003e#\u003c/a\u003e \u003ci\u003eviz\u003c/i\u003e.\u003cb\u003esvg\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/d3-marcon/blob/master/src/marcon.js#L67 \"Source\")\n\nGets the `svg` element that contains the viz. Returns `undefined` if the viz has not yet been rendered.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fd3-marcon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharrystevens%2Fd3-marcon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharrystevens%2Fd3-marcon/lists"}