Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
facet: {
data: occ_ai_parsed,
y: "group",
marginLeft: 250
},
marks: [
Plot.frame({stroke: "#aaa", strokeWidth: 0.5}),
Plot.dot(occ_ai_parsed, {x: `dv_rating${selected_attr[_selected]}`, y: "a_median", r: 3, fill:'steelblue', fillOpacity: 0.8}),
Plot.dot(occ_ai_parsed, {x: `human_rating${selected_attr[_selected]}`, y: "a_median", r: 3, fill:'darkorange', fillOpacity: 0.8}),
Plot.ruleX(
occ_ai_parsed, // object must === the facet data
Plot.groupZ(
{ x: "median" }, // the reducer you want to apply
{ x: `dv_rating${selected_attr[_selected]}`, stroke: 'steelblue', strokeDasharray: [3, 2] } // the dimension you want to apply the reducer to
)
),
Plot.ruleX(
occ_ai_parsed, // object must === the facet data
Plot.groupZ(
{ x: "median" }, // the reducer you want to apply
{ x: `human_rating${selected_attr[_selected]}`, stroke: 'darkorange', strokeDasharray: [3, 2] } // the dimension you want to apply the reducer to
)
),
// Plot.ruleX(
// occ_ai_parsed, // object must === the facet data
// { x: 0 }
// ),
// Plot.ruleX([d3.mean(sheet_data_parsed, d=>d.LME)] , {stroke: "orange"}),
// Plot.line(
// sheet_data_parsed,
// Plot.regression({
// x: "LME",
// y: "MedianSalary",
// strokeDasharray: [1.5, 4],
// strokeWidth: 1.5,
// stroke: 'steelblue',
// })
// ),
// Plot.line(
// sheet_data_parsed,
// Plot.regression({
// x: "IGE",
// y: "MedianSalary",
// strokeDasharray: [1.5, 4],
// strokeWidth: 1.5,
// stroke: 'darkorange',
// })
// ),
],
width: 1000,
height: 2000,
marginTop: 0,
marginLeft: 200,
x: {inset: 10, grid: true, label: "Human rating"},
y: {axis: null, inset: 2, label: "median salary"},
color: {
domain: ["ChatGPT-4", "Human"],
range: ["steelblue", "darkorange"],
legend: true
},
style: {fontSize: "12px"},
})
Plot.plot((() => {
const n = 3; // number of facet columns
const keys = Array.from(d3.union(occ_group.map((d) => d.occ_title)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
height: 1750,
axis: null,
y: {insetTop: 20},
fx: {padding: 0.1},
marks: [
// Plot.areaY(industries, Plot.normalizeY("extent", {
// x: "date",
// y: "unemployed",
// fx: (d) => fx(d.industry),
// fy: (d) => fy(d.industry)
// })),
// Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: 6, dy: 6}),
Plot.dot(occ_ai_parsed, {x: `human_rating${selected_attr[_selected]}`, y: `dv_rating${selected_attr[_selected]}`, r: 3, fill:'steelblue', fillOpacity: 0.8, fx: (d) => fx(d.group), fy: (d) => fy(d.group)}),
Plot.line(
occ_ai_parsed,
Plot.regression({
x: `human_rating${selected_attr[_selected]}`,
y: `dv_rating${selected_attr[_selected]}`,
strokeDasharray: [1.5, 4],
strokeWidth: 2,
stroke: 'black',
fx: (d) => fx(d.group),
fy: (d) => fy(d.group)
})
),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: 6, dy: 6}),
Plot.frame()
]
};
})())
Array.from(d3.union(occ_group.map((d) => d.code)));
data = FileAttachment("penguins.csv").csv({typed: true})
height = 600
x = d3.scaleLinear()
.domain([0, 1]).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, 1]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 25, right: 20, bottom: 35, left: 40})
getTitleById = new Map(occ_group.map((obj) => [+obj.code, obj['occ_title']]));
occ_ai = sheet_data_fn('https://docs.google.com/spreadsheets/d/e/2PACX-1vQgLZPeI1bl65GZvgbear6_UsMTgzCpmF4T7l9yCYk1SW-qPiAZB4v3B88YrRyCPGcIbH3OQ5y2gOKV/pub?gid=1474030675&single=true&output=tsv')
import {select, color} from "@jashkenas/inputs"
Plot = addRegression(await require("@observablehq/plot@0.6"))
reg = require("d3-regression@1")
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.
