31:Te40,chart_hm = { const svg = d3.select(DOM.svg(width, h)) .classed("crashes-heatmap", true) const defs = svg.append("defs"); const linearGradient = defs.append("linearGradient") .attr("id", "linear-gradient"); linearGradient.selectAll("stop") .data(colourScale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: colourScale(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const g = svg.append("g") .attr("transform", `translate(${sett_hm.margin.left}, ${sett_hm.margin.top})`) // Define the div for the tooltip let div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); let ishift = 0; g.selectAll("rect") .data(data_air_hm) .enter().append("rect") .attr("x", (d, i) => { let ihat; ishift = (d.chem === sett_hm.contaminants[0]) ? i : ishift; ihat = i - ishift; return ihat * gridSize; }) .attr("y", (d) => { let y = d.year - sett_hm.years[0]; return y * gridSize; }) .attr("width", gridSize) .attr("height", gridSize) .attr("fill", d => colourScale(d.value)) .attr("stroke", "#e2e2e2") .on("mouseover", (event, d) => { let this_chem = `${d.chem[0]}${d.chem.slice(1).toLowerCase()}`; // Tooltip offsets // NB: when mouse is too close to right edge, shift // tooltip to left of mouse const deltaX = event.pageX <= 665 ? 25 : -155; const deltaY = -28; div.transition() //.duration(200) .style("opacity", 1); div .html("" + this_chem + ":
" + d.value + "
(" + d.year + ")
") .style("left", (event.pageX + deltaX) + "px") .style("top", (event.pageY + deltaY) + "px"); }) .on("mouseout", (d) => { div.transition() //.duration(500) .style("opacity", 0); }); // let textshift = 0; // g.selectAll("text") // .data(data_air_hm) // .enter() // .append("text") // .attr("x", (d, i) => { // let ihat; // textshift = (d.chem === sett_hm.contaminants[0]) ? i : textshift; // ihat = i - textshift; // return ihat * gridSize + gridSize/2; // }) // .attr("y", (d) => { // let y = d.year - sett_hm.years[0]; // return y * gridSize + gridSize/2; // }) // .style("text-anchor", "middle") // .attr("dy", ".35em") // //.text(d => formatValue(d.Value)) // .text((d) => { // return d.value; // }); // y-axis g.selectAll(".year") .data(sett_hm.years) .enter().append("text") .text(d => d) .classed("year", true) .attr("x", 0) .attr("y", (d, i) => { return i * gridSize; }) .style("text-anchor", "end") .attr("transform", "translate(-6," + gridSize / 1.2 + ")") // x-axis // https://stackoverflow.com/questions/21187329/d3-rotate-x-axis-labels g.selectAll(".chem") .data(sett_hm.contaminants) .enter().append("text") .text(d => { console.log(d) return chem_dict[d]; }) .classed("chem", true) .attr("transform", function(d, i) { return "translate(" + ( i * gridSize + 5) + ",0)" + "translate(" + gridSize / 2 + ", -6)rotate(-90)"; } ) .style("text-anchor", "start"); // g.append("g") // .call(legend) return svg.node(); }32:Taa5,// Contaimnant dictionary chem_dict = ({ "1,3 BUTADIENE": "1,3 Butadiene", "2-BUTOXYETHANOL": "2-BE", "CADMIUM": "Cadmium", "ALUMINUM OXIDE": "Al Oxide", "AMMONIA": "Ammonia", "AMMONIA VAPOURS": "Ammonia gas", "ARSENIC": "Arsenic", "BENZENE": "Benzene", "BENZO[A]PYRENE": "BaP", "BUTANOLS": "Butuanols", "BUTYL ACETATE, N-": "BUTYL ACETATE", "CALCIUM OXIDE (LIME)": "Lime", "CARBON DIOXIDE": "CO2", "CARBON MONOXIDE": "CO", "CHLORINE": "Chlorine", "CHLORINE DIOXIDE": "ClO2", "CHROMIUM": "Chromium", "CHLOROFORM": "Chloroform", "COBALT": "Cobalt", "COKE OVENS": "Coke ovens", "COKE OVENS - % LEAKING DOORS": "Coke - doors", "COKE OVENS - % LEAKING OFF-TAKES": "Coke - offtakes", "COKE OVENS - % LEAKING TOPSIDE PORT LIDS": "Coke - lids", "COPPER": "Copper", "DIOXIN AND FURAN": "Dioxin/Furan", "DUSTFALL": "Dustfall", "ETHANOL": "Ethanol", "ETHYL-3-ETHOXYPROPRIONATE": "Ethyl-3E", "ETHYLBENZENE": "Ethylbenzene", "ETHYLENES": "Ethylenes", "FERRIC OXIDE": "Ferric oxide", "FORMALDEHYDE": "Formaldehyde", "HEXAMETHYLENE DIISOCYANATES (HDIs)": "HDIs", "HYDROCARBONS (GASEOUS)": "Hydrocarbons", "HYDROCHLORIC ACID (MURIATIC ACID)": "Hydrochloric acid", "HYDROGEN CHLORIDE": "HCl", "HYDROGEN SULFIDE": "H2S", "IRON": "Iron", "IRON OXIDE": "Iron Oxide", "ISOBUTANOL": "Isobutanol", "ISOBUTYL ACETATE": "Isobutyl acetate", "LEAD": "Lead", "MANGANESE": "Mn", "MERCURY": "Mercury", "METHANE GAS": "CH3", "METHYL ISOBUTYL KETONE": "MIBK", "METHYLENE CHLORIDE": "DCM", "MINERAL SPIRITS": "Mineral spirits", "MN & COMPOUNDS": "Mn & compounds", "N-BUTANOL": "N-Butanol", "N-BUTYL ACETATE": "N-Butyl acetate", "NAPHTHALENE": "Napthalene", "NICKEL": "Nickel", "NITROGEN OXIDES": "NOx", "NITROGEN OXIDES (AS NITROGEN DIOXIDE)": "NO2", "NOISE": "Noise", "ODOUR": "Odour", "OPACITY": "Opacity", "ORGANIC MATTER": "Organic matter", "OXYGEN - LOW": "Oxygen - low", "PHENOL": "Phenol", "PHOSPHORIC ACID": "Phosphoric Acid", "STODDARD SOLVENT": "Stoddard solvent", "SULPHUR DIOXIDE": "SO2", "SULPHURIC ACID": "Sulphuric acid", "SUSPENDED PARTICULATE MATTER": "Particulates", "SUSPENDED PARTICULATE MATTER (< 44 ΜM DIAMETER)": "Part. (< 44 mm)", "TALC": "Talc", "TEMPERATURE - LOW": "Low Temp", "TETRAHYDROFURAN": "THF", "TITANIUM DIOXIDE": "TiO2", "TOLUENE": "Toluene", "TOTAL HYDROCARBONS (THC)": "Total THC", "TOTAL REDUCED SULFUR": "Sulfur", "TOTAL SUSPENDED MATTER": "Suspensions", "TOTAL SUSPENDED PARTICULATE MATTER": "Suspensions2", "TRIMETHYL AMINE": "TMA", "TRICHLOROETHYLENE": "TCE", "VIBRATION": "Vibration", "VINYL CHLORIDE": "Vinyl chloride", "XYLENE": "Xylene" })33:T8b5,chart2 = { const root = treemap2(data); const svg = d3.create("svg") .attr("viewBox", [0, 0, settings.width, settings.height]) .style("font", "10px sans-serif"); const shadow = DOM.uid("shadow"); svg.append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("stdDeviation", 3); const node = svg.selectAll("g") .data(d3.group(root, d => d.height)) .join("g") .attr("filter", shadow) .selectAll("g") .data(d => d[1]) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); node.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${settings.format(d.value)}`); node.append("rect") .attr("class", (d) => { if (d.parent) { if (d.height == 1) return `sector_${d.data.name.slice(0, 3)}`; else return `child child_${d.parent.data.name.slice(0, 3)}`; } else { return "root"; } }) .attr("id", d => (d.nodeUid = DOM.uid("node")).id) // .attr("fill", (d) => { // if (d.height === 0) return settings.colour3(d.parent.data.name); // inner boxes // else if (d.height === 1) return settings.colour2(d.height); // d3.scaleOrdinal(d3.schemeBlues[3])(d.height); // else return settings.colour2(d.height); // }) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.nodeUid.href); node.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(settings.format(d.value))) .join("tspan") .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); node.filter(d => d.children).selectAll("tspan") .attr("dx", 3) .attr("y", 13); node.filter(d => !d.children).selectAll("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`); return svg.node(); }34:T545,chart = { const root = treemap(data); const svg = d3.create("svg") .attr("viewBox", [0, 0, settings.width, settings.height]) .style("font", "10px sans-serif"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${settings.format(d.value)}`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", (d) => { while (d.depth > 1) d = d.parent; return settings.colour(d.data.name); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(settings.format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d); return svg.node(); }35:[{"id":"91ad72f91116e02af11513632c79d99c41e35a96af44063570e615376b6a88a2c013d313cb64a46a015952bbf876a8fef280f27cf7f287971a7e502a76f1b954","href":"https://static.observableusercontent.com/files/91ad72f91116e02af11513632c79d99c41e35a96af44063570e615376b6a88a2c013d313cb64a46a015952bbf876a8fef280f27cf7f287971a7e502a76f1b954","name":"enviromental_compliance_counts.json","type":"application/json","lastModified":1644007252339.697,"size":3160},{"id":"71c914c4f201a7d60498dc52efbdb0b1c4bda8808539f0891a115c93f9176c061f0d90c4f502f855e25a6fe4a1c8baf9a9c8ae705e11b35a156910395d6fba02","href":"https://static.observableusercontent.com/files/71c914c4f201a7d60498dc52efbdb0b1c4bda8808539f0891a115c93f9176c061f0d90c4f502f855e25a6fe4a1c8baf9a9c8ae705e11b35a156910395d6fba02","name":"ecr_air_heatmap_2012_2020.csv","type":"text/csv","lastModified":1644005642409.437,"size":14010}] 2f:{"title":"Environmental Compliance at-a-glance","cells":[{"id":0,"value":"# Environmental Compliance at-a-glance\nEnvironmental Compliance data is being collected yearly in Ontario since 2012 for 3 sectors: \n\n- AIR EMISSIONS\n- INDUSTRIAL SEWAGE\n- MUNICIPAL/PRIVATE SEWAGE\n\nHere, a few different data viz types are explored as a way to synthesize the enormous amount of data into a snapshot that provides an at-a-glance understanding of the data.\n\n- heatmap\n- treemap\n\n\nDatasets: [Environmental Compliance, Ontario Data Catalogue](https://data.ontario.ca/dataset/environmental-compliance-reports)","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## I. Heatmap\n\nThis heatmap shows the total number of exceedances in each year for 73 different contaminants. ","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"csv_air = FileAttachment(\"ecr_air_heatmap_2012_2020.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// Format data columns\ndata_air_hm = csv_air.map(({ Contaminant, year, Exceedances }) => ({\n chem: Contaminant,\n year: parseInt(year),\n value: parseInt(Exceedances)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"sett_hm = ({\n \"fontName\": \"Open Sans\",\n \"margin\": ({ top: 135, left: 40, right: 25, bottom: 100 }),\n \"height\": 500,\n \"contaminants\": [...new Set(data_air_hm.map(item => item.chem))], // array of unique chem\n \"years\": [...new Set(data_air_hm.map(item => item.year))], // array of unique year\n \"legendBarHeight\": 10,\n \"width\": 794\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"w = 1 * (sett_hm.width - sett_hm.margin.left - sett_hm.margin.right);","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"gridSize = 1.1 * Math.floor(w / sett_hm.contaminants.length );","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"h = gridSize * sett_hm.years.length + sett_hm.margin.top + sett_hm.margin.bottom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"d3.min(data_air_hm, d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3.max(data_air_hm, d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"// colourScale = d3.scaleSqrt() //d3.scaleLinear()\n// .domain([d3.min(data_air_hm, d => d.value), 0, d3.max(data_air_hm, d => d.value)])\n// .range([\"#FCC117\", \"#FFFFFF\",\"#608AD8\"]);\n\ncolourScale = d3.scaleSequential(d3.interpolateBuPu)\n // .domain([0, d3.max(data_air_hm, d => d.value)])\n .domain([0, 150])","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"y_scale = d3.scaleBand()\n .domain(sett_hm.years)\n .range([sett_hm.height, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"axisScale = d3.scaleLinear() //d3.scaleSqrt() //d3.scaleLinear()\n .domain(colourScale.domain())\n .range([0, w])","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":" ","pinned":true,"hidden":false,"mode":"html"},{"id":61,"value":"### Refs\n- https://observablehq.com/@marialuisacp/heatmap\n- https://observablehq.com/@shuaihaofzny/heatmap-example\n- https://observablehq.com/@eliaslevy/d3-heatmap","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"md`## II. Treemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof year = {\n let n = Inputs.select([\"2012\", \"2013\", \"2014\", \"2015\", \"2016\", \"2017\", \"2018\",\"2019\", \"2020\"], {\n label: \"Year\", \n multiple: false,\n value: \"2020\",\n width: 100\n })\n\n return n;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"data = FileAttachment(\"enviromental_compliance_counts.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"settings = ({\n \"width\": 1100,\n \"height\": 1000,\n \"colour\": d3.scaleOrdinal(d3.schemeCategory10),\n \"format\": d3.format(\",d\"),\n \"colour2\": d3.scaleSequential([3, 0], d3.interpolatePuBuGn),\n \"colour3\": d3.scaleOrdinal(d3.schemePastel2),\n \"tile\": d3.treemapBinary\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":170,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"treemap = data => d3.treemap()\n //.tile(tile)\n .tile(settings.tile)\n .size([settings.width, settings.height])\n .padding(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"treemap2 = data => d3.treemap()\n //.tile(tile)\n .tile(settings.tile)\n .size([settings.width, settings.height])\n .paddingOuter(2)\n .paddingTop(20)\n .paddingInner(1)\n .round(true)\n (d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"### Treemap without category boxes","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"viewof tile = {\n const options = [\n {name: \"d3.treemapBinary\", value: d3.treemapBinary},\n {name: \"d3.treemapDice\", value: d3.treemapDice},\n {name: \"d3.treemapSlice\", value: d3.treemapSlice},\n {name: \"d3.treemapSliceDice\", value: d3.treemapSliceDice},\n {name: \"d3.treemapSquarify\", value: d3.treemapSquarify, selected: true}\n ];\n const form = html`