Plot.plot({
height: 630,
marks: [
Plot.text(['Superbowl Ad\ndistribution'], {x: 150, y:130, fill: "gray", fontSize: 40, opacity: .3, textAnchor: "end"}),
Plot.text(superbowl_edited, {x: 150, y:90, text: d=>d.yearchar, filter: d=> d.year === selectyear, fill: "gray", fontSize: 70, opacity: .1, textAnchor: "end"}),
Plot.dot([[0,0]], {r: 194, fill: "forestgreen", opacity: 0.05}),
Plot.dot([[0,0]], {r: 98, stroke: "forestgreen", opacity: 0.2}),
Plot.dot([[0,0]], {r: 194, opacity: 1, stroke: "forestgreen", opacity: 0.2}),
Plot.text(['50%'], {x: -44, y:-40, fill: "forestgreen", fontSize: 15, opacity: 0.5}),
Plot.text(['100%'], {x: -80, y:-80, fill: "forestgreen", fontSize: 15, opacity: 0.5}),
Plot.text(['Celebrity'], {x: 0, y:110, fill: "maroon", fontSize: 20, opacity: 1}),
Plot.text(['Animals'], {x: 0, y:-110, fill: "maroon", fontSize: 20, opacity: 1}),
Plot.text(['Funny'], {x: 105, y:0, fill: "maroon", fontSize: 20, opacity: 1, textAnchor: "start"}),
Plot.text(['Patriotic'], {x: -105, y:0, fill: "maroon", fontSize: 20, opacity: 1, textAnchor: "end"}), l
Plot.dot([[-150,0]], {r: 0}),
Plot.dot([[150,0]], {r: 0}),
Plot.dot([[0,150]], {r: 0}),
Plot.dot([[0,-150]], {r: 0}),
Plot.link(superbowl_coords_edited,{x1: 0, x2: 0, y1:-100, y2: 100, stroke: "gray", opacity: 0.2, strokeWidth: .1}),
Plot.link(superbowl_coords_edited,{x1: -100, x2: 100, y1:0, y2: 0, stroke: "gray", opacity: 0.2, strokeWidth: .1}),
Plot.dot(superbowl_edited, {x: "xval", y:"yval", r:1, filter: d=> d.year === selectyear}),
Plot.link(superbowl_coords_edited, {x1: "x1", x2: "x2", y1:"y1", y2: "y2", stroke: "maroon", opacity: 0.4, strokeWidth: 2, filter: d => d.year === selectyear}),
Plot.text(superbowl_edited, {x: "xval", y:"yval", text: "value_perc", filter: d=> d.year === selectyear, dx: 30, dy: -20, fill: "maroon", fontSize: 20}),
Plot.axisY({ tickSize: 0, fontSize: 0 }),
Plot.axisX({ tickSize: 0, fontSize: 0 }),
]
})
Plot.plot({
x: {
label: "↑ Total count",
grid: true,
transform: d => d
},
marks: [
Plot.axisY({label: null, lineWidth: 8, marginLeft: 150, tickSize: 0, fontSize: 20}),
Plot.barX(observable_func, Plot.groupY({x: "sum"}, {y: "function", x: "count", sort: {y: "x", reverse: true}, fill: "#008080", filter: d => d.function != "plot.text" & d.function != "plot.axis" })),
Plot.textX(observable_func, Plot.groupY({text: "sum"}, {y: "function", x: "count", sort: {y: "x", reverse: true}})),
Plot.textX(['Observable Plot\nfunctions I used\nwhile participating in\n#30DayChartChallenge\n(thus far!!!)'], {x: 45, fontSize: 50, fill: "#008080", opacity: 0.4, textAnchor: "end", lineHeight: 1.3}),
Plot.ruleX([0])
],
width: 1000, height: 600
})
Plot.plot({
marginTop: 100,
marginLeft: 190,
marginBottom: 50,
width: 800,
height: 470,
marks: [
Plot.barX(bbc_pricechanges, {x: "change", y: "Product", sort: {y: "x", reverse: true}, fill: "Sign"}),
Plot.text(bbc_pricechanges, {x: "labelpos", y: "Product", fill: "white", text: "changetext", textAnchor: "end", dx: -10, fontSize: 19, filter: d=> d.change > 4, fontWeight: "normal"}),
Plot.text(bbc_pricechanges, {x: "labelpos", y: "Product", fill: "black", text: "changetext", textAnchor: "end", dx: 10, fontSize: 19, filter: d=> d.change === 3.2, fontWeight: "bold"}),
Plot.text(bbc_pricechanges, {x: "labelpos", y: "Product", fill: "black", text: "changetext", textAnchor: "end", dx: 5, fontSize: 19, filter: d=> d.change < 3, fontWeight: "bold"}),
Plot.text(bbc_pricechanges, {x: "change", y: "Product", fill: "black", text: "title", textAnchor: "start", fontSize: 30, fontWeight: "bold", fontFamily: "Menlo",dx: -560, dy: -94, fontStretch: "expanded", opacity: 0.9}),
Plot.text(bbc_pricechanges, {x: "change", y: "Product", fill: "black", text: "subtitle", textAnchor: "start", fontSize: 23, fontWeight: "normal",dx: -560, dy: -50}),
Plot.text(bbc_pricechanges, {x: "change", y: "Product", fill: "black", text: "source", textAnchor: "start", fontSize: 16, fontWeight: "normal",dx: -175, dy: 33
}),
Plot.link(bbc_pricechanges,{x1: -10, x2: 100, y: "Product", stroke: "black", filter: d=>d.Product === 'Fruit juice orange', dx: -170, dy: 20, opacity: 0.6}),
Plot.image(bbc_pricechanges,{x: 60, y: "Product", width: 60, src: "imageurl", filter: d=>d.Product === 'Fruit juice orange', dy: 33
}),
Plot.ruleX([0]),
Plot.axisY({ tickSize: 0, fontSize: 20, label: "" }),
Plot.axisX({ tickSize: 0, fontSize: 0 }),
],
color: {
type: "categorical",
range: ["rgba(146,18,13,255)", "rgba(38,127,159,255)"],
domain: ["Positive", "Negative"],
legend: false,
style: {
fontSize: "20px",
}
}
})
Plot.plot({
style: "overflow: visible;",
insetLeft: -550,
r: {range: [-200,300]},
marks: [
Plot.barX([300], {fill: "black"}),
Plot.dot(dogfacts_100, {x: "xval", y: "yval", z:"perc", r:"perc", fill: "perc", opacity: 0.8}),
Plot.text(dogfacts_100, {x: 100, y: "yvaltext", text: "percchar", fontSize: 20, fill: "#DEDEDE", textAnchor: "start"}),
Plot.text(dogfacts_100, {x: 157, y: "yvaltext", text: "fact", fontSize: 16.5, fill: "#DEDEDE", textAnchor: "start"}),
Plot.text([''],{x: 100, y: 0, fontSize: 20, fill: "black", textAnchor: "start"}),
Plot.text([''],{x: 100, y: 300, fontSize: 20, fill: "black", textAnchor: "start"}),
Plot.image(dogfacts_100, {x: 250, y: 67, height: 290, src: "https://th.bing.com/th/id/OIP.Uu76Tpyqk8ZVjccZeJ-_UAHaLG?w=115&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7"}),
Plot.text(['fun\ndog\nstats'],{x: 297, y: 60, fontSize: 80, fill: "#008080", textAnchor: "end", opacity: .5}),
Plot.axisY({ tickSize: 0, fontSize: 0}),
Plot.axisX({ tickSize: 0, fontSize: 0}),
Plot.ruleY(dogfacts_100, {x1: "xvalmin", x2: 155, y: "yvaltext", stroke: "white", opacity: 0.5}),
Plot.dot(dogfacts_100, {x: 155.7, y: "yvaltext",r:4, fill: "white", opacity: 0.4}),
],
color: {
type: "categorical",
range: ["#253237", "#3a7ca5", "slate", "#008080", "darkblue"],
},
height: 700,
width: 1200
})
addTooltips(Plot.plot({
insetLeft: 100,
insetRight: 100,
color: {legend: true, type: "categorical", scheme: "tableau10", style: {fontSize: "16px"}},
width: 960,
height: 600,
projection: "albers",
marks: [
Plot.image(amtrak_locations,{x:-115, y: 26, dx: 0, width: 300, opacity: .003, src: "https://blog.amtrak.com/wp-content/uploads/2013/10/amtrak-011-e1437095759125.jpg"}),
Plot.text(['Amtrak station network in the United States'],{x:-68, y: 49, dx: -190, fontSize: 30, fill: "black", stroke: "gray", opacity: 0.8, lineHeight: 1.2, fontStyle: "italic", fontWeight: "Bold"}),
Plot.geo(nation, {fill: "gray", opacity: 0.15}),
Plot.voronoi(amtrak_locations, {x: "Longitude", y: "Latitude", fill: "Division", opacity: 0.3, stroke: "gray", title: d=>d.statename + "\n" + d.Division}),
Plot.dot(amtrak_locations, {x: "Longitude", y: "Latitude", r: 1, fill: "Division", r: 2, title: d=>d.statename + "\n" + d.Division}),
Plot.geo(nation, {stroke: "black"}),
], width: 1000
}), {fill: "yellow", stroke: "black", "stroke-width": 6}
)
Plot.plot({
insetTop: 0,
color: {legend:true,
display: "inline-block",
width: 1350,
height: 70,
ticks: 4,
display: "inline",
range: ["gray", "#008080"],
label: "", style: {fontSize: 30}},
insetRight: 200,
height: 180,
marks: [
Plot.barY([60], {fill: "black", opacity:0.3}),
Plot.barY([50], {fill: "black", opacity:0.5}),
Plot.barY([40], {fill: "black", opacity:0.7}),
Plot.dot(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "Expenditure", title: d=>d.Expenditure+"%\n"+d.Area})),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "black", fontSize: 14, text: d=>d.Expenditure+"%", filter: d=> d.Expenditure>1 })),
Plot.dot(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "Expenditure", title: d=>d.Expenditure+"%\n"+d.Area, filter: d=>d.Expenditure>6})),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", fontSize: 12, text: d=>d.Expenditure+"%\n"+d.Area, filter: d=> d.Expenditure>6})),
Plot.dot(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "Expenditure", title: d=>d.Expenditure+"%\n"+d.Area, filter: d=>d.Expenditure>15})),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", fontSize: 20, text: d=>d.Expenditure+"%\n"+d.Area, filter: d=> d.Expenditure>15 })),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", fontSize: 20, text: d=>d.Expenditure+"%\n"+d.Area, filter: d=> d.Expenditure>15 })),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", text: d=>"Eurostat", filter: d=> d.Expenditure>30, dx: 190, fontSize: 120, opacity: 1, textAnchor: "start", dy: -20})),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", text: d=>"The statistical office of the European Union", filter: d=> d.Expenditure>30, dx: 200, fontSize: 40, opacity: 0.6, textAnchor: "start", dy: 70})),
Plot.text(euro_gov_stats, Plot.dodgeX({y: "Expenditure", r: "Expenditure", fill: "white", text: d=>"Government expenditure by function as a percentage of\ntotal expenditure.", filter: d=> d.Expenditure>30, dx: 200,dy: 130, fontSize: 30, opacity: 0.6, textAnchor: "start", fontStyle: "oblique"})),
Plot.axisY({ tickSize: 0, fontSize: 0 }),
],
r: {range: [.3,90]},
height: 750,
width: 1200
})
us = FileAttachment("us-counties-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
import {addTooltips} from "@mkfreeman/plot-tooltip"
amtrack_locations@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
euro_gov_stats.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
dogfacts_100_align.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bbc_pricechanges.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
observable_func@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
superbowl_edited.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
superbowl
superbown_coords.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
superbowl_coords
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.
