{"id":15525924,"url":"https://github.com/mmarcon/pretty-data","last_synced_at":"2025-03-28T20:50:09.950Z","repository":{"id":57330200,"uuid":"85351596","full_name":"mmarcon/pretty-data","owner":"mmarcon","description":"Intuitive way of creating d3 visualization headlessly.","archived":false,"fork":false,"pushed_at":"2017-04-07T13:42:18.000Z","size":2873,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-04T17:19:10.464Z","etag":null,"topics":["charts","d3","d3js","data-visualization","data-viz","headless"],"latest_commit_sha":null,"homepage":null,"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/mmarcon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-17T20:21:42.000Z","updated_at":"2023-06-29T04:59:55.000Z","dependencies_parsed_at":"2022-09-21T03:13:15.152Z","dependency_job_id":null,"html_url":"https://github.com/mmarcon/pretty-data","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/mmarcon%2Fpretty-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarcon%2Fpretty-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarcon%2Fpretty-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarcon%2Fpretty-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmarcon","download_url":"https://codeload.github.com/mmarcon/pretty-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246100494,"owners_count":20723469,"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":["charts","d3","d3js","data-visualization","data-viz","headless"],"created_at":"2024-10-02T11:00:36.024Z","updated_at":"2025-03-28T20:50:09.933Z","avatar_url":"https://github.com/mmarcon.png","language":"JavaScript","readme":"# Pretty Data\n\nThis module allows the generation of [D3](https://d3js.org) visualizations on the server.\n\nVisualizations can be exported in HTML, SVG or PNG (via [PhantomJS](http://phantomjs.org/)).\n\n## Installation\n\nAs simple as:\n\n`npm install prettydata`\n\nIf you are more the [Yarn](https://yarnpkg.com) kind of guy then go for:\n\n`yarn add prettydata`\n\n## Usage\n\nUsing Pretty Data is very simple. If you know d3, you know how to use Pretty Data.\n\n```javascript\nconst PrettyData = require('prettydata');\n\nconst WIDTH = 1280\nconst HEIGHT = 800;\n\nconst prettyData = new PrettyData(WIDTH, HEIGHT);\n\n//This is the root SVG object where the entire chart will be rendered\nconst svg = prettyData.$;\n\n//This is the same d3 object you'd use in a browser\nconst d3 = PrettyData.d3;\n\n//Optionally, set some style rules\nprettyData.css = {\n    'rect.bordered': {\n        stroke: '#E6E6E6',\n        strokeWidth: '2px'\n    },\n    'text.mono': {\n        fontSize: '9pt',\n        fontFamily: 'Consolas, courier',\n        fill: '#aaa'\n    },\n    'text.axis-workweek, text.axis-worktime': {\n        fill: '#000'\n    }\n};\n\n//\n//Do your d3 stuff here...\n//\n\n//Generate HTML file output\nprettyData.html()\n    .then(PrettyData.to('myfile.html')))\n    .catch(console.error);\n\n//Generate SVG file output\nprettyData.svg()\n    .then(PrettyData.to('myfile.svg')))\n    .catch(console.error);\n\n//Generate PNG file output\nprettyData.png()\n    .then(PrettyData.to('myfile.png')))\n    .catch(console.error);\n```\n\n### Transitions\n\nIf you want to render a d3 visualization on the server using exactly the same code you use on the client, [transitions](https://github.com/d3/d3-transition) may get in the way.\n\nWhen Pretty Data generates the snapshot of the SVG generated by d3 the transition isn't complete (or it's not going to happen at all, this I still have to figure out).\n\nTo overcome this problem, you can either make sure that the chart is generated on the server you get rid of all the transitions, or you can disable all the transitions with\n\n```javascript\nPrettyData.disableD3Transitions();\n```\n\nAn example of this is in [transition.js](https://github.com/mmarcon/pretty-data/blob/master/examples/transition.js):\n\n```javascript\n//Disable d3 transitions\nPrettyData.disableD3Transitions();\n\nconst prettyData = new PrettyData(960, 500);\nconst svg = prettyData.$;\nconst d3 = PrettyData.d3;\n\nsvg.append(\"circle\")       // append a cicle to the svg\n    .attr(\"fill\", \"blue\")   // fill the circle with 'blue'\n    .attr(\"r\", 20)          // set the radius to 10 pixels\n    .attr('cx', 40)         // position the circle at 40 on the x axis\n    .attr('cy', 250)        // position the circle at 250 on the y axis\n    .transition()           // apply a transition\n    .duration(4000)         // apply it over 4000 milliseconds\n    .attr('cx', 920);       // new horizontal position at 920 on x axis\n```\n\nWhen the PNG, SVG and HTML files are generated, the visualization will be in its completed status, as if the transition already happened.\n\n**This method is still very experimental and currently only covers the `delay`, `duration` and  `ease` methods of the [Transition](https://github.com/d3/d3-transition/blob/master/src/transition/index.js) object.**\n\n## Examples\n\n### US TopoJSON\n\nSource: [https://bl.ocks.org/mbostock/4136647](https://bl.ocks.org/mbostock/4136647).\n\n![us topojson example](https://raw.githubusercontent.com/mmarcon/pretty-data/master/examples/out/map-us.png)\n\n### Voronoi\n\nAdapted from: [http://mbostock.github.io/d3/talk/20111116/airports-all.html](http://mbostock.github.io/d3/talk/20111116/airports-all.html).\n\n![voronoi example](https://raw.githubusercontent.com/mmarcon/pretty-data/master/examples/out/voronoi.png)\n\n### Flare\n\nMinimally adapted from: [https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099](https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099).\n\nIn this example the data is pulled on the fly as JSON using [node-fetch](https://github.com/bitinn/node-fetch).\n\n![flare example with data fetched on the fly](https://raw.githubusercontent.com/mmarcon/pretty-data/master/examples/out/flare.png)\n\n### Heatmap (with styles)\n\nSource: [http://bl.ocks.org/ganezasan/dfe585847d65d0742ca7d0d1913d50e1](http://bl.ocks.org/ganezasan/dfe585847d65d0742ca7d0d1913d50e1).\n\nIn this example the chart is styled using the css API exposed by Pretty Data:\n\n```javascript\nprettyData.css = {\n    'rect.bordered': {\n        stroke: '#E6E6E6',\n        strokeWidth: '2px'\n    },\n    'text.mono': {\n        fontSize: '9pt',\n        fontFamily: 'Consolas, courier',\n        fill: '#aaa'\n    },\n    'text.axis-workweek, text.axis-worktime': {\n        fill: '#000'\n    }\n};\n```\n\n![heatmap example with css](https://raw.githubusercontent.com/mmarcon/pretty-data/master/examples/out/heatmap.png)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarcon%2Fpretty-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmarcon%2Fpretty-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarcon%2Fpretty-data/lists"}