Published
Edited
May 25, 2020
Insert cell
Insert cell
Insert cell
movies
Insert cell
Insert cell
Insert cell
table(movies, { title: "Movies from IMDb" })
Insert cell
Insert cell
scatterplotCanvas = {
const context = DOM.context2d(width, height);

let domainX = d3.extent(movies, d => d[attributeX]); //domainX = [min_x, max_x]
let domainY = d3.extent(movies, d => d[attributeY]); //domainY = [min_y, max_y]
// manipulate data, so that every bubble is inside the grey rectangle
let margin_weight_20 = 20;
let margin_weight_10 = 10;
let offsetX = width - margin.left - margin.right /* - margin_weight_20 */;
let offsetY = height - margin.top - margin.bottom /* - margin_weight_20 */;
//task 1
function mapX(value) {
//linear scaling formula for a specific scope
let scaled_x = margin.left /* + margin_weight_10 */ + (offsetX * (value - domainX[0])/ (domainX[1] - domainX[0]));
// Range test
//if(scaled_x + radius > domainX[1]){scaled_x = domainX[1] - radius;}
//if(scaled_x + radius< domainX[0]){scaled_x = domainX[0] - radius;}

return scaled_x;
}

function mapY(value) {
let scaled_y = height - margin.bottom /* - margin_weight_10 */ - (offsetY * (value - domainY[0]) / (domainY[1] - domainY[0]));
//if(scaled_y + radius > domainY[1]){scaled_y = domainY[1] - radius;}
//if(scaled_y + radius < domainY[0]){scaled_y = domainY[0] - radius;}
return scaled_y;
}
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]),
//task3
mapSize(radius, item["rating"]),
0,
2 * Math.PI
);
//task4
context.fillStyle = highlightOtherLanguagesThanEnglish(item["original_language"]);
context.fill();
//task2
context.lineWidth = 1;
context.strokeStyle = blueColor;
context.stroke();
});
}

draw();
return context.canvas;
}
Insert cell
function highlightOtherLanguagesThanEnglish(value){
if (value == "en"){
return whiteColor;
}else{
return redColor;
}
}
Insert cell
function mapSize(radius, value){
// size defined by a third attribute (bubbleplot) depending on modifiable radius
return radius * 0.25 * value ;
}
Insert cell
Insert cell
x = d3
.scaleLinear()
.domain(d3.extent(movies, d => d[attributeX]))
.nice()
.range([margin.left, width - margin.right])
Insert cell
y = d3
.scaleLinear()
.domain(d3.extent(movies, d => d[attributeY]))
.nice()
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
x(100000)
Insert cell
Insert cell
scatterplotSVG = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //svg container

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);
// source: https://www.dashingd3js.com/svg-basic-shapes-and-d3js
svg
.selectAll("circle")
.data(movies)
.enter() // join of data to elements and creating one circle element for every data element
.append("circle")
.attr("stroke", blueColor)
.attr("stroke-width", 1)
.attr("fill", d => highlightOtherLanguagesThanEnglish(d["original_language"]))
.attr("cx", d => x(d[attributeX])) //scaling x value of the center
.attr("cy", d => y(d[attributeY])) //scaling y value of the center
.attr("r", d => mapSize(radius, d["rating"]))
return svg.node();
}
Insert cell
Insert cell
height = 700
Insert cell
margin = ({ top: 25, right: 20, bottom: 35, left: 80 })
Insert cell
radius = 3
Insert cell
Insert cell
Insert cell
Insert cell
attributes = ["runtime", "budget", "revenue", "rating", "num_votes"]
Insert cell
movies = d3.csvParse(await FileAttachment("movies@3.csv").text(), d3.autoType)
Insert cell
import { table } from "@tmcw/tables/2"
Insert cell
function code(s) {
return html`<code style="white-space: nowrap;">${s}</code>`;
}
Insert cell
backgroundColor = "#ECEFF1"
Insert cell
redColor = "#EE5716";
Insert cell
blueColor = "#4169E1"
Insert cell
whiteColor = "#F6F3F3";
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more