{"id":13688354,"url":"https://github.com/nteract/semiotic-docs","last_synced_at":"2025-05-01T16:31:44.531Z","repository":{"id":45318817,"uuid":"148850271","full_name":"nteract/semiotic-docs","owner":"nteract","description":"Docs for using Semiotic","archived":true,"fork":false,"pushed_at":"2021-12-21T16:47:27.000Z","size":9654,"stargazers_count":32,"open_issues_count":21,"forks_count":12,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-12T11:41:21.775Z","etag":null,"topics":["d3","data-visualization","nteract","react"],"latest_commit_sha":null,"homepage":"https://semiotic.nteract.io/","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/nteract.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}},"created_at":"2018-09-14T23:10:01.000Z","updated_at":"2023-12-27T04:00:05.000Z","dependencies_parsed_at":"2022-07-19T03:02:09.377Z","dependency_job_id":null,"html_url":"https://github.com/nteract/semiotic-docs","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/nteract%2Fsemiotic-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fsemiotic-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fsemiotic-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fsemiotic-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nteract","download_url":"https://codeload.github.com/nteract/semiotic-docs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251906915,"owners_count":21663182,"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":["d3","data-visualization","nteract","react"],"created_at":"2024-08-02T15:01:12.013Z","updated_at":"2025-05-01T16:31:44.524Z","avatar_url":"https://github.com/nteract.png","language":"JavaScript","readme":"# Semiotic Docs\n\n**[Semiotic](https://github.com/nteract/semiotic) is a data visualization framework for React.**\n\nIt provides three types of frames XYFrame, OrdinalFrame, NetworkFrame, to deploy a wide variety of charts.\n\n- `XYFrame`: XY data i.e. line charts and scatterplots\n- `OrdinalFrame`: categorical data i.e. bar charts, violin plots, parallel coordinates\n- `NetworkFrame`: topological and network data i.e. flow diagrams, network visualization, and hierarchical views\n\nThis library is created and maintained by [Elijah Meeks](https://twitter.com/Elijah_Meeks).\n\nThese docs were created in collaboration with [Susie Lu](https://twitter.com/DataToViz).\n\n## Getting Started\n\nInstall and save `semiotic` to your project with `yarn` or `npm`.\n\n```js\nyarn add -E semiotic\n//or npm\nnpm i -SE semiotic\n```\n\nwith the following import syntax:\n\n```js\nimport NetworkFrame from \"semiotic/lib/NetworkFrame\"\n```\n\nor you can use the bundled version on unpkg.com\n\n```html\n\u003cscript src=\"https://unpkg.com/semiotic\" /\u003e\n```\n\nwith the following import syntax:\n\n```js\nconst { NetworkFrame } = Semiotic\n```\n\nThese examples use [some CSS](https://github.com/nteract/semiotic-docs/blob/master/public/semiotic.css) that override the default Semiotic styling.\n\n## Contributing a Guide or Example\n\nCreate a fork of the repo.\n\n- If you are creating a new page\n  - Copy an existing Example/Guide as a placeholder for your new page in the corresponding `src/examples` or `src/guides` folders\n  -  In the `src/App.js` file, search for the `PAGES` array, this array drives the navigation on the left, the url to component specification, and the image associated with the new page\n  - Add a new entry for your new page\n- Tips for creating the page\n  - Import the [theme file](https://github.com/nteract/semiotic-docs/blob/master/src/theme.js) to use consistent colors, it's an array of colors\n  - Document any data and reference its source in your example\n  - If you're using the `MarkdownText` component on your page you can use backslash `\\` to escape any additional backticks and $ signs in template code\n  - If this example or guide is only valid for a version above v.1.18.0, please make a note of this in your description\n  - Use the [DocumentFrame](https://github.com/nteract/semiotic-docs/blob/master/src/DocumentFrame.js) component to render your Semitoic code if you want to use the built in show/hide/copy code blocks\n  - If you are using a new feature in Semiotic with a new prop type for example `renderMode`, you may see an error like `ERROR: no label found for renderMode` this means that `DocumentFrame` couldn't find a category to put that prop into, go into the `src/process.js` file and add that new prop into the corresponding process step. This allows `DocumentFrame` to group the code snippet props into meaningful categories\n\n- Test your code snippets\n  - Click the \"Copy Full Code\" button on your code snippet\n  - Go into the [Test](https://github.com/nteract/semiotic-docs/blob/master/src/Test.js) file at `src/Test.js`\n  - Delete all of the code except for the `import React from \"react\"` statement at the top\n  - Paste in the code you copied in the step above\n  - Navigate to `localhost:3000/test` to see how your component looks, make sure it matches exactly to the component you originally created\n  - Handling errors during this test. \n    - using the `overrideProps` on `DocumentFrame`, this allows you to pass an object of props where the key is the same property you're sending to Semiotic, but instead you give it a string value. See the [candlestick example](https://github.com/nteract/semiotic-docs/blob/master/src/examples/CandlestickChart.js#L104) for an example where a title needs to be overwritten because it contains JSX \n    - using the `pre` on `DocumentFrame` to add initial code outside of your frame props, See the [candlestick example](https://github.com/nteract/semiotic-docs/blob/master/src/examples/CandlestickChart.js#L189) to see how it adds the import statement `import { scaleTime } from \"d3-scale\"` to the code snippet\noverrideProps take the prop as a key, and a text. you need to\nUsing the pre value, baseball example\n- If you created a new page instead of adding to an existing guide, create an image for your new page\n  - Take a screenshot of your example\n  - Run your image through [tiny png](https://tinypng.com/), upload it to the `public/assets/img` folder\n  - In the `src/App.js` file entry you made in the `PAGES` array, make sure you update the associated image with the name of the file you added to the public folder\n\nSubmit a pull request\n","funding_links":[],"categories":["data-visualization"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnteract%2Fsemiotic-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnteract%2Fsemiotic-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnteract%2Fsemiotic-docs/lists"}