25:["$","title",null,{"children":"Plot: Histogram | Hakim's Workspace | Observable"}] 4b:T7d5,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`

`; 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; }4c:[{"id":"f9fa59f77f9f0158f91ba99321d79c737fe937c8e5b864b12dd4928bad1a1ec466869ec426a707c42a2e91f9029c01f1de80ebbd842d3a15057802d9edca0b73","href":"https://static.observableusercontent.com/files/f9fa59f77f9f0158f91ba99321d79c737fe937c8e5b864b12dd4928bad1a1ec466869ec426a707c42a2e91f9029c01f1de80ebbd842d3a15057802d9edca0b73","name":"Sample Data.csv","type":"text/csv","lastModified":1708369445570.939,"size":78},{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1707863075101.301,"size":13506}] 47:{"id":"882f6f90cb59f479","slug":"plot-histogram","title":"Plot: Histogram","thumbnail":"cd126d2514818df7298cd58baf853907697715794795d1de3136ec0d081d426e","access_level":"public","create_time":"$D2024-02-13T22:24:35.101Z","update_time":"$D2024-03-30T19:53:03.781Z","view_time":null,"first_public_time":"$D2024-02-13T22:24:35.101Z","has_unpublished_edits":null,"fork":{"id":"9551de4ced039cab","slug":"plot-histogram","title":"Plot: Histogram","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0d55791abf4ea637","login":"hakim2-ws","name":"Hakim's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d8ecaeff354fe723a09ed03c790704a54ba07f3571c4262d9b75d8936be5c83a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":174,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"64334cc3d01decb5","login":"hakim2","name":"Hakim","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"64334cc3d01decb5","login":"hakim2","name":"Hakim","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null,"role":"editor"},{"type":"team","id":"0d55791abf4ea637","login":"hakim2-ws","name":"Hakim's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/d8ecaeff354fe723a09ed03c790704a54ba07f3571c4262d9b75d8936be5c83a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot: Histogram","cells":[{"id":4,"value":"

Plot: Histogram

Observable Plot › Gallery

\n\n# Histogram\n\nUsing the [bin transform](/plot/transforms/bin) and [rect mark](/plot/marks/rect).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"data1 = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"plotpengiuns=Plot.plot({\n y: {grid: true},\n color: {legend: true},\n marks: [\n Plot.rectY(data1, Plot.binX({y: \"count\"}, {x: \"flipper_length_mm\", fill: \"sex\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Import Chart.js using ObservableHQ's require\nChart = require('chart.js@3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Plot.plot({\n marks: [\n Plot.auto(await FileAttachment(\"penguins.csv\").csv({typed: true}), {x: \"sex\", y: \"body_mass_g\", color: \"#ff57f6\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null