{"id":23666656,"url":"https://github.com/redsift/d3-rs-reveal","last_synced_at":"2025-12-11T06:30:14.147Z","repository":{"id":65599428,"uuid":"65830049","full_name":"redsift/d3-rs-reveal","owner":"redsift","description":null,"archived":false,"fork":false,"pushed_at":"2017-01-09T17:50:18.000Z","size":13,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-02-11T09:47:13.586Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redsift.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":"2016-08-16T15:08:10.000Z","updated_at":"2016-08-16T15:08:15.000Z","dependencies_parsed_at":"2023-01-31T06:45:16.714Z","dependency_job_id":null,"html_url":"https://github.com/redsift/d3-rs-reveal","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/redsift%2Fd3-rs-reveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-reveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-reveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsift%2Fd3-rs-reveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redsift","download_url":"https://codeload.github.com/redsift/d3-rs-reveal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239675015,"owners_count":19678513,"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-12-29T07:33:29.915Z","updated_at":"2025-12-11T06:30:14.116Z","avatar_url":"https://github.com/redsift.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-rs-reveal\n\n[![Circle CI](https://img.shields.io/circleci/project/redsift/d3-rs-reveal.svg?style=flat-square)](https://circleci.com/gh/redsift/d3-rs-reveal)\n[![npm](https://img.shields.io/npm/v/@redsift/d3-rs-reveal.svg?style=flat-square)](https://www.npmjs.com/package/@redsift/d3-rs-reveal)\n[![MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/redsift/d3-rs-reveal/master/LICENSE)\n\n`d3-rs-reveal` generate a SVG based transition to reveal an image. Typically large images take time to download and present leaving the user with an unsatisfying experience. This module used animated SVG filters and preview images to blend the transition between the low resolution preview and the full resolution asset when available.\n\n## Example\n\n[View @redsift/d3-rs-reveal on Codepen](http://codepen.io/rahulpowar/pen/mEoVyz?editors=0010)\n\nYou may use your browser's throttling tools and cache to simulate different load and reload scenarios.\n\n## Usage\n\n### Browser\n\n    \u003cscript src=\"//static.redsift.io/reusable/d3-rs-reveal/latest/d3-rs-reveal.umd-es2015.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        var reveal = d3_rs_reveal.html()\n                    .placeholder(placeholder)\n                    .imgWidth(imgWidth)\n                    .imgHeight(imgHeight)\n                    .img(img);\n        \n        d3.select('body').call(reveal);\n    \u003c/script\u003e\n\n### ES6\n\n    import { reveal } from \"@redsift/d3-rs-reveal\";\n    let eml = reveal.html();\n    ...\n\n### Require\n\n    var reveal = require(\"@redsift/d3-rs-reveal\");\n    var eml = reveal.html();\n    ...\n\n## Creating images\n\nThe supplied preview filter was build to hide heavy compression artefacts so the preview can be exported with extreme levels of compression. At these levels, it becomes practical to base64 and inline the image data.\n\n```bash\n$ convert photo-src.jpg -resize 256 -blur 1.1 -quality 10 -profile sRGB_v4_ICC_preference.icc -strip photo-dest_0x.jpg\n$ base64 photo-dest_0x.jpg\n```\n\nNote that the color profile is converted to sRGB before being stripped from the image. A full discussion on image processing is beyond the scope of this module. [gulp-compressedimages](https://github.com/redsift/gulp-compressedimages) provides a tuned pipeline for generating these images in common sizes.\n\n## Checking supported features\n\nFormats such as WEBP can reduce the size of the assets while maintaining quality. Unfortunately testing for browser support for the codec required some work. A helper is exposed on this module `checkSupported`. It returns a promise that can be supplied to the `img` parameter and transformed to the URL of the desired asset. \n\n```js\nimport { reveal, checkSupported } from \"@redsift/d3-rs-reveal\";\nlet imageReveal = reveal()\n                    .placeholder(placeholder)\n                    .imgWidth(imgWidth)\n                    .imgHeight(imgHeight)\n                    .img(checkSupported.then(s =\u003e `./hero${s.retina ? '_2x' : ''}.${s.webp ? 'webp' : 'jpg'}`))\n```\n\n### Parameters\n\nProperty|Description|Transition|Preview\n----|-----------|----------|-------\n`classed`|*String* SVG custom class|N\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fd3-rs-reveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredsift%2Fd3-rs-reveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsift%2Fd3-rs-reveal/lists"}