mlu @aws
{
yield htl.html`<div style='display: flex'>
<div id="bar-0" style="width: 400px; height: 400px;"></div>
<div id="bar-1" style="width: 400px; height: 400px;"></div>
</div>`;
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,
}
);
}
{
yield htl.html`
<div id="viz4" style="width: 600px; height: 600px;"></div>
<style>
.link {
stroke: black;
stroke-width: 1;
}
</style>
`;
new roughViz.Network(
{
element: '#viz4',
data: createNodes(20),
links: createLinks(20),
collision: 3.05,
radiusExtent: [10, 60],
roughness: 6,
fillStyle: 'solid',
stroke: "black",
color: 'pink',
margin: { top: 100, left: 100, right: 100, bottom: 100 },
textCallback: (d) => "Votes: " + d.radius,
legend: [
{ color: "pink", text: "Democrat" },
{ color: "steelblue", text: "Republican" },
],
colorCallback: (d) => (d.radius > 10 ? "pink" : "steelblue"),
strokeWidth: 0.8,
axisStrokeWidth: 1,
innerStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
}
);
}
{
yield htl.html`<div style='display: flex'>
<div id="barh-0" style="width: 400px; height: 400px;"></div>
<div id="barh-1" style="width: 400px; height: 400px;"></div>
</div>`;
new roughViz.BarH(
{
element: '#barh-0',
data: {
labels: ['North', 'South', 'East', 'West'],
values: [10, 5, 8, 3]
},
title: "Regions",
margin: { top: 45, left: 45, right: 45, bottom: 45 },
roughness: 0,
color: 'darkorange',
stroke: 'grey',
strokeWidth: 1,
fillStyle: 'zigzag-line',
innerStrokeWidth: .5,
fillWeight: 0.95,
}
);
new roughViz.BarH(
{
element: '#barh-1',
data: {
labels: ['North', 'South', 'East', 'West'],
values: [10, 5, 8, 3]
},
title: "Regions",
margin: { top: 45, left: 45, right: 45, bottom: 45 },
roughness: 5,
color: 'orange',
stroke: 'black',
strokeWidth: 1,
fillStyle: 'hachure',
fillWeight: 0.5,
}
);
}
{
yield htl.html`<div style='display: flex'>
<div id="donut-0" style="width: 400px; height: 400px;"></div>
<div id="donut-1" style="width: 400px; height: 400px;"></div>
</div>`;
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,
}
);
}
{
yield htl.html`<div id="viz3" style="width: 700px; height: 700px;"></div>`;
new roughViz.Force(
{
element: '#viz3',
data: createNodes(25),
links: createLinks(25),
collision: 3.3,
radiusExtent: [40, 120],
roughness: 2.5,
fillStyle: 'hachure',
stroke: 'black',
margin: { top: 100, left: 100, right: 100, bottom: 100 },
textCallback: (d) => "Size: " + d.radius,
legend: [
{ color: "lime", text: "Lime" },
{ color: "yellow", text: "Lemon" },
],
colorCallback: (d) => (d.radius > 8 ? "lime" : "yellow"),
strokeWidth: 0,
axisStrokeWidth: 1,
innerStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
}
);
}
{
yield htl.html`<div style='display: flex'>
<div id="pie-0" style="width: 400px; height: 400px;"></div>
<div id="pie-1" style="width: 400px; height: 400px;"></div>
</div>`;
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,
}
);
}
{
yield htl.html`<div style='display: flex'>
<div id="scatter-0" style="width: 400px; height: 400px;"></div>
<div id="scatter-1" style="width: 400px; height: 400px;"></div>
</div>`;
new roughViz.Scatter({
element: "#scatter-0",
data: scatterData,
roughness: 0,
margin: { top: 40, left: 40, right: 40, bottom: 40 },
stroke: 'black',
colors: 'red',
radius: "radius",
fillStyle: 'cross-hatch',
strokeWidth: 1,
});
new roughViz.Scatter({
element: "#scatter-1",
data: scatterData,
roughness: 4,
margin: { top: 40, left: 40, right: 40, bottom: 40 },
stroke: 'black',
colors: 'red',
fillStyle: 'solid',
radius: "radius",
strokeWidth: 1.4,
});
}
{
yield htl.html`<div style='display: flex'>
<div id="stackedbar-0" style="width: 400px; height: 400px;"></div>
<div id="stackedbar-1" style="width: 400px; height: 400px;"></div>
</div>`;
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,
}
);
}
{
yield htl.html`<div id="viz8" style="width: 600px; height: 400px;"></div>`;
new roughViz.Line(
{
element: '#viz8',
data: { y: scatterData["y"], y2: scatterData["x"] },
margin: { top: 40, left: 40, right: 40, bottom: 40 },
axisStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
circle: false,
}
);
}
roughViz = require('https://unpkg.com/rough-viz@2.0.5/dist/roughviz.umd.js');
d3 = require("d3-array@3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
