Crafting Visual Stories with Data.
Public
Edited
Jan 30
card = FileAttachment("card.png").image()
<style>
.card {
height: 500px;
width: 250px;
border: rebeccapurple 2px solid;
margin: 5px;
padding: 10px;
}
.category {
font-size: 14px;
color: rebeccapurple;
text-transform: uppercase;
margin: 0px;
}
.title {
margin: 0:
font-size: 32px;
}
.longtext {
font-weight: 900;
}
img {
width: 100%
}
.links {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
flex-direction: row;
}
</style>
<article class="card">
<img src="https://picsum.photos/id/3/200/" alt="Man using Phone">
<p class="category">Phones</p>
<h2 class="title">Phone Explorer</h2>
<p class="longtext">An interactive buying guide and explorer to get the best phone for you</p>
<div class="links">
<a href="/project">Project</a>
<a href="/process">Process</a>
</div>
</article>
{
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;
// Declare the x (horizontal position) scale.
const x = d3
.scaleUtc()
.domain([new Date("2023-01-01"), new Date("2024-01-01")])
.range([marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3
.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop]);
// Create the SVG container.
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Add the x-axis.
svg
.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));
// Add the y-axis.
svg
.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));
// Return the SVG element.
return svg.node();
}
// numbers
6.45
// string (text)
"hello"
"hello".length
// boolean
true
// date
new Date()
// Array []
[1, 2, 3]
countries = ["india", "srilanka", "nepal"]
// Access values of an array
countries[0]
details = ({
country: "india",
code: "IND"
})
details.country
details["country"]
Table
Object of Arrays -> Column Equivalent
Array of Objects -> Row Equivalent
// Object of Arrays
sample = ({
areas: ["north", "east", "west", "south", "central"],
sales: [5, 25, 15, 20, 10],
profit: [2, 8, 6, 5, 3]
})
// Array of Objects
sample1 = [
{ areas: "north", sales: 5, profit: 2 },
{ areas: "east", sales: 25, profit: 8 },
{ areas: "west", sales: 15, profit: 6 },
{ areas: "south", sales: 20, profit: 5 },
{ areas: "central", sales: 10, profit: 3 }
]
dataCSV = `area,sales,profit
north,5,2
east,25,8
west,15,6
south,20,5
central,10,3`
data = d3.csvParse(dataCSV, d3.autoType)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.barY(data, { x: "area", y: "sales", sort: { x: "y", reverse: true } })
]
})
Plot.plot({
height: 200,
marks: [Plot.frame(), Plot.text(["Hello, world!"], { frameAnchor: "middle" })]
})
Function
// Full form function
function square(x) {
return x * x;
}
// Short form - arrow function
square2 = (x) => x * x
// Anonymous function
(x) => x * x
<svg width="285" height="487" viewBox="0 0 285 487" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="285" height="487" fill="#D9D9D9"/>
<rect x="54" y="60" width="171" height="161" fill="#AAAAAA"/>
<ellipse cx="130.5" cy="368.5" rx="56.5" ry="57.5" fill="#330000"/>
</svg>
template = svg`<svg width="285" height="487" viewBox="0 0 285 487" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="285" height="487" fill="#D9D9D9"/>
<rect x="54" y="60" width="171" height="161" fill="#AAAAAA"/>
<ellipse cx="130.5" cy="368.5" rx="56.5" ry="57.5" fill="${color}"/>
</svg>
`
viewof color = Inputs.color({ label: "Favorite color", value: "#4682b4" })
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.
