Public
Edited
Jan 29
1 star
// require('d3@v6')
data = (await require('vega-datasets'))['gapminder.json']()
Table(data)
html`
<p>Potential Schilller hiding spots</p>
<ul>
<li class="hidingSpot">The Chapel</li>
<li class="hidingSpot">The Arb</li>
<li class="hidingSpot">Underneath the stadium</li>
<li class="hidingSpot">On Mai Fete</li>
</ul>
`
d3.selectAll('.hidingSpot').style('color', 'red')
d3.selectAll('.hidingSpot').style('color','blue'),md``
d3.selectAll('.hidingSpot').style('color', function() {
let colors = ['red', 'blue', 'green', 'yellow', 'purple', 'magenta'];
return colors[Math.floor(Math.random() * colors.length)];
}),md``
<svg width="300px" height="100px">
<circle cx="50" cy="50" r="10" fill="lightblue" stroke="black" class="lilCircle"></circle>
<circle cx="100" cy="50" r="10" fill="lightblue" stroke="black" class="lilCircle"></circle>
<circle cx="150" cy="50" r="10" fill="lightblue" stroke="black" class="lilCircle"></circle>
</svg>
d3.selectAll("circle")
.attr("fill", "red");
{
let rData = [3, 1, 6];
let circle = d3.selectAll('.lilCircle2') // Using a different class name for a different set of circles
circle.data(rData)
circle.attr('r', function(d) { return 5*d; });
}
{
let rData = [2, 4, 1];
let circle = d3.selectAll('.lilCircle2') // Using a different class name for a different set of circles
.data(rData)
.attr('r', function(d) { return 10*d; });
}
{
let complexerData = [{'x': 40, 'y': 60, 'r': 30},
{'x': 100, 'y': 75, 'r': 20},
{'x': 200, 'y': 40, 'r': 5}];
d3.selectAll('.lilCircle3') // New class name again
.data(complexerData)
.attr('cx', function(d) { return d['x']; })
.attr('cy', function(d) { return d.y; }) // Remember how we can use dot-notation?
.attr('r', d => d.r) // Arrow functions can make these really short!
.attr('fill', 'orange')
}
{
// Create an SVG in a D3 selection with a given height and width
let svg = d3.create('svg').attr('height', 50).attr('width', 50)
// Do some stuff to change the svg, add things to it, etc.
svg.style('background-color', 'pink');
svg.append('circle')
.attr('cx', 25)
.attr('cy', 25)
.attr('r', 10)
.attr('fill', 'white')
// Return the raw SVG to be rendered by Observable
return svg.node();
}
{
let svg = d3.create('svg').attr('height', 100).attr('width', 300);
let complexerData = [{'x': 40, 'y': 60, 'r': 30},
{'x': 100, 'y': 75, 'r': 20},
{'x': 200, 'y': 40, 'r': 5}];
svg.selectAll('circle')
.data(complexerData)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
.attr('fill', 'orange')
return svg.node();
}
{
let barHeight = 10,
barFill = 'pink',
buffer = 1;
let svg = d3.create('svg')
.attr('height', 100)
.attr('width', 500);
svg.selectAll('rect')
.data(binsAgain)
.join('rect')
.attr('x', 0)
.attr('y', (d, i) => i * (barHeight + buffer))
.attr('width', d => d.length * 10)
.attr('height', barHeight)
.attr('fill', barFill)
return svg.node();
}
barWidthScale = d3.scaleLinear()
.domain([0, 8990])
.range([0, 300])
gapminderBinData = Array.from(d3.group(data, d=>d.cluster)).sort((a,b)=>a[0]-b[0]).map(d=>d[1])
d3.group(gapminderBinData[0], d=>d.country).size
svgHeight = 300;
svgWidth = 500;
xScale = // YOUR CODE HERE
yScale = // YOUR CODE HERE
rScale = // YOUR CODE HERE
// YOUR CODE HERE: try some values to make sure that your scales are outputting things that make sense given the data
graphic
margin = {
return {
top: 10,
right: 10,
bottom: 20,
left: 20
}
};
xScale_m = d3.scaleLinear()
.domain(d3.extent(data, d=>d.fertility))
.range([margin.left, svgWidth - margin.right])
yScale_m = d3.scaleLinear()
.domain(d3.extent(data, d=>d.life_expect))
.range([svgHeight - margin.bottom, margin.top])
{
let svg = d3.create('svg').attr('width', svgWidth).attr('height', svgHeight);
svg.append('g')
.attr('transform', `translate(0, ${svgHeight - margin.bottom})`)
.call(d3.axisBottom(xScale_m));
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale_m));
return svg.node();
}
import {Table} from "@observablehq/table"
import {graphic} from '@d3/margin-convention'
import {setupInstructions,yourTurn} from "@carleton-cs-314-w25/utilities-w25"
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.
