{"id":13481430,"url":"https://github.com/sebastian-meier/d3.geo2rect","last_synced_at":"2025-08-14T01:32:19.857Z","repository":{"id":141914194,"uuid":"80863984","full_name":"sebastian-meier/d3.geo2rect","owner":"sebastian-meier","description":"Morphing geojson polygons into rectangles ","archived":false,"fork":false,"pushed_at":"2019-01-07T10:35:14.000Z","size":3043,"stargazers_count":200,"open_issues_count":3,"forks_count":11,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-02T09:51:12.459Z","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":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebastian-meier.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}},"created_at":"2017-02-03T19:52:37.000Z","updated_at":"2024-09-27T05:28:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"69a48c50-e7eb-4580-885d-d7ffcfad6131","html_url":"https://github.com/sebastian-meier/d3.geo2rect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sebastian-meier/d3.geo2rect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-meier%2Fd3.geo2rect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-meier%2Fd3.geo2rect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-meier%2Fd3.geo2rect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-meier%2Fd3.geo2rect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastian-meier","download_url":"https://codeload.github.com/sebastian-meier/d3.geo2rect/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastian-meier%2Fd3.geo2rect/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270347436,"owners_count":24568571,"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-08-13T02:00:09.904Z","response_time":66,"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-07-31T17:00:51.768Z","updated_at":"2025-08-14T01:32:19.368Z","avatar_url":"https://github.com/sebastian-meier.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others","Maps"],"sub_categories":[],"readme":"# d3.geo2rect\n## Morphing geojson polygons into rectangles \n\n![DemoClip](https://raw.githubusercontent.com/sebastian-meier/d3.geo2rect/master/thumb.gif)\n\nThe package has two modules: compute (function) and draw (class).\nFor using this one needs to include the d3 and turf.js library.\n\n## compute\n\nCompute for morphing a geojson into rectangles we need to clean the geojson first. All MultiPolygons will be transformed into Polygons (largest polygon will be used). Holes will be removed. The original data is stored in .geometry.ocoordinates.\nAfterwards a second set of coordinates is being generated representing a rectangle. The rectangle has the bounding box 0,0|1,1 so its easy to transform. In addition each coordinate has its centroid in the geo-space stored within. The rectangle coordinates are stored in .geometry.qcoordinates.\n\n```\nd3.json('./data/de.geojson', function(err, data){\n  var geojson = geo2rect.compute(data);\n});\n```\n\n## draw\n\nDraw takes care of drawing the data received from the compute function.\n\nSimply create a new draw instance:\n```\nvar g2r = new geo2rect.draw();\n```\n\nSend the configs:\n```\nvar config = {\n  width : 700,\n  height : 700,\n  padding : 70,\n  projection : d3.geoMercator(),\n  duration : 1000,\n  key:function(d){return d.properties.Kurz; },\n  grid : {\n    SH:{x:1,y:0},\n    HB:{x:0,y:1},\n    HH:{x:1,y:1},\n    MV:{x:2,y:1},\n    NI:{x:0,y:2},\n    BB:{x:1,y:2},\n    BE:{x:2,y:2},\n    NW:{x:0,y:3},\n    ST:{x:1,y:3},\n    SN:{x:2,y:3},\n    RP:{x:0,y:4},\n    HE:{x:1,y:4},\n    TH:{x:2,y:4},\n    SL:{x:0,y:5},\n    BW:{x:1,y:5},\n    BY:{x:2,y:5}\n  }\n};\ng2r.config = config;\n```\nPlease note, that this script does not compute the grid layout. See [nmap](https://github.com/sebastian-meier/nmap.js) and [nmap-squared](https://github.com/sebastian-meier/nmap-squared.js) for examples of how to do this automatically.\n\nThen send the computed data from the compute function:\n```\ng2r.data = geojson;\n```\n\nAn d3 svg object:\n```\ng2r.svg = svg.append('g');\n```\n\nAnd then draw the whole thing:\n```\ng2r.draw();\n```\n\nYou can simply switch the mode by calling:\n```\ng2r.toggle();\n```\n\nThe current mode can be checked via:\n```\ng2r.mode\n```\n\nTo update and draw again, simply call the draw function again:\n```\ng2r.draw();\n```\n\n## Examples\n\nIn the examples folder you find three examples for the states of Germany and the US as well as London boroughs.\n\nLive examples can be found here:\n\n[Germany](http://prjcts.sebastianmeier.eu/geo2rect/example/index_de.html)\n[US](http://prjcts.sebastianmeier.eu/geo2rect/example/index_us.html)\n[London](http://prjcts.sebastianmeier.eu/geo2rect/example/index_ldn.html)\n[Italy](http://de.straba.us/geo2rect/example/index_it.html)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-meier%2Fd3.geo2rect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastian-meier%2Fd3.geo2rect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastian-meier%2Fd3.geo2rect/lists"}