2f:Tfe4,function unit_chart(data, clip_width = true) { let svg_width = width; if ((width > 640) & clip_width) { svg_width = 640; } const GRID_SIZE = 20; const GAP_SIZE = 4; const SQUARE_SIZE = GRID_SIZE - GAP_SIZE; let d3_data = get_d3_data(data); const margin = { top: 0, right: 20, bottom: 0, left: 0 }; const viswidth = svg_width - margin.left - margin.right; // Compute the height of the graphic. const total_squares = d3_data.reduce((a, b) => a + b["value"], 0); const num_squares_in_width = Math.floor(viswidth / GRID_SIZE); const height_of_squares = Math.ceil(total_squares / num_squares_in_width) * GRID_SIZE; // If text is destined to be in the penultimate four squares on the right, put on next line const squares_on_final_row = total_squares % num_squares_in_width; let text_on_final_line = num_squares_in_width - squares_on_final_row < 7; let additional_height_for_text = 0; if (text_on_final_line) { additional_height_for_text = GRID_SIZE; } const svg_height = height_of_squares + additional_height_for_text + margin.top + margin.bottom; const height = svg_height - margin.top - margin.bottom; let colorScale = d3 .scaleOrdinal() .range(d3.schemeCategory10) .domain([ "Driving", "Flying", "Heating", "Stuff", "Showers", "Food/Eating", "Washing machine", "Dishwasher", "Dogs" ]); let svg = d3.select( DOM.svg( viswidth + margin.left + margin.right, height + margin.top + margin.bottom ) ); let svg_group = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Colored rectangles svg_group .selectAll("c_rect") .data(d3_data) // Joins arrayOfNumbers with DOM elements, producing .enter(),.exit() selections .enter() // Returns the portion of the data which is new ("entering") and not yet bound to DOM elements .append("rect") // For each, append a to selected svg .attr("x", (d, i) => (i % num_squares_in_width) * GRID_SIZE) .attr("y", (d, i) => Math.floor(i / num_squares_in_width) * GRID_SIZE) .attr("width", (d) => d.value * SQUARE_SIZE) // Set each cirlces x position using its index in the array .attr("height", SQUARE_SIZE) // Set each circles y position (cy is short for 'y coordinate of the circle's center') .attr("fill", (d) => colorScale(d["key"])); // Grid svg_group .selectAll("g_rect") .data(d3_data) // Joins arrayOfNumbers with DOM elements, producing .enter(),.exit() selections .enter() // Returns the portion of the data which is new ("entering") and not yet bound to DOM elements .append("rect") // For each, append a to selected svg .attr("x", (d, i) => (i % num_squares_in_width) * GRID_SIZE) .attr("y", (d, i) => Math.floor(i / num_squares_in_width) * GRID_SIZE) .attr("width", (d) => SQUARE_SIZE) // Set each cirlces x position using its index in the array .attr("height", SQUARE_SIZE) // Set each circles y position (cy is short for 'y coordinate of the circle's center') .attr("stroke", "gray") .attr("stroke-width", 0.5) .attr("fill", "none"); // Total text let total = d3_data.reduce((a, b) => a + b["value"], 0).toFixed(1) + " kwh/day"; // Position of text let text_x_position = 0; if (!text_on_final_line) { text_x_position = ((d3_data.length - 1) % num_squares_in_width) * GRID_SIZE + GRID_SIZE; } let text_y_position = Math.floor((d3_data.length - 1) / num_squares_in_width) * GRID_SIZE; if (text_on_final_line) { text_y_position += GRID_SIZE; } svg_group .append("text") .attr("x", text_x_position) .attr("dx", 2) .attr("y", text_y_position) .attr("dy", GRID_SIZE / 2) .style("text-anchor", "left") .style("alignment-baseline", "middle") .style("font-size", "1em") .text(total); // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node(); }30:Te4d,function unit_chart_2(data, clip_width = true) { let svg_width = width; if ((width > 640) & clip_width) { svg_width = 640; } const GRID_SIZE = 20; const GAP_SIZE = 4; const SQUARE_SIZE = GRID_SIZE - GAP_SIZE; const CATEGORY_GAP = 2; let squares_data = get_d3_data(data); const margin = { top: 0, right: 20, bottom: 0, left: 100 }; const viswidth = svg_width - margin.left - margin.right; // Compute the height of the graphic. const total_squares = squares_data.reduce((a, b) => a + b["value"], 0); const num_squares_in_width = Math.floor(viswidth / GRID_SIZE); let d3_data = munge_data(squares_data, num_squares_in_width); let text_positions = d3 .nest() .key(function (d) { return d.key; }) .rollup((d) => d3.extent(d, (d) => d["y"])) .entries(d3_data); const height_of_squares = (d3_data.slice(-1)[0]["y"] + 1) * GRID_SIZE; const svg_height = height_of_squares + margin.top + margin.bottom; const height = svg_height - margin.top - margin.bottom; let colorScale = d3 .scaleOrdinal() .range(d3.schemeCategory10) .domain([ "Driving", "Flying", "Heating", "Stuff", "Showers", "Food/Eating", "Washing machine", "Dishwasher", "Dogs" ]); let svg = d3.select( DOM.svg( viswidth + margin.left + margin.right, height + margin.top + margin.bottom ) ); let svg_group = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Colored rectangles svg_group .selectAll("c_rect") .data(d3_data) // Joins arrayOfNumbers with DOM elements, producing .enter(),.exit() selections .enter() // Returns the portion of the data which is new ("entering") and not yet bound to DOM elements .append("rect") // For each, append a to selected svg .attr("x", (d) => d["x"] * GRID_SIZE) .attr("y", (d) => d["y"] * GRID_SIZE) .attr("width", (d) => d.value * SQUARE_SIZE) // Set each cirlces x position using its index in the array .attr("height", SQUARE_SIZE) // Set each circles y position (cy is short for 'y coordinate of the circle's center') .attr("fill", (d) => colorScale(d["key"])); // Grid rectangles svg_group .selectAll("g_rect") .data(d3_data) // Joins arrayOfNumbers with DOM elements, producing .enter(),.exit() selections .enter() // Returns the portion of the data which is new ("entering") and not yet bound to DOM elements .append("rect") // For each, append a to selected svg .attr("x", (d) => d["x"] * GRID_SIZE) .attr("y", (d) => d["y"] * GRID_SIZE) .attr("width", SQUARE_SIZE) // Set each cirlces x position using its index in the array .attr("height", SQUARE_SIZE) // Set each circles y position (cy is short for 'y coordinate of the circle's center') .attr("fill", null) .attr("stroke", "gray") .attr("stroke-width", 0.5) .attr("fill", "none"); function calc_text_size(d) { if (d.key.length <= 10) { return "1rem"; } else { return 10 / d.key.length + "rem"; } } svg_group .selectAll("a_text") .data(text_positions) .enter() .append("text") .attr("x", 0) .attr("dx", -6) .attr("y", (d) => { return d3.mean(d["value"]) * GRID_SIZE; }) .attr("dy", GRID_SIZE / 2) .style("text-anchor", "end") .style("alignment-baseline", "middle") .style("font-size", (d) => calc_text_size(d)) .text((d) => d["key"]); // Once we append the vis elments to it, we return the DOM element for Observable to display above. return svg.node(); }31:[] 2d:{"title":"Unit chart","cells":[{"id":0,"value":"md`# Unit chart`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5', \"d3-scale-chromatic@^1.4.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = {return {\"label a\": 15.5, \"b stuff\": 42.2, \"c another label\": slider}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"// function data_to_array(data) {\nfunction get_d3_data(data) {\n \n // Turn dict into array sorted by size \n let data_array = Object.keys(data).map(key => { return {\"key\":key, \"value\": data[key]}})\n data_array.sort((a,b) => b[\"value\"]-a[\"value\"])\n\n \n function get_map(d) {\n \n let value = d[\"value\"]\n let num_squares = Math.ceil(value)\n\n let items = Array(num_squares).fill(0)\n \n items = items.map(function(d2,i) {\n return {\"key\": d[\"key\"],\n \"value\": (i + 1 > value) ? value-i : 1}})\n \n return items\n }\n \n let squares = data_array.map(get_map).flat()\n \n return squares\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof slider = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3_data = get_d3_data(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"unit_chart(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"unit_chart_2(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"function munge_data(data, num_squares_in_width) {\n \n let x_counter = 0\n let y_counter = 0\n let previous_key = data[0][\"key\"]\n let new_data = data.map(d => {\n \n \n if (previous_key != d[\"key\"]) {\n y_counter += 1.5\n x_counter = 0\n } else if (x_counter > num_squares_in_width) {\n x_counter = 0\n y_counter +=1\n }\n \n d[\"x\"] = x_counter\n d[\"y\"] = y_counter\n \n previous_key = d[\"key\"] \n x_counter += 1\n return d\n })\n \n return new_data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"munged = munge_data(get_d3_data(data), 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"\n text_positions = d3.nest()\n .key(function(d) { return d.key; })\n .rollup(d => d3.extent(d, d=> d[\"y\"]))\n .entries(munged)\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"key = md`Each full square ( ) in the visualisations represents 1 kilowatt hour (kwh), the amount of energy consumed by using 1000 watts of power for one hour. `","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}