{"id":15651383,"url":"https://github.com/paradite/d3-cheatsheet","last_synced_at":"2025-04-30T18:45:21.216Z","repository":{"id":73968670,"uuid":"51772943","full_name":"paradite/d3-cheatsheet","owner":"paradite","description":":scroll: d3.js quick reference","archived":false,"fork":false,"pushed_at":"2019-03-14T14:10:42.000Z","size":9,"stargazers_count":34,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T18:51:11.281Z","etag":null,"topics":["axis","cheatsheet","d3","d3-cheatsheet","transition"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paradite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2016-02-15T17:34:46.000Z","updated_at":"2025-03-05T12:26:43.000Z","dependencies_parsed_at":"2023-03-01T05:00:30.106Z","dependency_job_id":null,"html_url":"https://github.com/paradite/d3-cheatsheet","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/paradite%2Fd3-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paradite%2Fd3-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paradite%2Fd3-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paradite%2Fd3-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paradite","download_url":"https://codeload.github.com/paradite/d3-cheatsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251765150,"owners_count":21640141,"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":["axis","cheatsheet","d3","d3-cheatsheet","transition"],"created_at":"2024-10-03T12:38:10.767Z","updated_at":"2025-04-30T18:45:21.194Z","avatar_url":"https://github.com/paradite.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# D3.js Cheatsheet\n\n## d3.js quick reference sheet\n\n### Table of contents\n\n- [Attributes/Styles](#attributesstyles)\n- [Classes](#classes)\n- [Link/Href](#linkhref)\n- [Properties](#properties)\n- [Axis](#axis)\n- [Time parsing/formatting](#time-parsingformatting)\n- [Color](#color)\n- [General Update Pattern](#general-update-pattern)\n- [Transition](#transition)\n\n### Attributes/Styles\n\n#### Attributes/Styles - initialization\n\n```javascript\nvar svgWrapper = d3.select(\"body\")\n  .append(\"svg\")\n  .attr(\"id\", \"viz\")\n  .attr(\"width\", width + margin.left + margin.right)\n  .attr(\"height\", height + margin.top + margin.bottom);\n\nvar container = svgWrapper.append(\"g\")\n  .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")\n  .style(\"pointer-events\", \"all\");\n```\n\n#### Attributes/Styles - circle\n\n```javascript\nselection.attr(\"r\", style.r)\n  .attr(\"fill\", style.fill)\n  .attr(\"stroke\", style.color)\n  .attr(\"stroke-width\", style[\"stroke-width\"])\n```\n\n### Classes\n\n```javascript\nselection.classed('my-class', true);\n```\n\n### Link/Href\n\n#### In SVG\n\n```javascript\nselection.select('text')\n  .text(function(d) {\n    return d.name;\n  })\n  .attr(\"xlink:href\", function(d){\n    return d.url;});\n```\n#### In HTML\n\n```javascript\nselection\n  .append('a')\n  .attr('href', function(d) {\n    return d.url;\n  })\n  .text(function(d) {\n    return d.name;\n  });\n```\n\n### Properties\n\n```javascript\nvar id = d3.select(\"#id\").property(\"value\");\nd3.select(\"input\").property(\"value\", d3.event.keyCode);\n```\n\n### Axis\n\n```javascript\nvar xAxis = d3.svg.axis()\n  .scale(_xScale)\n  .orient(\"bottom\")\n  .ticks(4)\n  .tickFormat(d3.time.format('%d %b %I%p')) //14 Feb 12AM\n  .tickSize(5);\n```\n\n### Time parsing/formatting\n\n```javascript\nvar parseDate = d3.time.format(\"%Y-%m-%dT%H:%M:%SZ\").parse,\n  formatDate = d3.time.format(\"%d %b %H:%M:%S\"),\n  formatDateForQuery = d3.time.format(\"%Y-%m-%dT%H:%M:%SZ\"),\n  formatTime = d3.time.format(\"%H:%M:%S\");\n```\n\n### Color\n\n#### Custom color ordinal scale\n\n```javascript\nvar myCategory20Colors = [\n  0x1f77b4, 0xaec7e8,\n  0xff7f0e, 0xffbb78,\n  0x2ca02c, 0x98df8a,\n  0xd62728, 0xff9896,\n  0x9467bd, 0xc5b0d5,\n  0x8c564b, 0xc49c94,\n  0xe377c2, 0xf7b6d2,\n  0xbcbd22, 0xdbdb8d,\n  0x17becf, 0x9edae5\n].map(function(x) {\n  var value = x + \"\";\n  return d3.rgb(value \u003e\u003e 16, value \u003e\u003e 8 \u0026 0xff, value \u0026 0xff).toString();\n});\n\nvar myCategory20 = d3.scale.ordinal().range(myCategory20Colors);\nconsole.log(myCategory20(\"x\"), myCategory20(\"y\"));\n// #1f77b4 #aec7e8\n```\n\n### General Update Pattern\n\n```javascript\nfunction update(data) {\n\n  // DATA JOIN\n  // Join new data with old elements, if any.\n  var text = svg.selectAll(\"text\")\n    .data(data);\n\n  // UPDATE\n  // Update old elements as needed.\n  text.attr(\"class\", \"update\");\n\n  // ENTER\n  // Create new elements as needed.\n  text.enter().append(\"text\")\n    .attr(\"class\", \"enter\")\n    .attr(\"x\", function(d, i) { return i * 32; })\n    .attr(\"dy\", \".35em\");\n\n  // ENTER + UPDATE\n  // Appending to the enter selection expands the update selection to include\n  // entering elements; so, operations on the update selection after appending to\n  // the enter selection will apply to both entering and updating nodes.\n  text.text(function(d) { return d; });\n\n  // EXIT\n  // Remove old elements as needed.\n  text.exit().remove();\n}\n```\n\n### Transition\n\n#### Chaining transition\n\n```javascript\nfunction endall(transition, callback) {\n  if (transition.size() === 0) {\n    callback()\n  }\n  var n = 0;\n  transition\n    .each(function() {\n      ++n;\n    })\n    .each(\"end\", function() {\n      if (!--n) callback.apply(this, arguments);\n    });\n}\n\nselection.transition()\n  .attr(\"cx\", xMap)\n  .attr(\"cy\", yMap)\n  .call(endall, function() { \n    console.log(\"all loaded\");\n    // do your next transition\n  });\n```\n\n[source](https://stackoverflow.com/questions/10692100/invoke-a-callback-at-the-end-of-a-transition)\n[demo](http://paradite.github.io/d3-cheatsheet/)\n\n\n---\n\n## Other cheatsheets\n- [bash-cheatsheet](https://github.com/paradite/bash-cheatsheet)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparadite%2Fd3-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparadite%2Fd3-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparadite%2Fd3-cheatsheet/lists"}