Published
Edited
May 26, 2020
movies
/*
title: ordinal
release_date: ordinal
runtime: quantitative
budget: quantitative
revenue: quantitative
original_language: categorical
rating: quantitative
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]);
//calculate a new width and height to see the values in the given rectangle
var width_new = width - margin.left - margin.right - (2*radius);
var height_new = height - margin.top - margin.bottom - (2*radius);
function mapX(value) {
//set a new scale for the values
value = (value-domainX[0])/(domainX[1]-domainX[0]);
value = width_new * value;
//add left margin and radius to have the circle in the rectangle
value = value + margin.left + radius;
return value;
}
function mapY(value) {
//new scale
value = (value-domainY[0])/(domainY[1]-domainY[0]);
value = height_new * value;
//turn the graph around
var height_start = height - radius - margin.bottom;
value = height_start - value;
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 => {
//draw item in different color if not english
if (item.original_language != "en") {
context.fillStyle = "#0B243B";
} else {context.fillStyle = "#0174DF";}
context.beginPath();
context.arc(
mapX(item[attributeX]),
mapY(item[attributeY]),
//size in relation to the rating of the movie
//radius is 5, highest rating is 10, therefore divide by 2
item.rating/2,
0,
2 * Math.PI
);
//change opacity to minimize overdraw
context.globalAlpha = 0.4;
context.fill();
});
}
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
//x-axis
.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "orange")
.attr("text-anchor", "end")
.text(attributeX)
);
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g =>
g
//y-axis
.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "pink")
.attr("text-anchor", "start")
.text(attributeY)
);
//box
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", "lightyellow")
.attr("opacity", 0.5);
//TODO: draw the circles for the data items
//https://www.oreilly.com/content/making-a-scatterplot-with-d3-js/
svg
//select all circles
.selectAll("circle")
.data(movies)
//go through all elements
.enter ()
//draw circles
.append("circle")
//go through array, scale the value of x or y with x() or y() and return value
.attr ("cx", function (movie)
{
var value_x = movie [attributeX];
value_x = x(value_x);
return value_x;
})
.attr ("cy", function (movie)
{
var value_y = movie [attributeY];
value_y = y(value_y);
return value_y;
})
//the radius is the set radius
.attr ("r" , radius)
//color of circles
.attr ("fill" , "blue")
//opacity of circles
.attr ("opacity", 0.5);
return svg.node();
}
height = 600
margin = ({ top: 25, right: 20, bottom: 35, left: 80 })
radius = 5
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.
