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()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.