2c:null 2d:["$","title",null,{"children":"roughViz.js Examples | Jared Wilber | Observable"}] 32:T41c,{ yield htl.html`

`; new roughViz.Bar( { element: '#bar-1', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, title: "Not rough enough", margin: { top: 50, left: 50, right: 50, bottom: 50 }, roughness: 0, colors: ['red', 'orange', 'blue', 'skyblue'], stroke: 'black', strokeWidth: 1, fillStyle: 'cross-hatch', fillWeight: 0.5, } ); new roughViz.Bar( { element: '#bar-0', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, title: "Now we're talking!", margin: { top: 50, left: 50, right: 50, bottom: 50 }, roughness: 15, colors: ['red', 'orange', 'blue', 'skyblue'], stroke: 'black', strokeWidth: 1, fillStyle: 'dash', fillWeight: 0.85, } ); }33:T421,{ yield htl.html`

`; new roughViz.Donut( { element: '#donut-0', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, margin: { top: 80, left: 80, right: 80, bottom: 80 }, title: "Regions", roughness: 1.5, colors: ['pink', 'skyblue', 'orange', 'red'], stroke: 'black', strokeWidth: 1, fillStyle: 'cross-hatch', fillWeight: 0.25, } ); new roughViz.Donut( { element: '#donut-1', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, margin: { top: 80, left: 80, right: 80, bottom: 80 }, title: "Regions", roughness: 10.5, colors: ['pink', 'skyblue', 'orange', 'red'], stroke: 'black', strokeWidth: 1, fillStyle: 'cross-hatch', fillWeight: 0.25, } ); }34:T446,{ yield htl.html`

`; new roughViz.Pie( { element: '#pie-0', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, title: "Regions", margin: { top: 80, left: 80, right: 80, bottom: 80 }, roughness: 0, colors: ['green', 'orange', 'blue', 'skyblue'], stroke: 'black', strokeWidth: 4, innerStrokeWidth: 1, fillStyle: 'cross-hatch', fillWeight: 0.5, } ); new roughViz.Pie( { element: '#pie-1', data: { labels: ['North', 'South', 'East', 'West'], values: [10, 5, 8, 3] }, title: "Regions", margin: { top: 80, left: 80, right: 80, bottom: 80 }, roughness: 20, colors: ['green', 'orange', 'blue', 'skyblue'], stroke: 'black', strokeWidth: 1, innerStrokeWidth: 2, fillStyle: 'hachure', fillWeight: 0.5, } ); }35:T4f1,{ yield htl.html`

`; new roughViz.StackedBar( { element: '#stackedbar-0', data: [ { month: "Jan", A: 20, B: 5, C: 8 }, { month: "Feb", A: 25, B: 10, C: 9 }, { month: "March", A: 15, B: 5, C: 19 }, ], labels: "month", roughness: 0, fillStyle: 'cross-hatch', margin: { top: 40, left: 40, right: 40, bottom: 40 }, stroke: 1, color: 'red', strokeWidth: 1, axisStrokeWidth: 1, innerStrokeWidth: 1, fillWeight: 1, axisRoughness: 1, } ); new roughViz.StackedBar( { element: '#stackedbar-1', data: [ { month: "Jan", A: 20, B: 5, C: 8 }, { month: "Feb", A: 25, B: 10, C: 9 }, { month: "March", A: 15, B: 5, C: 19 }, ], labels: "month", roughness: 3, fillStyle: 'hachure', margin: { top: 40, left: 40, right: 40, bottom: 40 }, stroke: 1, color: 'red', strokeWidth: 1.5, axisStrokeWidth: 1, innerStrokeWidth: 1, fillWeight: 1, axisRoughness: 1, } ); }36:[] 30:{"id":"6d3209e2f7f114de","slug":"roughviz-examples","title":"roughViz.js Examples","thumbnail":"2bdc163d4acd87b6e3e656bd6d8fb60bdfdd5c3430a0f5de13b580b97dea4412","access_level":"public","create_time":"$D2023-10-01T04:17:09.032Z","update_time":"$D2023-11-23T18:56:57.399Z","view_time":null,"first_public_time":"$D2023-10-01T04:17:09.032Z","has_unpublished_edits":null,"fork":{"id":"7012061a800e7057","slug":"simple-svg","title":"Simple SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":16,"starred":false,"owner":{"type":"team","id":"9d7ba106b127985c","login":"jwilber","name":"Jared Wilber","avatar_url":"https://avatars-next.observableusercontent.com/a8b6d1b1f927fd146140c1d67f361a6032901298c7e588c44cdec60cfb1135b5","tier":"starter_2024"},"version":422,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ac42b7d60ac5602","login":"jwilber","name":"Jared Wilber","avatar_url":"https://avatars-next.observableusercontent.com/a8b6d1b1f927fd146140c1d67f361a6032901298c7e588c44cdec60cfb1135b5","tier":null}],"members":[{"type":"individual","id":"0ac42b7d60ac5602","login":"jwilber","name":"Jared Wilber","avatar_url":"https://avatars-next.observableusercontent.com/a8b6d1b1f927fd146140c1d67f361a6032901298c7e588c44cdec60cfb1135b5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"roughViz.js Examples","cells":[{"id":0,"value":"# roughViz.js Examples\n\nThese are some examples of the roughViz (version 2.0.5) library. \n\nRelevat links:\n\n- Website: https://jwilber.me/roughviz\n- GitHub: https://github.com/jwilber/roughViz\n\nEdit the code below each chart & observe the changes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"# Bar\nBarchart example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"# Network\nForce-directed network chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"{ \n yield htl.html`\n

\n \n `;\n new roughViz.Network(\n {\n element: '#viz4',\n data: createNodes(20),\n links: createLinks(20),\n collision: 3.05,\n radiusExtent: [10, 60],\n roughness: 6,\n fillStyle: 'solid',\n stroke: \"black\",\n color: 'pink',\n margin: { top: 100, left: 100, right: 100, bottom: 100 },\n textCallback: (d) => \"Votes: \" + d.radius,\n legend: [\n { color: \"pink\", text: \"Democrat\" },\n { color: \"steelblue\", text: \"Republican\" },\n ],\n colorCallback: (d) => (d.radius > 10 ? \"pink\" : \"steelblue\"),\n strokeWidth: 0.8,\n axisStrokeWidth: 1,\n innerStrokeWidth: 1,\n fillWeight: 1,\n axisRoughness: 1,\n }\n ); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"# BarH\nHorizontal Bar Chart (aka Column Chart)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"{ \nyield htl.html`

`; \n new roughViz.BarH(\n {\n element: '#barh-0',\n data: {\n labels: ['North', 'South', 'East', 'West'],\n values: [10, 5, 8, 3]\n },\n title: \"Regions\",\n margin: { top: 45, left: 45, right: 45, bottom: 45 },\n roughness: 0,\n color: 'darkorange',\n stroke: 'grey',\n strokeWidth: 1,\n fillStyle: 'zigzag-line',\n innerStrokeWidth: .5,\n fillWeight: 0.95,\n }\n ); \n\n new roughViz.BarH(\n {\n element: '#barh-1',\n data: {\n labels: ['North', 'South', 'East', 'West'],\n values: [10, 5, 8, 3]\n },\n title: \"Regions\",\n margin: { top: 45, left: 45, right: 45, bottom: 45 },\n roughness: 5,\n color: 'orange',\n stroke: 'black',\n strokeWidth: 1,\n fillStyle: 'hachure',\n fillWeight: 0.5,\n }\n ); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"# Donut","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"# Force\nForce-directed bubble chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"{ \n yield htl.html`

`;\n new roughViz.Force(\n {\n element: '#viz3',\n data: createNodes(25),\n links: createLinks(25),\n collision: 3.3,\n radiusExtent: [40, 120],\n roughness: 2.5,\n fillStyle: 'hachure',\n stroke: 'black',\n margin: { top: 100, left: 100, right: 100, bottom: 100 },\n textCallback: (d) => \"Size: \" + d.radius,\n legend: [\n { color: \"lime\", text: \"Lime\" },\n { color: \"yellow\", text: \"Lemon\" },\n ],\n colorCallback: (d) => (d.radius > 8 ? \"lime\" : \"yellow\"),\n strokeWidth: 0,\n axisStrokeWidth: 1,\n innerStrokeWidth: 1,\n fillWeight: 1,\n axisRoughness: 1,\n }\n ); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"# Pie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"# Scatter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"{ \n yield htl.html`

`; \n \n new roughViz.Scatter({\n element: \"#scatter-0\",\n data: scatterData,\n roughness: 0,\n margin: { top: 40, left: 40, right: 40, bottom: 40 },\n stroke: 'black',\n colors: 'red',\n radius: \"radius\",\n fillStyle: 'cross-hatch',\n strokeWidth: 1,\n });\n\n new roughViz.Scatter({\n element: \"#scatter-1\",\n data: scatterData,\n roughness: 4,\n margin: { top: 40, left: 40, right: 40, bottom: 40 },\n stroke: 'black',\n colors: 'red',\n fillStyle: 'solid',\n radius: \"radius\",\n strokeWidth: 1.4,\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"# StackedBar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"# Line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"{ \n yield htl.html`

`;\n\n new roughViz.Line(\n {\n element: '#viz8',\n data: { y: scatterData[\"y\"], y2: scatterData[\"x\"] },\n margin: { top: 40, left: 40, right: 40, bottom: 40 },\n axisStrokeWidth: 1,\n fillWeight: 1,\n axisRoughness: 1,\n circle: false,\n }\n ); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"scatterData = ({\n x: Array.from({ length: 15 }, () => Math.random() * 15),\n y: Array.from({ length: 15 }, () => Math.random() * 15),\n radius: Array.from(\n { length: 15 },\n () => Math.floor(Math.random() * 20) + 1\n ),\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"function createNodes(numNodes) {\n return d3.range(numNodes).map(() => {\n const randomValue = Math.random();\n\n let multiplier =\n randomValue < 0.05\n ? 5\n : randomValue < 0.6\n ? 1\n : randomValue < 0.8\n ? 2\n : 3;\n\n return {\n radius: multiplier * 5,\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"\nfunction createLinks(numNodes) {\n return d3.range(numNodes - 1).map((d, i) => ({\n source: i,\n target: i + 1,\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"roughViz = require('https://unpkg.com/rough-viz@2.0.5/dist/roughviz.umd.js');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"d3 = require(\"d3-array@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"