chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + 100, height]);
svg.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height + margin.bottom - 10)
.text("X Axis Label");
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -margin.left + 10)
.text("Y Axis Label");
const movies = svg
.append("g")
.selectAll("circle")
.data(movieData, (d) => d.index)
.join("circle")
.attr("cx", d => x(d.release_year))
.attr("cy", d => y(d.imdb_score))
.attr("r", 4)
.style("fill", d => color(d.age_certification));
// if (!color.domain().includes(d.age_certification)) {
// return color("unknown");
// }
// return color(d.age_certification);
// });
svg.append('g').call(xAxis);
svg.append('g').call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width / 2)
.attr("y", height)
.text("Release Year");
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("x", - height / 3)
.attr("dy", ".3em")
.attr("transform", "rotate(-90)")
.text("IMDB Rating");
movies
.append("title")
.text(d => `Title: ${d.title}
Genre(s): ${d.genres.replaceAll("'", "")}
Age Rating: ${d.age_certification}
IMDB Rating: ${d.imdb_score}
Runtime: ${d.runtime} minutes
Year Released: ${d.release_year}`);
movies
.on('mouseover', function() {
d3.select(this).attr('stroke', '#000').attr('stroke-width', 1.5);
})
.on('mouseout', function() {
d3.select(this).attr('stroke', null);
});
svg
.append("g")
.attr("transform", `translate(${width - 25}, 10)`)
.call((d) => colorLegend(d))
return svg.node()
}
data = FileAttachment("titles.csv").csv({typed: true})
movieData = data.filter(d => d.type === "MOVIE" && d.imdb_score !== undefined && d.imdb_score !== null)
height = 400
x = d3.scaleLinear()
.domain(d3.extent(movieData, d => d.release_year)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(movieData, d => d.imdb_score)).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(d3.format(".0f")))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 25, right: 20, bottom: 35, left: 40})
color = d3.scaleOrdinal()
.domain(["TV-MA", "R", "TV-14", "PG-13", "PG", "G", "unknown"])
//.domain(movieData.map(d => d.age_certification))
//.range(["#D81B60", "#1E88E5", "#FFC107", "#004D40", "#392759", "#DA47E5","00ff00"]);
.range(d3.schemeTableau10)
color("R")
ratings = [
{ index: 0, label: "TV-MA"},
{ index: 1, label: "R" },
{ index: 2, label: "TV-14" },
{ index: 3, label: "PG-13" },
{ index: 4, label: "PG" },
{ index: 5, label: "G"},
{ index: 6, label: "unknown" }
];
{
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 200);
const legend = svg.append('g')
.attr('transform', 'translate(0, 10)')
.call(colorLegend);
return svg.node();
}
function colorLegend(container) {
const titlePadding = 14; // padding between title and entries
const entrySpacing = 20; // spacing between legend entries
const entryRadius = 5; // radius of legend entry marks
const labelOffset = 4; // additional horizontal offset of text labels
const baselineOffset = 4; // text baseline offset, depends on radius and font size
const title = container
.append("text")
.text("Age Rating")
.attr("x", 0)
.attr("y", 0)
.attr("fill", "black")
.attr("font-family", "Arial")
.attr("font-weight", "bold")
.attr("font-size", "12px")
const entries = container
.selectAll("g")
.data(ratings)
.join("g")
.attr("transform", (d) => `translate(0, ${titlePadding + d.index* entrySpacing})`)
const symbols = entries
.append("circle")
.attr("cx", entryRadius)
.attr("r", entryRadius)
.style("fill", d => color(d.index));
//.style("fill", d => color(d.age_certification));
const labels = entries
.append("text")
.text((d) => d.label)
.attr("x", 2 * entryRadius + labelOffset)
.attr("y", baselineOffset)
.attr("fill", "black")
.attr("font-family", "Arial")
.attr("font-size", "11px")
}
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.
