Published
Edited
Oct 14, 2019
28 stars
roughviz = require("https://unpkg.com/rough-viz@1.0.2")
chart = {
yield html`<div id='viz00'></div>`;
new roughviz.Bar({
element: "#viz00",
data: "https://raw.githubusercontent.com/chekos/datasets/master/data/poblacion.csv",
labels: "Periodo",
values: "Número de personas",
title: "Poblacion de Mexico",
roughness: 1.5,
titleFontSize: 18,
//margin: {right: 40}
}
)
}
{
yield html`<div id='viz01'></div>`;
new roughviz.Donut({
element: "#viz01",
data: "https://raw.githubusercontent.com/chekos/datasets/master/data/poblacion.csv",
labels: "Periodo",
values: "Número de personas",
title: "Poblacion de Mexico",
roughness: 2,
titleFontSize: 18,
}
)
}
{
yield html`<div id='viz02'></div>`;
new roughviz.BarH({
element: "#viz02",
data: "https://raw.githubusercontent.com/chekos/datasets/master/data/poblacion.csv",
labels: "Periodo",
values: "Número de personas",
title: "Poblacion de Mexico",
roughness: 1.5,
titleFontSize: 18,
margin: {right: 40, bottom: 80, top: 30, left:40}
}
)
}
{
yield html`<div id='viz03'></div>`;
new roughviz.Line({
element: "#viz03",
data: "https://raw.githubusercontent.com/chekos/datasets/master/data/poblacion.csv",
//x: [1910, 1921, 1930,1940,1950,1960,1970,1980,1990,2000,2010,2015],
y1: "Número de personas",
title: "Poblacion de Mexico",
roughness: 1.5,
titleFontSize: 18,
margin: {right: 30, bottom: 80, top: 30, left:100}
}
)
}
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.
