data1 = FileAttachment("penguins.csv").csv({typed: true})
plotpengiuns=Plot.plot({
y: {grid: true},
color: {legend: true},
marks: [
Plot.rectY(data1, Plot.binX({y: "count"}, {x: "flipper_length_mm", fill: "sex"})),
Plot.ruleY([0])
]
})
// Import Chart.js using ObservableHQ's require
Chart = require('chart.js@3')
chrt={
const chartData = await FileAttachment("Sample Data.csv").csv({typed: true});
// Process the CSV data after it has been loaded
const processedChartData = chartData.map(row => {
// Replace 'Label' and 'Value' with the actual column names from your CSV file
const label = row['Month']; // e.g., 'Month'
const value = row['Value']; // e.g., 'Sales'
return { label, value };
});
// Extract labels and data for the chart
const labels = processedChartData.map(d => d.label);
const chartValues = processedChartData.map(d => d.value);
// Define the data object for Chart.js
const data = {
labels: labels,
datasets: [{
label: 'Dataset Label', // This is the label for the dataset (optional)
data: chartValues,
backgroundColor: labels.map(label => {
// Assign a color to each month
switch (label) {
case 'Jan':
return 'rgba(255, 99, 132, 0.5)';
case 'Feb':
return 'rgba(54, 162, 235, 0.5)';
case 'March':
return 'rgba(255, 206, 86, 0.5)';
// Add more cases for other months
default:
return 'rgba(0, 123, 255, 0.5)'; // Default color for other months
}
}),
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 4
}]
};
// Create a canvas element using Observable's HTML literal
const wrapper = html`<div style="width: 30%; height: auto;"><canvas></canvas></div>`;
const canvas = wrapper.querySelector('canvas');
// Initialize the Chart.js chart
const myChart = new Chart(canvas.getContext('2d'), {
type: 'pie', // Change to 'bar', 'line', etc., depending on your chart type
data: data,
options: {
responsive: true, // Ensure the chart is responsive
maintainAspectRatio: true // Adjust aspect ratio as needed
// Options here. For a pie chart, you might not need scales.
}
});
// Return the canvas element to be displayed in the notebook
return wrapper;
}
penguins.csv
X
sex
Y
body_mass_g
Color
#ff57f6
Size
species
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
