GenderSurvivalData = FileAttachment("gender_submission.csv").csv()
GenderSurvivalData[0]
// make survival an integer for band scaling
survival = GenderSurvivalData.map(d => {return { PassengerId: d.PassengerId, Survived: parseInt(d.Survived)} })
survivedY = d3.scaleBand()
.domain(survival.map(d => d.Survived))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
survivedX = d3.scaleLinear()
.domain([0, survival.length])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound)
survivedX(survival.filter(d => d.Survived == 0).length)
// TODO: figure out how to map the count of a variable to the length of the box
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${survival.map(d => htl.svg`<rect y="${survivedY(d.Survived)}" x="${survivedX(0)}" width="${survivedX(survival.filter(d => d.Survived === 0).length) - survivedX(0)}" height="${survivedY.bandwidth()}" "></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${survivedY.bandwidth() / 2})">
${mydata.map(d => htl.svg`<text y="${survivedY(d.Survival)}" x="${survivedX(d.PassgengerId)}" dy="0.35em">${d.age} yo</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(survivedX))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(survivedY))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
fruits = [
{'name': '🍊', 'count': 21, 'color': 'orange', 'size': 8},
{'name': '🍇', 'count': 13, 'color': 'purple', 'size': 2},
{'name': '🍏', 'count': 8, 'color': 'green', 'size': 8},
{'name': '🍌', 'count': 5, 'color': 'yellow', 'size': 20},
{'name': '🍐', 'count': 3, 'color': 'green', 'size': 10},
{'name': '🍋', 'count': 2, 'color': 'yellow', 'size': 7},
{'name': '🍎', 'count': 1, 'color': 'red', 'size': 8},
{'name': '🍉', 'count': 1, 'color': 'pink', 'size': 30}
]
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${mydata.map(d => htl.svg`<rect y="${famY(d.label)}" x="${famX(0)}" width="${famX(d.age) - famX(0)}" height="${famY.bandwidth()}" "></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${famY.bandwidth() / 2})">
${mydata.map(d => htl.svg`<text y="${famY(d.label)}" x="${famX(d.age)}" dy="0.35em">${d.age} yo</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(famX))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(famY))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${mydata.map(d => htl.svg`<rect y="${famY(d.label)}" x="${famXHeight(0)}" width="${famXHeight(d.height) - famX(0)}" height="${famY.bandwidth()}" "></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${famY.bandwidth() / 2})">
${mydata.map(d => htl.svg`<text y="${famY(d.label)}" x="${famXHeight(d.height)}" dy="0.35em">${d.height} meters tall</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(famXHeight))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(famY))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
mydata = [
{name: "jordan", label: "J", color: "steelblue", age: 38, favorite_food: "ice cream", height: 1.73},
{name: "melissa", label: "M", color: "lightblue", age: 34, favorite_food: "potato chips", height: 1.68},
{name: "grace", label: "G", color: "yellow", age: 6, favorite_food: "pizza", height: 1.32},
{name: "anna", label: "A", color: "red", age: 3, favorite_food: "black beans", height: 1.19}
]
famX = d3.scaleLinear()
.domain([0, d3.max(mydata, d => d.age)+10])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound)
famXHeight = d3.scaleLinear()
.domain([0, 2])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateNumber)
famY = d3.scaleBand()
.domain(mydata.map(d => d.label))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
fscale = d3.scaleLinear()
fruits[0].name
fruits[0].size
fruits.map(d => d.count) // the count dimension (quantitative)
fruits.map(d => d.name) // the name dimension (nominal)
x = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound)
y = d3.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.2)
.round(true)
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${fruits.map(d => htl.svg`<rect y="${y2(d.name)}" x="${x2(0)}" width="${x2(d.size) - x2(0)}" height="${y2.bandwidth()}"></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${fruits.map(d => htl.svg`<text y="${y2(d.name)}" x="${x2(d.size)}" dy="0.35em">${d.size}</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(x2))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y2))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
d3.max(fruits, d => d.size) - d3.min(fruits, d => d.size)
x2 = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.size)])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateBasis)
y2 = d3.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
{
const x = d3.scaleLinear();
x.domain([0, d3.max(fruits, d => d.count)]);
x.range([margin.left, width - margin.right]);
x.interpolate(d3.interpolateRound);
return x;
}
x.domain()
x.range()
y
y("🍉")
grapes
y("🍊") // the y-coordinate for name = oranges
x(21) // the x-coordinate corresponding to count = 21
x(0) // the x-coordinate corresponding to count = 0
x(21) - x(0) // the width of the bar corresponding to count = 21
x(count) - x(0)
y.bandwidth() // the height of each bar
htl.html`<svg viewBox="0 0 ${width} 33" style="max-width: ${width}px; font: 10px sans-serif; display: block;">
<rect fill="steelblue" x="${x(0)}" width="${x(count) - x(0)}" height="33"></rect>
<text fill="white" text-anchor="end" x="${x(count)}" dx="-6" dy="21">${count}</text>
</svg>`
htl.html`<svg viewBox="0 ${margin.top} ${width} ${height - margin.top}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${fruits.map(d => htl.svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${fruits.map(d => htl.svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
</g>
</svg>`
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${fruits.map(d => htl.svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${fruits.map(d => htl.svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(x))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
htl.html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
<g fill="steelblue">
${mydata.map(d => htl.svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>
<g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${mydata.map(d => htl.svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.age}</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(0,${margin.top})">`)
.call(d3.axisTop(x))
.call(g => g.select(".domain").remove())
.node()}
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
color = d3.scaleSequential()
.domain([0, d3.max(fruits, d => d.count)])
.interpolator(d3.interpolateBlues)
color2 = d3.scaleSequential()
.domain([0, d3.max(fruits, d => d.count)])
.interpolator(d3.interpolateReds)
color(0)
color(21)
htl.html`<svg viewBox="0 ${margin.top} ${width} ${height - margin.top}" style="max-width: ${width}px; font: 10px sans-serif;">
<g>
${fruits.map(d => htl.svg`<rect fill="${color(d.count)}" y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>
<g text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
${fruits.map(d => htl.svg`<text fill="${d3.lab(color(d.count)).l < 60 ? "white" : "black"}" y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
</g>
${d3.select(htl.svg`<g transform="translate(${margin.left},0)">`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.node()}
</svg>`
units = "cm"
width = 640
height = 202
margin = ({top: 20, right: 0, bottom: 0, left: 30})
import {Legend} from "@d3/color-legend"
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.
