import {vegaDataViewer} from "@john-guerra/vega-data-viewer"
VegaLite = require('@observablehq/vega-lite')
all = vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": i94data
},
"width": 400,
"height": 300,
// "embed_options": {'actions': false},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"axis": {
"labelAngle": 0,
"format": "%Y",
"tickValues": [
"2013-01-01", "2014-01-01", "2015-01-01",
"2016-01-01", "2017-01-01", "2018-01-01",
"2019-01-01", "2020-01-01", "2021-01-01",
"2022-01-01"
],
"grid": true
}
},
"y": {
"field": "value",
"type": "quantitative",
"title": "Number of Admissions"
},
"color": {
"field": "category",
"type": "nominal",
"scale": {
"domain": ["travelers", "students", "workers", "diplomats", "other"],
"range": [d3.schemeTableau10[3], d3.schemeTableau10[2], d3.schemeTableau10[1], d3.schemeTableau10[4], d3.schemeTableau10[5]]
}
}
},
"layer": [
{
"mark": "line",
"opacity": {
"condition": {
"test": "highlight.category === datum.category || (!highlight.category && hover.date === datum.date)",
"value": 1
},
"value": 0.2 // Non-highlighted lines will be more transparent
},
"encoding": {
"detail": {
"field": "category",
"type": "nominal"
}
}
},
{
"transform": [{"filter": {"param": "hover", "empty": false}}],
"mark": "point",
"encoding": {
"opacity": {
"condition": {"param": "hover", "value": 1},
"value": 0
}
}
},
{
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "param": "hover", "empty": false},
"value": 0
},
"tooltip": [
{
"field": "date",
"type": "temporal",
"timeUnit": "yearmonthdate",
"title": "Month",
"format": "%B, %Y"
},
{
"field": "category",
"title": "Type",
"type": "nominal"
},
{
"field": "value",
"title": "Count",
"type": "quantitative"
}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
},
{
"name": "highlight",
"select": {
"type": "point",
"fields": ["date"],
"on": "click",
"clear": "dblclick", // Double-click to clear
"empty": "all" // Allows for all lines to be active when nothing is selected
}
}
]
}
]
});
i94data = FileAttachment("i94.csv").csv({typed: true})
facet = vegaEmbed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": i94data
},
"transform": [
{"filter": "datum.category !== 'travelers' && datum.category !== 'unknown' "}
],
"facet": {
"field": "category", // Facet by categor
"title": "",
"type": "nominal",
"columns": 3, // Adjust the number of columns as needed
"sort": ["students", "workers", "diplomats", "other"]
},
"spec": {
"width": 300,
"height": 200,
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {"domain": ["2012-08-01", "2023-01-01"]},
"axis": {
"labelAngle": 0,
"format": "%Y",
"tickValues": [
"2013-01-01", "2014-01-01", "2015-01-01",
"2016-01-01", "2017-01-01", "2018-01-01",
"2019-01-01", "2020-01-01", "2021-01-01",
"2022-01-01"
],
"grid": false // Set grid to false to remove grid lines
}
},
"y": {
"field": "value",
"type": "quantitative",
"scale": { "domain": [-10500, 600000] },
"title": "Number of Admissions",
},
"color": {
"field": "category",
"type": "nominal",
"scale": { // Define a color scale with specific colors for each category
"domain": [
// "travelers",
"students", "workers", "other", "diplomats"],
"range": [
// "#4c78a8", // d3.schemeTableau10[3]
"#e45756", // d3.schemeTableau10[2]
"#f58518", // d3.schemeTableau10[1]
d3.schemeTableau10[5],
"#54a24b" // d3.schemeTableau10[4]
]
}
}
},
"layer": [
{
"mark":
{
"type": "rect",
"fill": "none", // Set fill to none to make the rectangle invisible
"stroke": null // Ensure there is no border by setting stroke to null
},
"encoding": {
"x": {
"value": 0
},
"x2": {
"value": "width"
},
"y": {
"value": 0
},
"y2": {
"value": "height"
}
}
},
{
"mark": "line",
"opacity" : 0.2
},
{
"transform": [{"filter": {"param": "hover", "empty": false}}],
"mark": "point",
"encoding": {
"opacity": {
"condition": {"param": "hover", "value": 1},
"value": 0
}
}
},
{
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "param": "hover", "empty": false},
"value": 0
},
"tooltip": [
{
"field": "date",
"type": "temporal",
"timeUnit": "yearmonthdate",
"title": "Month",
"format": "%B, %Y"
},
{
"field": "value",
"title": "Number of Admissions",
"type": "quantitative"}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
]
}
]
}
}
)
vegaEmbed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": i94data
},
"transform": [
{"filter": "datum.category !== 'travelers' && datum.category !== 'unknown' "}
],
"facet": {
"row": {"field": "category", "type": "nominal", "header": {"labelAngle": 0, "title": "\u00A0"},"sort": ["students", "workers", "diplomats", "other"]},
},
"spec": {
"width": 300,
"height": 150,
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"axis": {
"labelAngle": 0,
"format": "%Y",
"tickValues": [
"2013-01-01", "2014-01-01", "2015-01-01",
"2016-01-01", "2017-01-01", "2018-01-01",
"2019-01-01", "2020-01-01", "2021-01-01",
"2022-01-01"
],
"grid": false
}
},
"y": {"field": "value", "type": "quantitative", "title": "Number of admissions"},
"color": {
"field": "category",
"type": "nominal",
"scale": {
"domain": ["students", "workers", "diplomats", "other"],
"range": ["#e45756", "#f58518", "#54a24b", d3.schemeTableau10[5]]
}
}
},
"layer": [
{"mark": "line", "opacity" : 0.2},
{
"transform": [{"filter": {"param": "hover", "empty": false}}],
"mark": "point",
"encoding": {"opacity": {"condition": {"param": "hover", "value": 1}, "value": 0}}
},
{
"mark": "rule",
"encoding": {
"opacity": {"condition": {"value": 0.3, "param": "hover", "empty": false}, "value": 0},
"tooltip": [
{"field": "date", "type": "temporal", "timeUnit": "yearmonth", "title": "Date", "format": "%Y-%m"},
{"field": "value", "title": "Number of admissions", "type": "quantitative"}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
]
}
]
}
});
vegaEmbed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": i94data
},
"transform": [
{"filter": "datum.category !== 'travelers' && datum.category !== 'unknown' "} // Exclude 'travelers' category
],
"facet": {
"field": "category", // Facet by category
"type": "nominal",
"columns": 3 // Adjust the number of columns as needed
},
"spec": {
"width": 300,
"height": 100,
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"axis": {
"labelAngle": 0,
"format": "%Y",
"tickValues": [
"2013-01-01", "2014-01-01", "2015-01-01",
"2016-01-01", "2017-01-01", "2018-01-01",
"2019-01-01", "2020-01-01", "2021-01-01",
"2022-01-01"
],
"grid": false // Set grid to false to remove grid lines
}
},
"y": {
"field": "value",
"type": "quantitative",
"axis" : {"grid": false}
},
"color": {
"field": "category",
"type": "nominal",
"scale": { // Define a color scale with specific colors for each category
"domain": ["diplomats", "students", "workers", "other", "unknown"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd"]
}
}
},
"layer": [
{
"mark": "area"
},
{
"mark": {
"type": "point",
"filled": true,
"color": "black" // This will set the points to black, adjust as needed
},
"encoding": {
"opacity": {"value": 1} // Always show the points
}
},
{
"mark": "rule",
"encoding": {
"x": {
"condition": {
"param": "hover", "field": "date", "type": "temporal"
}
},
"color": {"value": "black"}, // Color of the dashed line
"size": {"value": 1} // Width of the dashed line
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"empty": "none",
"clear": "mouseout"
}
}
]
}
]
}
}
)
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.
