Published
Edited
Oct 2, 2019
4 stars
urban_theme = {
const markColor = "#1696d2"
const axisColor = "#000000"
const backgroundColor = "#FFFFFF"
const font = "Lato"
const labelFont = "Lato"
const sourceFont = "Lato"
const gridColor = "#DEDDDD"
const main_palette = ["#1696d2",
"#d2d2d2",
"#000000",
"#fdbf11",
"#ec008b",
"#55b748",
"#5c5859",
"#db2b27",
]
const sequential_palette = ["#cfe8f3",
"#a2d4ec",
"#73bfe2",
"#46abdb",
"#1696d2",
"#12719e",
]
return {
"width": 685,
"height": 380,
"config": {
"title": {
"anchor": "start",
"fontSize": 18,
"font": font,
"fontColor": "#000000"
},
"axisX": {
"domain": true,
"domainColor": axisColor,
"domainWidth": 1,
"grid": false,
"labelFontSize": 12,
"labelFont": labelFont,
"labelAngle": 0,
"tickColor": axisColor,
"tickSize": 5,
"titleFontSize": 12,
"titlePadding": 10,
"titleFont": font,
"title": "",
},
"axisY": {
"domain": false,
"domainWidth": 1,
"grid": true,
"gridColor": gridColor,
"gridWidth": 1,
"labelFontSize": 12,
"labelFont": labelFont,
"labelPadding": 8,
"ticks": false,
"titleFontSize": 12,
"titlePadding": 10,
"titleFont": font,
"titleAngle": 0,
"titleY": -10,
"titleX": 18,
},
"background": backgroundColor,
"legend": {
"labelFontSize": 12,
"labelFont": labelFont,
"symbolSize": 100,
// "symbolType": "square",
"titleFontSize": 12,
"titlePadding": 10,
"titleFont": font,
"title": "",
"orient": "right",
"offset": 10,
},
"view": {
"stroke": "transparent",
},
"range": {
"category": main_palette,
"diverging": sequential_palette,
},
"area": {
"fill": markColor,
},
"rect": {
"fill": markColor,
},
"line": {
"color": markColor,
"stroke": markColor,
"strokewidth": 5,
},
"trail": {
"color": markColor,
"stroke": markColor,
"strokeWidth": 0,
"size": 1,
},
"path": {
"stroke": markColor,
"strokeWidth": 0.5,
},
"point": {
"filled": true,
},
"text": {
"font": sourceFont,
"color": markColor,
"fontSize": 11,
"align": "center",
"fontWeight": 400,
"size": 11,
},
"bar": {
// "size": 40,
// "binSpacing": 15,
// "continuousBandSize": 30,
// "discreteBandSize": 30,
"fill": markColor,
"stroke": false,
},
},
}
}
vegaEmbed = require("vega-embed@5")
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.
