Public
Edited
Jun 6, 2023
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
topojson = require("topojson")
Insert cell
Insert cell
inter_map = d3.json("https://raw.githubusercontent.com/Josh-Everts/MIMS-Capstone/main/visualizations/Intro_Grid_Mix/egrid_sbrgn.json")
Insert cell
subregions = topojson.feature(inter_map, inter_map.objects.subregion).features
Insert cell
gridmix = d3.json("https://raw.githubusercontent.com/Josh-Everts/MIMS-Capstone/main/visualizations/Intro_Grid_Mix/gridmix.json")
//Gridmix data from EPA eGrid sorted into categories (percent in each category)
Insert cell
axesDomain = ["Renewable", "Non-Renewable", "Nuclear"]//, "Other"] -- other is left out becaue does not account for much
Insert cell
function checkRegion(region) {
return region === selectedRTO;
}
Insert cell
Insert cell
Insert cell
margin = ({top: 60, right: 30, bottom: 30, left: 80})
Insert cell
width2 = width
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
angleSlice = Math.PI * 2 / axesLength
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mini_rScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, mini_radius])
Insert cell
mini_radarLine = d3.lineRadial()
.curve(d3.curveCardinalClosed)
.radius(d => mini_rScale(d))
.angle((d, i) => i * angleSlice)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
allCharts = {
//Resizing based on screen width
if (width > 1000) {
var svg = d3.create("svg")
.attr("width", 928)
.attr("height", height);
} else {
var svg = d3.create("svg")
.attr("width", width2/1.2)
.attr("height", height);
}

// Plot radar chart
svg.append("g")
.attr("transform", `translate(${chartWidth/1.2}, ${height/6})`)
.attr("class", "radar")
.call(makeRadarChart);

//Plot map
svg.append("g")
.attr("class", "map")
.call(makeInterconnectionMap);

//Labels
if (selectedRTO !== null) {
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7)
.style('font', '12px sans-serif')
.text(` Renewable: ${gridmix[region_data.findIndex(checkRegion)].values[0]}% `);
svg.append('text')
.attr('x', chartWidth )
.attr('y', height - height/3.7 + miniMargin * 2.5)
.style('font', '12px sans-serif')
.text(` Non-Renewable: ${gridmix[region_data.findIndex(checkRegion)].values[1]}% `);
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7 + miniMargin * 5)
.style('font', '12px sans-serif')
.text(` Nuclear: ${gridmix[region_data.findIndex(checkRegion)].values[2]}% `);
svg.append('text')
.attr('x', chartWidth )
.attr('y', height - height/3.7 + miniMargin * 7.5)
.style('font', '12px sans-serif')
.text(` Other: ${gridmix[region_data.findIndex(checkRegion)].values[3]}% `)
} else {
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7)
.style('font', '12px sans-serif')
.text(` Renewable: ${gridmix[27].values[0]}% `);
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7 + miniMargin * 2.5)
.style('font', '12px sans-serif')
.text(` Non-Renewable: ${gridmix[27].values[1]}% `);
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7 + miniMargin * 5)
.style('font', '12px sans-serif')
.text(` Nuclear: ${gridmix[27].values[2]}% `);
svg.append('text')
.attr('x', chartWidth)
.attr('y', height - height/3.7 + miniMargin * 7.5)
.style('font', '12px sans-serif')
.text(` Other: ${gridmix[27].values[3]}% `)
}


