Maps, Data, Viz, UX, Design
connector = MapdCon
.protocol("https")
.host("metis.mapd.com")
.port("443")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connectAsync()
chart = {
const container = html`<div></div>`
yield container
const colors = mapd3.colors.mapdColors
const chart = mapd3
.Chart(container)
.setConfig({
// common
width: width,
height: 400,
margin: {
top: 32,
right: 70,
bottom: 64,
left: 80
},
keyType: "string", // time, number, string
chartType: "stackedBar", // line, area, stackedArea, bar, stackedBar
useScrolling: true,
// intro animation
isAnimated: false,
animationDuration: 1500,
// scale
//colorSchema: null,
defaultColor: "skyblue",
xDomain: "auto",
yDomain: "auto",
y2Domain: "auto",
// data
sortBy: "totalDescending", // totalAscending, totalDescending, alphaAscending, alphaDescending
// axis
tickPadding: 5,
tickSizes: 8,
yTicks: "auto",
y2Ticks: "auto",
xTickSkip: "auto",
xAxisFormat: "auto",
yAxisFormat: "auto",
y2AxisFormat: ".2f",
tooltipFormat: [".4f", ".6f"],
grid: "horizontal",
axisTransitionDuration: 0,
labelsAreRotated: false,
// hover
dotRadius: 4,
// tooltip
mouseChaseDuration: 0,
tooltipIsEnabled: true,
// format
dateFormat: "%b %d, %Y",
tooltipTitleDateFormat: "%b %d, %Y",
inputDateFormat: "%m-%d-%Y",
numberFormat: ".2f",
// legend
legendXPosition: "auto",
legendYPosition: "auto",
legendTitle: "Dataset",
legendIsEnabled: true,
// binning
binningResolution: "1mo",
binningIsAuto: true,
binningToggles: ["10y", "1y", "1q", "1mo"],
binningIsEnabled: false,
// domain
xLock: false,
yLock: false,
y2Lock: false,
xDomainEditorIsEnabled: false,
yDomainEditorIsEnabled: false,
y2DomainEditorIsEnabled: false,
// brush range
// brushRangeMin: "July 01, 2017",
// brushRangeMax: "Sept 02, 2017",
brushRangeIsEnabled: false,
// brush focus
brushIsEnabled: false,
// label
xLabel: "X Axis Label",
yLabel: "Y Axis Label",
// y2Label: "Y2 Axis Label",
// bar
barSpacingPercent: 10,
selectedKeys: []
})
.setData(series)
return chart
}
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.
