Data Scientist
Published
Edited
May 15, 2022
{
// This defines the viewport i.e. imagine th window in a house that you can look out of.
// you can see only as much as the view port lets you see, it defines the background on which you will draw stuff, if you change the dimensions of the window, you'll be able to see more or less of the world outside the house.
//So even if the items exist in the world outside the house (think graphics), if you dont use the viewport correctly, you wont be able to see anything.
//the background grey is used to identify the limits of the view port
const svg = d3
.create("svg")
.attr("width", 800)
.attr("height", 600)
.attr("viewBox", [0, 0, 800, 600])
.attr("class", "svg-bg");
//BLUE CIRCLE SHOWS DEFAULT ORIGIN
//The default origin (0,0) of the viewport is the top left (opposite of what we normally visualize as origin)
svg
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 35)
.attr("fill", "blue");
//GREEN CIRCLE SHOWS TRANSLATED ORIGIN
//To make it what we're more used to for visualizations, we transform (move) the origin to the bottom left
svg
.append("circle")
.attr("transform", `translate(${size.width / 2}, ${size.height / 2})`)
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 35)
.attr("fill", "red");
return svg.node();
}
md `### Defining CSS styles`
html`<style>
.svg-bg {
background-color : grey;
opacity : 0.4
}
</style>
`
margin = ({top: 10, right: 20, bottom: 10, left: 25})
size = ({width: Math.min(window.innerWidth, 1000), height: 500})//size of the svg
md `### Importing modules`
scale = import('d3-scale');
axis = import('d3-axis');
select = import('d3-selection');
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.
