2f: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(); }30: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(); }31:T42a,### `Contaminant` column - **Trailing space:** ``` "DIOXIN AND FURAN" "DIOXIN AND FURAN " "DIOXIN AND FURANS" "SUSPENDED PARTICULATE MATTER" "SUSPENDED PARTICULATE MATTER " "TOTAL SUSPENDED MATTER" "TOTAL SUSPENDED PARTICULATE MATTER" ``` - **Unit discrepancy:** ``` "SUSPENDED PARTICULATE MATTER (< 44 m diameter)" "SUSPENDED PARTICULATE MATTER (< 44 µM DIAMETER)" "SUSPENDED PARTICULATE MATTER (< 44 µm diameter)" ``` - **Formatting:** ``` "OPACITY" "Opacity" "TOTAL HYDROCARBONS (THC)" "TOTAL HYDROCARBONS, (THC)" ``` - **Formatting: all contaminants in upper case except:** ``` "chromium" ``` - **Contaminant name inconsistencies** ``` "AMMONIA" "AMMONIA VAPOURS" "BENZO(A)PYRENE" "BENZO[A]PYRENE" "BUTANOL-n" "BUTANOLS (BUTYL ALCOHOLS)" "CHLOROFORM" "CHLOROFORM (TRICHLOROMETHANE)" "DIOXIN AND FURAN" "DIOXIN AND FURANS" "OPACITY" "OPACITY (DAYS EXCEEDANCES OCCURRED)" "Opacity" "VINYL CHLORIDE" "VINYL CHLORIDE MONOMER (VCM)" "XYLENE" "XYLENES" ```32:T58c,contaminantErrors = [ {orig: "AMMONIA VAPOURS", correctVal: "AMMONIA"}, {orig: "DIOXIN AND FURAN", correctVal: "DIOXIN AND FURANS"}, {orig: "HYDROCHLORIC ACID (MURIATIC ACID)", correctVal: "HYDROCHLORIC ACID"}, {orig: "HCL FUMES/VAPOUR", correctVal: "HYDROGEN CHLORIDE"}, {orig: "HYDROGEN CHLORIDE GAS", correctVal: "HYDROGEN CHLORIDE"}, {orig: "HYDROGEN CHLORIDE GAS (ANHYDROUS)", correctVal: "HYDROGEN CHLORIDE"}, {orig: "TOTAL SUSPENDED MATTER", correctVal: "TOTAL SUSPENDED PARTICULATE MATTER"}, {orig: "SUSPENDED PARTICULATE MATTER (< 44 m diameter)", correctVal: "SUSPENDED PARTICULATE MATTER (< 44 µm diameter)"}, {orig: "SUSPENDED PARTICULATE MATTER (< 44 µM DIAMETER)", correctVal: "SUSPENDED PARTICULATE MATTER (< 44 µm diameter)"}, {orig: "Opacity", correctVal: "OPACITY"}, {orig: "OPACITY (DAYS EXCEEDANCES OCCURRED)", correctVal: "OPACITY"}, {orig: "TOTAL HYDROCARBONS, (THC)", correctVal: "TOTAL HYDROCARBONS (THC)"}, {orig: "chromium", correctVal: "CHROMIUM"}, {orig: "n-BUTANOL", correctVal: "N-BUTANOL"}, {orig: "n-BUTYL ACETATE", correctVal: "N-BUTYL ACETATE"}, {orig: "BENZO(A)PYRENE", correctVal: "BENZO[A]PYRENE"}, {orig: "BUTANOL-n", correctVal: "BUTANOLS (BUTYL ALCOHOLS)"}, {orig: "CHLOROFORM (TRICHLOROMETHANE)", correctVal: "CHLOROFORM"}, {orig: "VINYL CHLORIDE MONOMER (VCM)", correctVal: "VINYL CHLORIDE"}, {orig: "XYLENE", correctVal: "XYLENES"} ] 33:T466,limFreqErrors = [ {orig: "/mon", correctVal: "30 days"}, {orig: "/30 day", correctVal: "30 days"}, {orig: "/30 days", correctVal: "30 days"}, {orig: "30 day", correctVal: "30 days"}, {orig: "/d", correctVal: "day"}, {orig: "daily", correctVal: "day"}, {orig: "/annum", correctVal: "year"}, {orig: "annual avg", correctVal: "year"}, {orig: "1hr", correctVal: "hour"}, {orig: "mon avg", correctVal: "month"}, {orig: "4min avg", correctVal: "4 minutes"}, {orig: "6 min average", correctVal: "6 minutes"}, {orig: "6 min avg", correctVal: "6 minutes"}, {orig: "6min avg", correctVal: "6 minutes"}, {orig: "10min avg", correctVal: "10 minutes"}, {orig: "10 min avg", correctVal: "10 minutes"}, {orig: "12h avg", correctVal: "12 hours"}, {orig: "24 hr", correctVal: "24 hours"}, {orig: "24h avg", correctVal: "24 hours"}, {orig: "24hr avg", correctVal: "24 hours"}, {orig: "24hr", correctVal: "24 hours"}, {orig: "2h avg", correctVal: "2 hours"}, {orig: "4h avg", correctVal: "4 hours"}, {orig: "30 min avg", correctVal: "30 minutes"}, {orig: "30min avg", correctVal: "30 minutes"} ]34:T66f,/* Reshape grouped data into format needed for heat map: [ {chem: "1,3 BUTADIENE", year: 2012, value: 0}, {chem: "1,3 BUTADIENE", year: 2014, value: 10}, ... {chem: "1,3 BUTADIENE", year: 2021, value: 5} ] */ heatmapFormat = (o, groupData) => { let o_reshape = []; const xvals = [...new Set(o.map(item => item.Contaminant))].sort(); const yvals = [...new Set(o.map(item => item.year))].sort(function(a, b){return a-b}); // sort ascending yvals.forEach(function(yval, col) { xvals.forEach(function(xval, row) { console.log('xval: ', xval) console.log('row: ', row) console.log('yval: ', yval) let thisRow = {}; let getVal = groupData.filter(d => d['chem'] === xval && d['year'] === yval); //[0]['value']; console.log('getVal: ', getVal) let thisVal = getVal.length > 0 ? getVal[0]["value"] : -999; let thisUnit = getVal.length > 0 ? getVal[0]["unit"] : -999; let thisQtyMin = getVal.length > 0 ? getVal[0]["qty_min"] : -999; let thisQtyMax = getVal.length > 0 ? getVal[0]["qty_max"] : -999; // If there is no chemical for that year, means it was not measured. // Does NOT mean that the data is missing let wasMeasured = getVal.length > 0 ? true : false; console.log('thisVal: ', thisVal) console.log('thisUnit: ', thisUnit) thisRow.chem = xval; thisRow.year = yval; thisRow.value = thisVal; thisRow.unit = thisUnit; thisRow.qty_min = thisQtyMin; thisRow.qty_max = thisQtyMax; thisRow.wasMeasured = wasMeasured; o_reshape.push(thisRow); }) }) return o_reshape; }35:T51e,WITH staging AS ( SELECT Contaminant, "Contaminant Unit", "Limit Frequency", cast(NULLIF("No. of Exceedances",'') as int) as num_exceedances, replace("Quantity Minimum*", ',', '') as qty_min_str, replace("Quantity Maximum*", ',', '') as qty_max_str, "Quantity Minimum*", "Quantity Maximum*", "Limit Frequency", CAST(year AS INT) AS year FROM data_air ) , find_invalid AS ( select Contaminant, "Contaminant Unit", "Limit Frequency", cast(NULLIF(qty_min_str,'') as int) as qty_min, cast(NULLIF(qty_max_str,'') as int) as qty_max, CASE WHEN num_exceedances IS NULL and (qty_min = 0 and qty_max = 0) THEN 0 ELSE num_exceedances END AS num_exceedances, year from staging ) -- Sum Number of Exceedances, grouped by Limit Frequency SELECT Contaminant AS chem, "Contaminant Unit" AS unit, "Limit Frequency" AS period, SUM(num_exceedances)::int AS value, qty_min, qty_max, year FROM find_invalid GROUP BY Contaminant, "Contaminant Unit", "Limit Frequency", qty_min, qty_max, year ORDER BY year, chem 36:T1aa3,plot_heatMapGeneric = (chartData, settings) => { let colNames = [...new Set(chartData.map(item => item.chem))].sort(); let rowNames = [...new Set(chartData.map(item => item.year))].sort(); // Derive plot dimensions from settings const w = 1 * (settings.width - settings.margin.left - settings.margin.right); const gridSize = Math.floor(w / colNames.length); const h = gridSize * rowNames.length + settings.margin.top + settings.margin.bottom; // Define the plot scales const colourScale = d3.scaleSequential(d3.interpolateBuPu) //.domain([0, d3.max(chartData, d => d.value)]) .domain([0, 500]); const y_scale = d3.scaleBand() // .domain(d3.range(1745)) .domain(rowNames) .range([settings.height, 0]); const axisScale = d3.scaleSqrt() //d3.scaleLinear() .domain(colourScale.domain()) .range([0, w/2]); // Define the legend const legend = g => { g.attr("transform", `translate(0, ${h - settings.margin.bottom - settings.legendBarHeight })`) .append("rect") .attr("width", w/2) .attr("height", settings.legendBarHeight) .style("fill", "url(#linear-gradient)") g.call(axisBottom) }; // Called by legend const axisBottom = g => { g.classed("axis axis--bottom", true) .attr("transform", `translate(0, ${h - settings.margin.bottom - settings.legendBarHeight})`) .call(d3.axisBottom(axisScale) .ticks(settings.width / 80) .tickSize(settings.legendBarHeight) //.tickFormat(d3.format(".0%")) ) .select(".domain") .remove() } // Construct the SVG const svg = d3.select(DOM.svg(settings.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(${settings.margin.left}, ${settings.margin.top})`) .attr("class", "allyears"); // Define the div for the tooltip let div = d3.select("body") .append("div") .attr("id", "tooltip_hm_allyrs") .attr("class", "tooltip") .style("opacity", 0); let ishift = 0; g.selectAll("rect") .data(chartData) .enter().append("rect") .attr("x", (d, i) => { let ihat; ishift = (d.chem === colNames[0]) ? i : ishift; ihat = i - ishift; return ihat * gridSize; }) .attr("y", (d) => { let y = d.year - rowNames[0]; return y * gridSize; }) .attr("width", gridSize) .attr("height", gridSize) .attr("stroke-width", "0.5px") .attr("stroke", settings.gridColours.gridStroke) //.attr("stroke", "#e2e2e2") .attr("fill", d => { let thisColour; // = d.value ? colourScale(d.value) : settings.gridColours.NanColour; console.log('d: ', d) if (d.value === null && d.wasMeasured === true) { console.log('d.value is null and wasMeasured is true') thisColour = settings.gridColours.missing; console.log('missing data!!!: ', settings.gridColours.missing) console.log('...') } // else if (d.value === null && d.wasMeasured === false) { // console.log('NULL not measured: ', settings.gridColours.notMeasured) // thisColour = settings.gridColours.notMeasured; // } else if (d.value < 0 ) { console.log('not measured: ', settings.gridColours.notMeasured) thisColour = settings.gridColours.notMeasured; } else if (d.value >= 0 && d.wasMeasured === true) { console.log('actual colour: ', colourScale(d.value)) thisColour = colourScale(d.value); } console.log('thisColour: ', thisColour) console.log('...') return thisColour; }) .on("mouseover", (event, d) => { let thisChem = `${d.chem[0]}${d.chem.slice(1).toLowerCase()} (${d.year})`; let hoverText; // = d.value ? `${d.value} exceedances` : settings.tooltip.missingDataLabel; if (d.value === null && d.wasMeasured === true) { console.log('HOVER TEXT MISSING d.value is null and wasMeasured is true') hoverText = settings.tooltip.missingDataText; } else if (d.value < 0 ) { console.log('not measured: ', settings.gridColours.notMeasured) hoverText = settings.tooltip.notMeasuredText; //"Contaminant not measured"; } else if (d.value >= 0 && d.wasMeasured === true) { hoverText = `${d.value} exceedances`; } console.log('...') // 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(` ${thisChem}:
${hoverText}`) .style("left", (event.pageX + deltaX) + "px") .style("top", (event.pageY + deltaY) + "px"); }) .on("mouseout", (d) => { div.transition() //.duration(500) .style("opacity", 0); }); // y-axis g.selectAll(".year") .data(rowNames) .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 + ")"); // x-axis // https://stackoverflow.com/questions/21187329/d3-rotate-x-axis-labels g.selectAll(".contaminant") .data(colNames) .enter().append("text") .text(d => { if (Object.keys(settings.chemDict).length > 0) { return settings.chemDict[d] ? settings.chemDict[d] : d.toLowerCase(); } else return d.toLowerCase(); }) .classed("contaminant", true) .attr("transform", function(d, i) { return "translate(" + ( (i - 1) * gridSize*1) + ", 32)" + "translate(" + gridSize / .5 + ", -50)rotate(-90)"; } ) .style("text-anchor", "start"); g.append("g") .call(legend) return svg.node(); }37:Td19,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", "BENZO(A)PYRENE": "B(a)P", "BUTANOL-N": "Butuanol-N", "BUTANOLS (BUTYL ALCOHOLS)": "Butanols", "BUTYL ACETATE, N-": "Butyl Acetate", "CADMIUM": "Cadmium", "CALCIUM OXIDE (LIME)": "Lime", "CARBON DIOXIDE": "CO2", "CARBON MONOXIDE": "CO", "CHLORINE": "Cl", "CHLORINE DIOXIDE": "ClO2", "CHLOROFORM": "Chloroform", "CHROMIUM": "Chromium", "CHLOROFORM (TRICHLOROMETHANE)": "Chloroform", "COBALT": "Cobalt", "COKE OVENS - % Leaking Doors": "Coke - doors", "COKE OVENS - % LEAKING DOORS": "Coke - doors", "COKE OVENS - % LEAKING OFF-TAKES": "Coke - offtakes", "COKE OVENS - % Leaking Off-takes": "Coke - offtakes", "COKE OVENS - % Leaking Topside Port Lids": "Coke - lids", "COKE OVENS - % LEAKING TOPSIDE PORT LIDS": "Coke - lids", "COPPER": "Copper", "DIOXIN AND FURAN": "Dioxin/Furan", "DIOXIN AND FURANS": "Dioxin/Furan", "DUSTFALL": "Dustfall", "ETHANOL": "Ethanol", "ETHYL-3-ETHOXYPROPRIONATE": "Ethyl-3E", "ETHYLBENZENE": "Ethylbenzene", "ETHYLENE": "Ethylene", "ETHYLENE GLYCOL BUTYL ETHER": "Eth glycol butyl", "ETHYLENE GLYCOL MONOBUTYL ETHER": "Eth glycol monobutyl", "FERRIC OXIDE": "Ferric oxide", "FORMALDEHYDE": "Formaldehyde", "HYDROCARBONS (GASEOUS)": "Hydrocarbons", "HYDROCHLORIC ACID (MURIATIC ACID)": "HCl(aq)", "HYDROCHLORIC ACID": "HCl(aq)", "HYDROGEN CHLORIDE GAS (ANHYDROUS)": "HCl anhydrous", "HYDROGEN CHLORIDE": "HCl", "HYDROGEN SULFIDE": "H2S", "IRON": "Iron", "IRON OXIDE": "Iron Oxide", "ISOBUTYL ACETATE": "Isobutyl acetate", "ISOBUTANOL": "Isobutanol", "LEAD": "Lead", "MANGANESE": "Mn", "MERCURY": "Mercury", "METHANE GAS": "CH3", "METHYLENE CHLORIDE": "DCM", "METHYL ISOBUTYL KETONE": "MIBK", "MINERAL SPIRITS": "Mineral spirits", "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", "OPACITY (DAYS EXCEEDANCES OCCURRED)": "Opacity", "ORGANIC MATTER": "Organic matter", "OXYGEN - LOW": "Oxygen - low", "PHENOL": "Phenol", "PHOSPHORIC ACID": "Phosphoric acid", "STODDARD SOLVENT": "Stoddard solvent", "SULPHUR DIOXIDE": "SO2", "SULPHURIC ACID": "H2SO4", "SUSPENDED PARTICULATE MATTER": "Particulates", "SUSPENDED PARTICULATE MATTER (< 44 ΜM DIAMETER)": "Part. (< 44 mm)", "SUSPENDED PARTICULATE MATTER (< 44 µm diameter)": "Part. (< 44 um)", "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": "Part. suspensions", "TRICHLOROETHYLENE": "TCE", "TRIMETHYL AMINE": "TMA", "VIBRATION": "Vibration", "VINYL CHLORIDE MONOMER (VCM)": "VCM", "VINYL CHLORIDE": "VCM", "VISIBLE EMISSION": "Vis. emission", "XYLENE": "Xylene", "XYLENES": "Xylenes" })38:T1280,plot_heatMap = (chartData, settings) => { // Derive plot dimensions from settings const w = 1 * (settings.width - settings.margin.left - settings.margin.right); const gridSize = Math.floor(w / settings.types.length); const h = gridSize * settings.years.length + settings.margin.top + settings.margin.bottom; // Define the plot scales const colourScale = d3.scaleSequential(d3.interpolateBuPu) // .domain([0, d3.max(data_air_hm, d => d.value)]) .domain([0, 500]); const y_scale = d3.scaleBand() // .domain(d3.range(1745)) .domain(settings.years) .range([settings.height, 0]); const axisScale = d3.scaleSqrt() //d3.scaleLinear() .domain(colourScale.domain()) .range([0, w]); // Define the legend const legend = g => { g.attr("transform", `translate(0, ${h - settings.margin.bottom - settings.legendBarHeight })`) .append("rect") .attr("width", w) .attr("height", settings.legendBarHeight) .style("fill", "url(#linear-gradient)") g.call(axisBottom) }; // Called by legend const axisBottom = g => { g.classed("axis axis--bottom", true) .attr("transform", `translate(0, ${h - settings.margin.bottom - settings.legendBarHeight})`) .call(d3.axisBottom(axisScale) .ticks(settings.width / 80) .tickSize(settings.legendBarHeight) //.tickFormat(d3.format(".0%")) ) .select(".domain") .remove() } // Construct the SVG const svg = d3.select(DOM.svg(settings.width, h)) //width=1152 .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(${settings.margin.left}, ${settings.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(chartData) .enter().append("rect") .attr("x", (d, i) => { let ihat; ishift = (d.chem === settings.types[0]) ? i : ishift; ihat = i - ishift; return ihat * gridSize; }) .attr("y", (d) => { let y = d.year - settings.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) .style("left", (event.pageX + deltaX) + "px") .style("top", (event.pageY + deltaY) + "px"); }) .on("mouseout", (d) => { div.transition() //.duration(500) .style("opacity", 0); }); // y-axis g.selectAll(".year") .data(settings.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(settings.types) .enter().append("text") .text(d => { //console.log(d) if (Object.keys(settings.chemDict).length > 0) { return settings.chemDict[d]; } else return d; }) .classed("chem", true) .attr("transform", function(d, i) { return "translate(" + ( i * gridSize) + ",0)" + "translate(" + gridSize / 2 + ", -6)rotate(-90)"; } ) .style("text-anchor", "start"); g.append("g") .call(legend) return svg.node(); }39:[{"id":"b39f00c0c098f9ae381fd5e5507bfd01628dc74be952b3733ba31b14bad35f7030f7e6974ccbbe42961945a1bd9b268a5d69505518d9b5bcf9301e2a8b658ed7","href":"https://static.observableusercontent.com/files/b39f00c0c098f9ae381fd5e5507bfd01628dc74be952b3733ba31b14bad35f7030f7e6974ccbbe42961945a1bd9b268a5d69505518d9b5bcf9301e2a8b658ed7","name":"ecr_air_heatmap_2014_2020_std2.csv","type":"text/csv","lastModified":1643996359410.909,"size":10738},{"id":"91ad72f91116e02af11513632c79d99c41e35a96af44063570e615376b6a88a2c013d313cb64a46a015952bbf876a8fef280f27cf7f287971a7e502a76f1b954","href":"https://static.observableusercontent.com/files/91ad72f91116e02af11513632c79d99c41e35a96af44063570e615376b6a88a2c013d313cb64a46a015952bbf876a8fef280f27cf7f287971a7e502a76f1b954","name":"enviromental_compliance_counts.json","type":"application/json","lastModified":1643745738249.695,"size":3160}] 2d:{"title":"Environmental Compliance datasets","cells":[{"id":0,"value":"# Environmental Compliance datasets\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":893,"value":"# Air Emissions","pinned":false,"hidden":false,"mode":"md"},{"id":1060,"value":"## Data table [cleaned]\nHeader name inconsistencies and column value inconsistencies have been removed, but there are still data gaps.","pinned":false,"hidden":false,"mode":"md"},{"id":935,"value":"data1 = data_air","pinned":true,"hidden":false,"mode":"ojs"},{"id":2357,"value":"select Contaminant, \"Exceedance Start Date\", \"No. of Exceedances\", \"Quantity Minimum*\" ,year\nfrom data_air\nwhere \"No. of Exceedances\" = '' and 'Quantity Minimum*' <> ''\norder by Contaminant","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:data_air"},{"id":321,"value":"## Heatmap\n\nThis heatmap shows the total number of exceedances in each year for 83 different contaminants. ","pinned":false,"hidden":false,"mode":"md"},{"id":1870,"value":"plot_heatMapGeneric(data_air_hm, settingsHeatMapAll)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1855,"value":"settingsHeatMapAll = ({\n \"margin\": ({ top: 135, left: 45, right: 15, bottom: 150 }),\n \"width\": 1200,\n \"height\": 1000,\n \"legendBarHeight\": 15,\n \"chemDict\": chem_dict,\n \"tooltip\": ({missingDataText: \"Data missing\", notMeasuredText: \"Contaminant not measured\"}),\n \"gridColours\": ({\"gridStroke\": \"gray\", \n \"notMeasured\" : \"#d3d3d3\",\n \"missing\": \"#FFFF00\"\n })\n})\n// yellow: \"#FFFF00\" ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2313,"value":"select *\nfrom data_air_grouped\norder by period\n--where chem ilike '%lime%'","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:data_air_grouped"},{"id":1062,"value":"## Summary table","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"viewof summary_data = SummaryTable(data_air_grouped , {label: \"All columns\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":" ","pinned":true,"hidden":false,"mode":"html"},{"id":827,"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":816,"value":"## Treemap","pinned":false,"hidden":false,"mode":"md"},{"id":98,"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":62,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"data = FileAttachment(\"enviromental_compliance_counts.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"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":263,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"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":18,"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":5,"value":"### Refs\nhttps://observablehq.com/@agomide/treemap \nhttps://observablehq.com/@d3/nested-treemap ","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"md`## Extras`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"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`