28:null 29:["$","title",null,{"children":"CO2.js - Playground | Green Web Foundation | Observable"}] 2e:Ta13,viewof form = formModels.models.startsWith("Sustainable Web Design") ? guard( ({ template }) => Inputs.form( { bytes: Inputs.number({ value: 100000, label: "Bytes" }), dataReloadRatio: Inputs.range([0, 1], { label: "Data reload ratio", step: 0.01, value: formModels.models.endsWith("4") ? 0 : 0.02, disabled: formModels.models.startsWith("Sustainable Web Design") ? false : true }), firstVisitPercentage: Inputs.range([0, 1], { label: "First visit percentage", step: 0.01, value: formModels.models.endsWith("4") ? 1 : 0.75, disabled: formModels.models.startsWith("Sustainable Web Design") ? false : true }), returnVisitPercentage: Inputs.range([0, 1], { label: "Return visit percentage", step: 0.01, value: formModels.models.endsWith("4") ? 0 : 0.25, disabled: formModels.models.startsWith("Sustainable Web Design") ? false : true }), greenHostingFactor: Inputs.range([0, 1], { label: "Green hosting factor", step: 0.1, value: 0, description: "This is a test.", disabled: formModels.models.startsWith("Sustainable Web Design") && formModels.models.endsWith("4") ? false : true }), greenHost: Inputs.radio(["True", "False"], { label: "Uses a green web host", value: "False", disabled: formModels.models.endsWith("4") ? true : false }) }, { template } ), { resetDefault: { bytes: 1000000, greenHost: "False", dataReloadRatio: 0.02, firstVisitPercentage: 0.75, returnVisitPercentage: 0.25, greenHostingFactor: 0 } } ) : guard( ({ template }) => Inputs.form( { bytes: Inputs.number({ value: 1000000, label: "Bytes" }), greenHost: Inputs.radio(["True", "False"], { label: "Uses a green web host", value: "False" }) }, { template } ), { resetDefault: { bytes: 1000000, greenHost: "False" } } )2f:T6d3,viewof formGrid = formModels.models.startsWith("Sustainable Web Design") ? guard( ({ template }) => countryRadios === "Input grid intensity" ? Inputs.form( { dataCenter: Inputs.range([0, 1000], { label: "Data center grid intensity", step: 0.01, value: averageIntensity.WORLD }), network: Inputs.range([0, 1000], { label: "Network center grid intensity", step: 0.01, value: averageIntensity.WORLD }), device: Inputs.range([0, 1000], { label: "Device center grid intensity", step: 0.01, value: averageIntensity.WORLD }) }, { template } ) : Inputs.form( { dataCenter: Inputs.select([...getCountryNames()], { label: "Data center grid intensity", value: "WORLD" }), network: Inputs.select([...getCountryNames()], { label: "Network center grid intensity", value: "WORLD" }), device: Inputs.select([...getCountryNames()], { label: "Device center grid intensity", value: "WORLD" }) }, { template } ), { resetDefault: countryRadios === "Input grid intensity" ? { dataCenter: 442, network: 442, device: 442 } : { dataCenter: "WORLD", network: "WORLD", device: "WORLD" } } ) : Inputs.form("")30:T816,function estimateEmissions() { let model = "swd"; let results = {}; if (formModels.models === "OneByte") { model = "1byte"; } let swdmVersion = formModels.models.startsWith("Sustainable Web Design") && formModels.models.endsWith("version 3") ? 3 : 4; const co2Emissions = new tgwf.co2({ model: model, results: segments ? "segment" : "", version: swdmVersion || null }); const greenHost = form.greenHost === "True" ? true : false; if (formModels.models.startsWith("Sustainable Web Design")) { const options = { dataReloadRatio: form.dataReloadRatio, firstVisitPercentage: form.firstVisitPercentage, returnVisitPercentage: form.returnVisitPercentage, greenHostingFactor: form.greenHostingFactor, gridIntensity: { dataCenter: countryRadios === "Input grid intensity" ? formGrid.dataCenter : { country: countryNametoCode(formGrid.dataCenter) }, network: countryRadios === "Input grid intensity" ? formGrid.network : { country: countryNametoCode(formGrid.network) }, device: countryRadios === "Input grid intensity" ? formGrid.device : { country: countryNametoCode(formGrid.device) } } }; const swdPerByteEstimate = co2Emissions.perByteTrace( form.bytes, greenHost, options ); const swdPerVisitEstimate = co2Emissions.perVisitTrace( form.bytes, greenHost, options ); const perByteCO2 = segments ? swdPerByteEstimate.co2.total : swdPerByteEstimate.co2; const perVisitCO2 = segments ? swdPerVisitEstimate.co2.total : swdPerVisitEstimate.co2; results = { co2: { perByte: perByteCO2.toFixed(5), perVisit: perVisitCO2.toFixed(5) }, trace: { perByte: swdPerByteEstimate, perVisit: swdPerVisitEstimate } }; } if (formModels.models === "OneByte") { results = co2Emissions.perByte(form.bytes, greenHost).toFixed(5); } return results; }31:T4a1,function guard(fn, options = {}) { const { resetLabel = 'Reset', resetDefault = {}, required = false, width = 'fit-content', justify = 'start' } = options; const onReset = () => { value = resetDefault; input.value = value; reset.disabled = true; wrapper.dispatchEvent(new Event('input', { bubbles: true })); }; const onUpdate = () => { value = input.value; wrapper.dispatchEvent(new Event('input', { bubbles: true })); }; const reset = htl.html`

${k}

${k}

System segment totals

Embodied emissions

Operational emissions

Emissions by visit type

System segment totals

Embodied emissions

Operational emissions

perByte

perVisit