Exploring Data with Vega-Lite Adapted from https://vega.github.io/vega-lite/tutorials/explore.html.
data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
vegalite({ data: {values: data}, mark: "tick", encoding: { x: {field: "precipitation", type: "quantitative"} } })
vegalite({ data: {values: data}, mark: "bar", encoding: { x: {bin: true, field: "precipitation", type: "quantitative"}, y: {aggregate: "count", field: "*", type: "quantitative"} } })
vegalite({ data: {values: data}, mark: "line", encoding: { x: {timeUnit: "month", field: "date", type: "temporal"}, y: {aggregate: "mean", field: "precipitation", type: "quantitative"} } })
vegalite({ data: {values: data}, transform: [{calculate: "datum.temp_max - datum.temp_min", as: "temp_range"}], mark: "line", encoding: { x: {timeUnit: "month", field: "date", type: "temporal"}, y: {aggregate: "mean", field: "temp_range", type: "quantitative"} } })
vegalite({ data: {values: data}, mark: "bar", encoding: { x: {timeUnit: "month", field: "date", type: "ordinal"}, y: {aggregate: "count", field: "*", type: "quantitative"}, color: {field: "weather", type: "nominal"} } })
vegalite({ data: {values: data}, mark: "bar", encoding: { x: { timeUnit: "month", field: "date", type: "ordinal", axis: { title: "Month" } }, y: { aggregate: "count", field: "*", type: "quantitative", axis: { title: "Number of Days" } }, color: { field: "weather", type: "nominal", scale: { domain: ["sun", "fog", "drizzle", "rain", "snow"], range: ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"] }, legend: { title: "Weather" } } } })
vegalite = require("@observablehq/vega-lite@0.1")
d3 = require("d3-fetch@1")