Published
Edited
Jun 1, 2021
bar_plot().node()
bar_plot = () => {
// plot
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// plot.margin
const plot_margin = { t: 90, r: 30, b: 40, l: 30 };
// plot.background
const plot_background = svg
.append("g")
.classed("plot", true)
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "skyblue")
.attr("stroke", "black")
.attr("stroke-width", 5)
.attr("fill-opacity", 0.3);
// plot.title
const plot_title = svg
.append("text")
.classed("plot-title", true)
.attr("x", width / 2)
.attr("y", (plot_margin.t * 1) / 3)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-size", 24)
.attr("font-weight", 900)
.text("🎮 Mario Kart 64 World Records 🎮");
//plot.subtitle
const plot_subtitle = svg
.append("text")
.classed("plot-title", true)
.attr("x", width / 2)
.attr("y", (plot_margin.t * 2) / 3)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("font-size", 16)
.text(
"Fastest times for three-lap completions without shortcuts on the PAL console"
);
// plot panel
const plot_panel = svg
.append("g")
.classed("panel", true)
.attr("transform", `translate(${plot_margin.l}, ${plot_margin.t})`);
// panel.background
const panel_background = plot_panel
.append("rect")
.attr("width", width - plot_margin.l - plot_margin.r)
.attr("height", height - plot_margin.t - plot_margin.b)
.attr("fill", "#FFFFAA50")
.attr("stroke", "black")
.attr("stroke-width", 0.1);
// scale_continuous (x)
const scale_x = d3
.scaleLinear()
.domain([0, d3.max(plot_dt.map((d) => d.time))])
.range([plot_margin.l, width - plot_margin.r])
.nice();
// guide_axis (x)
const guide_x = (g) =>
g.attr("transform", `translate(0, ${height - plot_margin.b})`).call(
d3
.axisBottom(scale_x)
.ticks(width / 80)
.tickSizeOuter(0)
);
// axis.*.x
const axis_x = svg
.append("g")
.classed("x-axis", true)
.call(guide_x)
// axis.ticks.x
.call((g) => g.selectAll(".tick text").attr("y", 12).attr("font-size", 14))
// axis.title.x
.call((g) =>
g
.select(".tick:last-of-type")
.append("text")
.classed("x-axis-title", "true")
.attr("fill", "black")
.attr("font-size", 14)
.attr("font-variant", "small-caps")
.attr("text-anchor", "end")
.attr("x", -5)
.attr("y", -7)
.text("seconds")
);
// scale_discrete (y)
const scale_y = d3
.scaleBand()
.domain(plot_dt.map((d) => d.track))
.range([plot_margin.t, height - plot_margin.b])
.padding(0.1);
// guide_axis (y)
const guide_y = (g) =>
g
.attr("transform", `translate(${plot_margin.l}, 0)`)
.call(d3.axisLeft(scale_y));
// axis.*.y
const axis_y = svg
.append("g")
.classed("y-axis", true)
.call(guide_y)
.call((g) => g.selectAll(".tick").remove());
// bars
const geom_bar = svg
.append("g")
.classed("geom-bar", true)
.selectAll("rect")
.data(plot_dt)
.join("rect")
.attr("x", plot_margin.l)
.attr("y", (d) => scale_y(d.track))
.attr("height", scale_y.bandwidth())
.attr("width", (d) => scale_x(d.time) - plot_margin.l)
.attr("fill", "steelblue");
// track names
const geom_text_tracks = svg
.append("g")
.classed("geom-text-tracks", true)
.selectAll("text")
.data(plot_dt)
.join("text")
.attr("x", plot_margin.l + 10)
.attr("y", (d) => scale_y(d.track) + scale_y.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("paint-order", "stroke")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("fill", "white")
.text((d) => d.track);
// record info (time, date)
const geom_text_times = svg
.append("g")
.classed("geom-text-times", true)
.selectAll("g.times")
.data(plot_dt)
.join("g")
.classed("times", true)
.attr(
"transform",
(d) => `translate(${scale_x(d.time) + 40}, ${scale_y(d.track)})`
)
.attr("text-anchor", "middle")
// text for time
.call((g) =>
g
.append("text")
.classed("time", true)
.attr("dy", "1em")
.call((t) => t.append("tspan").text((d) => d3.format(".2f")(d.time)))
.call((t) =>
t.append("tspan").attr("font-size", 14).attr("dx", 2).text("s")
)
)
// text for year
.call((g) =>
g
.append("text")
.classed("year", true)
.attr("y", 35)
.attr("font-size", 11)
.text((d) => d3.timeFormat("%m-%d-%Y")(d.date))
);
// kart image
const kart_img = svg
.append("image")
.classed("kart", true)
.attr(
"href",
"https://purepng.com/public/uploads/large/purepng.com-super-mario-on-kartmariofictional-charactervideo-gamefranchisenintendodesigner-1701528624012jeraz.png"
)
.attr("x", 450)
.attr("y", 300)
.attr("width", 400);
return svg;
}
dt = records
.filter(
(d) =>
(d.shortcut == "No") &
(d.system_played == "PAL") &
(d.type == "Three Lap")
)
.groupby("track")
.filter((d) => d.time == op.min(d.time))
.ungroup()
.select("track", "player", "time", "date")
.join(drivers.select("player", "nation").dedupe(), "player")
.orderby(aq.desc("time"))
bar_plot()
.call((svg) =>
svg
.append("defs")
.append("linearGradient")
.attr("id", "rainbow-gradient")
.attr("x2", "0%")
.attr("y2", "100%")
.selectAll("stop")
.data([...d3.range(0, 1, 0.2), 1])
.join("stop")
.attr("offset", (d) => d * 100 + "%")
.attr("stop-color", (d) => d3.interpolateTurbo(1 - d))
)
.call((svg) =>
svg
.select(".geom-bar rect:first-of-type")
.attr("fill", "url(#rainbow-gradient)")
)
.call((svg) =>
svg
.select(".geom-text-tracks text:first-of-type")
.attr("fill", "black")
.attr("stroke", "white")
.attr("font-weight", 900)
.attr("stroke-width", 3)
)
.node()
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.
