container = html `<div style="height:500px">
<div id="tooltip"></div>
<div id="legend">
${Object.entries(COLORS).map(([key, {label,color}]) => html`<div>
<div class="swatch" style="background:rgb(${color.slice(0,3).join(',')},${color[3]/255})"></div>
<div class="label">
${label}</div>
</div>`)}
</div>
</div>`
coporations = [
'Pepsi',
'Not Pepsi',
'Not Pepsi 2',
'Not Pepsi 3',
'Not Pepsi 4',
]
numCorporations = coporations.length
colors = colorbrewer.Set3[numCorporations]
colorPalette = coporations.map((corp, i) => ({
label: corp,
color: colors[i]
}))
COLORS
turf = require('@turf/turf')
currentGeojson = ({
type: "FeatureCollection",
features: filteredAreas
})
bbox = turf.bbox(currentGeojson)
width = container.getBoundingClientRect().width
height = container.getBoundingClientRect().height
fittedViewport = new deck.WebMercatorViewport({width, height})
currentLatLonZoom = fittedViewport.fitBounds([[bbox[2],bbox[3]],[bbox[0],bbox[1]]], {width, height})
tooltip = container.querySelector("#tooltip")
onHover = {
return function(info) {
const {x, y, object} = info;
console.log(x,y,object)
if (object) {
tooltip.style.top = `${y}px`;
tooltip.style.left = `${x}px`;
tooltip.innerHTML = `
<div><b>Average Property Value </b></div>
<!--<div><div>${object.properties.valuePerSqm} / m<sup>2</sup></div></div>
<div><b>Growth</b></div>
<div>${Math.round(object.properties.growth * 100)}%</div>-->
`;
} else {
tooltip.innerHTML = '';
}
};
}
calculatedHHI = {
let totalSales = Object.values(companySalesFiltered).reduce((acc,val) => acc + val)
return Object.values(companySalesFiltered).reduce((acc, val) => acc + Math.pow(val * 100/totalSales,2),0)
}
Inputs.table(farmCountFiltered)
Inputs.table(companySalesTable)
companySalesFiltered = {
// build dictionary for each company in the area
let companySales = {}
for (let i=0; i < allCompanies.length; i++) {
companySales[allCompanies[i]] = 0
}
for (let i=0; i < filteredPlants.length; i++) {
let salesVolume = filteredPlants[i].properties["Sales Volume (Location)"]
if (!Number.isNaN(salesVolume)) {
companySales[filteredPlants[i].properties["Parent Corporation"]] += salesVolume
}
}
// filter NaN values and return dictionary
return Object.entries(companySales).reduce((filtered, [key, value]) => {
if (!Number.isNaN(value)) {
filtered[key] = value
}
return filtered
}, {})
}
companySalesTable = {
return Object.entries(companySalesFiltered).map(([company, sales]) => ({company, sales}))
}
farmCountFiltered = {
// build dictionary for each company in the area
let farmCounts = {
1: 0,
2: 0,
3: 0,
4: 0
}
let totalFarms = filteredFarms.length
for (let i=0; i < totalFarms; i++) {
farmCounts[filteredFarms[i].properties.plant_access] += 1
}
let percentCaptured = {}
Object.keys(farmCounts).forEach(key => {
percentCaptured[key] = farmCounts[key]/totalFarms
})
let farmsTable = Object.entries(percentCaptured).map(([plantAccess, percentFarms]) => ({plantAccess, percentFarms}))
return farmsTable
}
// do another one showing capture by corporation
// prob need to do this step in python
calculatedData = {
let areas = {
1: 0,
2: 0,
3: 0,
4: 0
}
for (let i=0; i < filteredAreas.length; i++) {
areas[filteredAreas[i].properties.plant_access] += filteredAreas[i].properties.area
}
let totalArea = Object.values(areas).reduce((acc, val) => acc + val, 0)
let percentArea = {}
Object.keys(areas).forEach(key => {
percentArea[key] = areas[key]/totalArea
})
let areasTable = Object.entries(percentArea).map(([plantAccess, percentArea]) => ({plantAccess, percentArea}))
return areasTable
}
COLORS = ({
1:{color: [245, 66, 66, 100], label: 'One Plant'},
2:{color: [237, 218, 7, 100], label: 'Two Plant'},
3:{color: [7, 237, 103, 100], label: 'etc'},
4:{color: [7, 168, 237, 100], label: 'etc'},
plant_color:{color: [255,255,255,255], label: 'Plant'},
farmColor:{color: [140, 3, 252,255], label: 'Farm'}
})
deckgl = {
const mapLayer = new deck.GeoJsonLayer({
data: filteredAreas,
pickable: true,
getFillColor: function(dataRow) {
return COLORS[dataRow.properties.plant_access]
}
})
const plantLayer = new deck.IconLayer({
id: 'icon-layer',
data: poultryPlants,
pickable: true,
iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
iconMapping: {
marker: {x: 0, y: 0, width: 128, height: 128, mask: true}
},
getIcon: d => 'marker',
getPosition: d => d.geometry.coordinates,
getSize: d => 35,
getColor: d => COLORS.plant_color
})
const farmLayer = new deck.IconLayer({
id: 'icon-layer',
data: filteredFarms,
pickable: true,
iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
iconMapping: {
marker: {x: 0, y: 0, width: 128, height: 128, mask: true}
},
getIcon: d => 'marker',
getPosition: d => d.geometry.coordinates,
getSize: d => 15,
getColor: d => COLORS.farmColor
})
return new deck.DeckGL({
// The HTML container to render into
container: container,
// Mapbox settings
// set `map: false` to turn off Mapbox base map
map: mapboxgl,
// This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com
mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
mapStyle: 'mapbox://styles/mapbox/dark-v9',
// Viewport settings
longitude: currentLatLonZoom.longitude,
latitude: currentLatLonZoom.latitude,
zoom: currentLatLonZoom.zoom,
pitch: 0,
bearing: -0,
layers: [
mapLayer,
plantLayer,
farmLayer
],
// this doesn't work?
controller: true,
getTooltip: ({object}) => object && object.properties["Parent Corporation"]
})
}
// tooltip experiment
/*
deckTooltip = new deck.DeckGL({
canvas: 'deck-canvas',
initialViewState: {longitude: -122.45, latitude: 37.78, zoom: 12},
controller: true,
layers: [
new deck.layers.ScatterplotLayer({
data: [
{position: [-122.45, 37.78], message: 'Hover over me'}
],
getPosition: d => d.position,
getRadius: 1000,
getFillColor: [255, 255, 0],
// Enable picking
pickable: true
})
],
getTooltip: ({object}) => object && object.message
});
*/
stateMonopsony = FileAttachment("all_states@3.geojson").json()
filteredAreas = stateMonopsony.features.filter(
row => {
if (selectedStates.includes(row.properties.state)) {
return true
} else {
return false
}
})
allState = stateMonopsony.features.map(feature => feature.properties.state).filter((value, index, array) => array.indexOf(value) === index)
allCompanies = filteredPlants.map(plant => plant.properties["Parent Corporation"]).filter((value, index, array) => array.indexOf(value) === index)
colorbrewer = require('colorbrewer')
geo = require("geotoolbox@latest")
poultry_plants_with_sales@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
plantsGeoSales = geo.coords2geo(poultry_plants_with_sales, { lat: "latitude", lng: "longitude" })
poultryPlants = plantsGeoSales.features.filter(
row => {
if (row.properties["Animals Processed"] === "Chicken" && row.properties.Size === "Large") {
return true
}
else {
return false
}
}
)
filteredPlants = poultryPlants.filter(
row => {
if (selectedStates.includes(row.properties.State)) {
return true
} else {
return false
}
})
farms = FileAttachment("counterglow_geojson@1.geojson").json()
filteredFarms = farms.features.filter(
row => {
if (selectedStates.includes(row.properties.state)) {
return true
} else {
return false
}
})
stateCorpMonopsony = FileAttachment("all_states_with_parent_corp@1.geojson").json()
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.
