movies
md`title: categorical\n
release_date: ordinal\n
runtime: quantitative\n
budget: quantitative\n
revenue: quantitative\n
original_language: categorical\n
rating: ordinal\n
num_votes: quantitative`
table(movies, { title: "Movies from IMDb" })
scatterplotCanvas = {
const context = DOM.context2d(width, height);
let domainX = d3.extent(movies, d => d[attributeX]);
let domainY = d3.extent(movies, d => d[attributeY]);
function mapX(value) {
// TODO
// value = value * range / domain
value = value *((width - margin.left - margin.right)/(domainX[1]-domainX[0]));
value += margin.left;
return value;
}
function mapY(value) {
// TODO
// value = value * range / domain
value = value * ((margin.top - height + margin.bottom)/(domainY[1]-domainY[0]));
value += height - margin.bottom;
return value;
}
function draw() {
context.clearRect(0, 0, width, height);
context.fillStyle = backgroundColor;
context.fillRect(
margin.left,
margin.top,
width - margin.left - margin.right,
height - margin.top - margin.bottom
);
movies.forEach(item => {
context.beginPath();
context.arc(
mapX(item[attributeX]),
mapY(item[attributeY]),
// the value of radius is multiplied with the value of rating to encode rating
radius * item["rating"],
0,
2 * Math.PI
);
// check the language and change the fill style based on that
if (item["original_language"]=="en") {
context.fillStyle = "#0EABBF";
}
else {
context.fillStyle = "#C410A1";
}
context.fill();
// added stroke to make the points stand out more to mitigate the overdraw issue
context.stroke()
});
}
draw();
return context.canvas;
}
x = d3
.scaleLinear()
.domain(d3.extent(movies, d => d[attributeX]))
.nice()
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(movies, d => d[attributeY]))
.nice()
.range([height - margin.bottom, margin.top])
x(100000)
scatterplotSVG = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 160))
.call(g =>
g
.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(attributeX)
);
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g =>
g
.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(attributeY)
);
svg
.append("rect")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom)
.attr("fill", backgroundColor)
.attr("class", movies);
// TODO: draw the circles for the data items
svg.selectAll("dot")
.data(movies)
.enter().append("circle")
.attr("cx",function(d) { return x(d[attributeX]); })
.attr("cy",function(d) { return y(d[attributeY]); })
.attr("r",function(d) { return d["rating"]*0.7;})
.attr("fill", function(d) {return (d["original_language"]=="en") ? "#0EABBF" : "#C410A1";})
.attr("stroke","black");
return svg.node();
}
height = 600
margin = ({ top: 25, right: 20, bottom: 35, left: 80 })
radius = 0.7
attributes = ["runtime", "budget", "revenue", "rating", "num_votes"]
movies = d3.csvParse(await FileAttachment("movies@3.csv").text(), d3.autoType)
import { table } from "@tmcw/tables/2"
function code(s) {
return html`<code style="white-space: nowrap;">${s}</code>`;
}
backgroundColor = "#ECEFF1"
import { select } from "@jashkenas/inputs"
d3 = require("d3@5")
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.