return svg.node();
}
Insert cell
Insert cell
Insert cell
//ff_data_csv = FileAttachment("subregions_ff2@1.csv").csv()
Insert cell
// sequence = [
// {start: 0, end:4},
// {start: 4, end:8},
// {start: 8, end:12},
// {start: 12, end:16},
// {start: 16, end:20},
// {start: 20, end:24},
// {start: 24, end:28},
// {start: 28, end:32},
// {start: 32, end:36},
// {start: 36, end:40},
// {start: 40, end:44},
// {start: 44, end:48},
// {start: 48, end:52},
// {start: 52, end:56},
// {start: 56, end:60},
// {start: 60, end:64},
// {start: 64, end:68},
// {start: 68, end:72},
// {start: 72, end:76},
// {start: 76, end:80},
// {start: 80, end:84},
// {start: 84, end:88},
// {start: 88, end:92},
// {start: 92, end:96},
// {start: 96, end:100},
// {start: 100, end:104},
// {start: 104, end:108},
// {start:108, end:112}
// ]
Insert cell
// mutable fossil_fuel_data = ff_data_csv.slice(sequence[region_data.findIndex(checkRegion)].start, sequence[region_data.findIndex(checkRegion)].end)
Insert cell
// ff_data_domain = ["Gas", "Coal", "Oil", "Other Fossil"]
Insert cell
// renewables_data = FileAttachment("subregions_renewable.csv").csv()
Insert cell
// ff_bar = {
// const margin = ({top: 10, right: 30, bottom: 30, left: 60})
// const width = 300 - margin.left - margin.right
// const height =200 - margin.top - margin.bottom
// const heights = [height, height, height, height]
// const container = d3.select(DOM.svg(width+margin.left+margin.right,
// height+margin.top*3+margin.bottom*3))

// const barchart = container
// .append("svg")
// .attr("width", width + margin.left + margin.right)
// .attr("height", height + margin.top*2 + margin.bottom*3)
// .append("g")
// .attr("transform", "translate(" + margin.left + "," + margin.bottom + ")")

// //xAxis
// const x = d3.scaleBand()
// .range([ 0, width ])
// .domain(fossil_fuel_data.map(function(d) { return d.Category; }))
// //.domain(ff_data_domain)
// .padding(0.2);
// barchart.append("g")
// .attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(x))
// .selectAll("text")
// .attr("transform", "translate(-10,0)rotate(-45)")
// .style("text-anchor", "end");

// //yAxis
// const y = d3.scaleLinear()
// .domain([0, 50])
// .range([ height, 10])

// barchart.append("g")
// .attr("transform", `translate(${width}), 0`)
// .call(d3.axisLeft(y))
// .call(g => g.append("text")
// .attr("x", -25)
// .attr("y", 3)
// .attr("fill", "black")
// .attr("text-anchor", "start")
// .text("↑ Contribution (%)"))
// barchart.append("g")
// .call(d3.axisLeft(y));

// // Bars

// barchart.selectAll(".bar")
// .data(fossil_fuel_data)
// .enter()
// .append("rect")
// .attr("x", function(d) { return x(d.Category); })
// .attr("y", function(d) { return y(d.Contribution); })
// .attr("width", x.bandwidth())
// .attr("height", function(d) { return height - y(d.Contribution); })
// .attr("fill", "#3B77AF")

// // const yTextPadding = 20;
// // barchart.selectAll(".bartext")
// // .data(fossil_fuel_data)
// // .enter()
// // .append("text")
// // .attr("class", "bartext")
// // .attr("text-anchor", "middle")
// // .style("font", "10px sans-serif")
// // .attr("fill", "white")
// // .attr("x", function(d,i) {
// // return ((width/8.25*i) - (x.bandwidth()/4) + (margin.left))///1.75));
// // })
// // .attr("y", function(d,i) {
// // return y(d.Contribution)+yTextPadding;
// // // return height-y(d.Contribution)+yTextPadding;
// // })
// // .text(function(d){
// // return d.Contribution;
// // });
// //Add title
// const title = container
// .append('text')
// .attr('x', 0)
// .attr('y', 15)
// .style("font", "14px sans-serif")
// .text(`Non-Renewable Contribution Sources (${selectedRTO})`)

// // container.selectAll("text.chartTitle")
// // .data([1])
// // .join("text")
// // .attr("class", "chartTitle")
// // .attr("font-family", "sans-serif")
// // .attr("font-size", 14)
// // .attr("fill", "black")
// // .attr("y", 30)
// // .attr("x", 10)
// // .text('2019 Global Annual Average PM 2.5 and Percent Attributable Mortality');

// return container.node();


// }
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more