Public
Edited
Apr 18, 2024
1 fork
coffee_chart = FileAttachment("coffee_chart.webp").image()
viewof type = Inputs.select(Object.keys(drink[0]), {label: "type"})
viewof detail = Inputs.select(Array.from(new Set(drink.map(d => d[viewof type.value]))), {label: "detail"})
mutable selectedData = {
const key = viewof type.value;
const value = viewof detail.value;
return drink.filter(d => d[key] === value);
}
d3 = require("d3@5")
d4 = require('d3@6')
d5 = require('d3@7')
_ = require('lodash')
vegalite = require("@observablehq/vega-lite")
md`### Models`
groupedByCategory = d4.group(drink, d => d.Beverage_category)
// Extract unique categories
uniqueCategories = Array.from(new Set(drink.map(d => d.Beverage_category)))
// Now you can use selectedCategory in other cells to reactively update visualizations
selectedCategoryValue = selectedCategory.value
viewof selectedCategory = html`
<select>
${uniqueCategories.map(category => html`<option value="${category}">${category}</option>`)}
</select>
`
{
const category = selectedCategory;
const filteredData = drink.filter(d => d.Beverage_category === category);
filteredData.sort((a, b) => d4.descending(a.Calories, b.Calories));
const margin = { top: 20, right: 30, bottom: 110, left: 200 };
const height = 500 - margin.top - margin.bottom;
const barWidth = 20; // Set a fixed bar width
const totalWidth = Math.max(800, filteredData.length * (barWidth + 10)) + margin.left + margin.right;
const svg = d4.create("svg")
.attr("viewBox", `0 0 ${totalWidth} ${height + margin.top + margin.bottom}`);
const x = d4.scaleLinear()
.domain([0, filteredData.length])
.range([margin.left, filteredData.length * (barWidth + 10) + margin.left]);
const y = d4.scaleLinear()
.domain([0, d4.max(filteredData, d => d.Calories)])
.range([height - margin.bottom, margin.top]);
svg.append("g")
.attr("fill", 'brown')
.selectAll("rect")
.data(filteredData)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.Calories))
.attr("height", d => y(0) - y(d.Calories))
.attr("width", barWidth);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickFormat((d, i) => filteredData[i] ? filteredData[i].Beverage + " (" + filteredData[i].Beverage_prep + ")": "")
.ticks(filteredData.length))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
return svg.node();
}
{
const svg = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 300)
.style("border", "1px solid black")
}// Adding a border to see the SVG boundaries easily
viewof selectedCupSize = html`
<div>
<input type="radio" id="short" name="cupSize" value="1" checked> <label for="short">Short</label><br>
<input type="radio" id="tall" name="cupSize" value="1.5"> <label for="tall">Tall</label><br>
<input type="radio" id="grande" name="cupSize" value="2"> <label for="grande">Grande</label><br>
<input type="radio" id="venti" name="cupSize" value="2.5"> <label for="venti">Venti</label>
</div>
`;
selectedCupSizeValue1 = parseFloat(selectedCupSize.querySelector('input[name="cupSize"]:checked').value);
selectedCupSizeValue = {
const radio = selectedCupSize.querySelector('input[name="cupSize"]:checked');
return radio ? parseFloat(radio.value) : 1; // Default to 1 or another sensible default
}
canvas3 = {
const scaleFactor = parseFloat(selectedCupSize.querySelector('input[name="cupSize"]:checked').value); // Use the reactive value directly from the radio selection
const context = DOM.context2d(200, 150); // Define canvas dimensions
// Clear the canvas
context.clearRect(0, 0, 200, 150);
// Define scaled dimensions based on the selected size
const cupWidthTop = 60 * scaleFactor;
const cupWidthBottom = 40 * scaleFactor;
const cupHeight = 120 * scaleFactor;
const cupX = 100; // Center the cup horizontally
const cupY = 15; // Set top margin
// Draw the cup
context.fillStyle = "rgb(0,128,0)";
context.beginPath();
context.moveTo(cupX - cupWidthTop / 2, cupY);
context.lineTo(cupX + cupWidthTop / 2, cupY);
context.lineTo(cupX + cupWidthBottom / 2, cupY + cupHeight);
context.lineTo(cupX - cupWidthBottom / 2, cupY + cupHeight);
context.closePath();
context.fill();
return context.canvas;
};
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.
