[{"_1":2,"_169":-5,"_170":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","ed575ea3c2fddd4ec3ded6bc2d9d13fc99830dc2","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_149":150,"_166":167,"_168":-5},"handle","dcm31","name","roughVizPlayground","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":107,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":107,"_116":-5,"_117":118,"_14":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":129,"_132":133,"_135":136,"_148":20},"id","a5a1fada-2783-11f0-b46e-569c3dd06744","createdAt",["D",1746210682150],"deletedAt","legacyEnvVars",true,"privacy","public","description","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","a5a50e6e-2783-11f0-b46e-569c3dd06744","pinPreview","screenshotVersion","likeCount",1,"d663a026-6449-42f6-9156-1d4a2d64d38c","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_130":131},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","org",{"_93":94,"_134":131},"avatar","branch",{"_137":138,"_95":43,"_101":139,"_140":102,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},"version",3,"a5a2753c-2783-11f0-b46e-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":151,"_95":98,"_152":114,"_153":-5,"_154":139,"_155":138,"_156":107,"_103":157,"_137":158,"_159":160,"_161":162,"_163":20,"_164":-5,"_97":165},"a5b05a62-2783-11f0-b46e-569c3dd06744","fileId","parentId","branchId","branchVersion","latest",["D",1743016652549],2,"fileType","http","content","export default async function handler(request) {\n return new Response(\n `\n \n \n \n \n \n roughViz Playground\n \n \n \n \n

roughViz Playground

Explore the sketchy/hand-drawn styled charts library by adjusting parameters below

\n\n

roughViz is an easy, responsive JavaScript library for creating hand-drawn looking charts in the browser. Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird!

\n \n

Chart Controls

\n Roughness (0-15):\n \n 2\n

\n \n

\n Fill Style:\n \n

\n \n

\n Bowing (0-10):\n \n 1\n

\n \n

\n Fill Weight (0-5):\n \n 1\n

\n\n

\n Stroke Width (0-5):\n \n 1\n

\n\n

\n Inner Stroke Width (0-5):\n \n 1\n

\n\n

\n Color:\n \n

\n\n

\n Stroke Color:\n \n

\n \n \n

\n \n

Bar Chart

\nnew roughViz.Bar({\n  element: '#bar-chart',\n  data: {\n    labels: ['North', 'South', 'East', 'West', 'Central'],\n    values: [23, 42, 35, 27, 15]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Regional Sales'\n})

\n \n

Donut Chart

\nnew roughViz.Donut({\n  element: '#donut-chart',\n  data: {\n    labels: ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Berries'],\n    values: [30, 25, 20, 15, 10]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Fruit Sales'\n})

\n \n

Pie Chart

\nnew roughViz.Pie({\n  element: '#pie-chart',\n  data: {\n    labels: ['Desktop', 'Tablet', 'Mobile', 'Other'],\n    values: [45, 15, 35, 5]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Device Usage'\n})

\n \n

Scatter Chart

\nnew roughViz.Scatter({\n  element: '#scatter-chart',\n  data: {\n    x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n    y: [10, 20, 15, 35, 25, 40, 30, 45, 35, 50]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Sample Data Points',\n  xLabel: 'X Axis',\n  yLabel: 'Y Axis'\n})

\n\n

Horizontal Bar Chart

\nnew roughViz.BarH({\n  element: '#barh-chart',\n  data: {\n    labels: ['Apples', 'Bananas', 'Oranges', 'Grapes', 'Berries'],\n    values: [30, 25, 20, 15, 10]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Fruit Sales'\n})

\n \n

Line Chart

\n// Line chart requires CSV data, so we're generating it\nconst csvData = generateCsvData();\n\nnew roughViz.Line({\n  element: '#line-chart',\n  data: csvData,\n  y1: 'value1',\n  y2: 'value2',\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Monthly Trends',\n  xLabel: 'Month',\n  yLabel: 'Value'\n})

\n\n

Force Chart

\nnew roughViz.Force({\n  element: '#force-chart',\n  data: {\n    nodes: [\n      {id: 'Harry'},\n      {id: 'Sally'},\n      {id: 'Alice'}\n    ],\n    links: [\n      {source: 'Harry', target: 'Sally'},\n      {source: 'Harry', target: 'Alice'},\n    ]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Force Diagram'\n})

\n\n

Network Chart

\nnew roughViz.Network({\n  element: '#network-chart',\n  data: {\n    nodes: [\n      {id: 'Harry', color: 'orange'},\n      {id: 'Sally', color: 'pink'},\n      {id: 'Alice', color: 'lightblue'}\n    ],\n    links: [\n      {source: 'Harry', target: 'Sally'},\n      {source: 'Harry', target: 'Alice'},\n    ]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Network Diagram'\n})

\n\n

Stacked Bar Chart

\nnew roughViz.StackedBar({\n  element: '#stacked-bar-chart',\n  data: {\n    labels: ['A', 'B', 'C'],\n    values: [\n      {category: 'X', value: 10},\n      {category: 'Y', value: 20},\n      {category: 'Z', value: 30},\n      {category: 'X', value: 15},\n      {category: 'Y', value: 25},\n      {category: 'Z', value: 35},\n      {category: 'X', value: 20},\n      {category: 'Y', value: 30},\n      {category: 'Z', value: 40}\n    ]\n  },\n  roughness: 2,\n  fillStyle: 'hachure',\n  bowing: 1,\n  fillWeight: 1,\n  strokeWidth: 1,\n  innerStrokeWidth: 1,\n  stroke: '#000000',\n  color: '#87ceeb',\n  title: 'Stacked Bar Chart'\n})

\n \n \n

\n \n \n \n \n \n \n \n `,\n {\n headers: { 'Content-Type': 'text/html' },\n }\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/roughVizPlayground/code/main.tsx","extension","actionData","errors"]