The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Published
Edited
May 16, 2022
1 star
maharashtra_districts_centroid = {
const data = maharashtra_districts;
data.features = data.features.map((f) => {
const centroid = turf.centerOfMass(f);
f.properties.long = centroid.geometry.coordinates[0];
f.properties.lat = centroid.geometry.coordinates[1];
return f;
});
return data;
}
// grouping the data by district using d3.group
hh_scheduled_tribe_2011_districts = d3.group(
// pointing to our source data set
hh_scheduled_tribe_2011,
// identifying the attribute we wish to use for our groupings, namely - combining all data from the same district
(d) => d.district_code
)
// naming this cell as 'reference' because it will generate the reference dataset that we'll use in a next step to merge our aggregated district values back into our map visualization.
// we need to start by transformed our grouped data into an array so that we can use the map method
reference = [...Array.from(hh_scheduled_tribe_2011_districts)].map(
/// we create a variable name for the entries we're after
(entriesInDistrict) => {
// we declare two values that we'll later return. these values are defined in terms of the newly-defined variable 'entriesInDistrict', and we specify that the first attribute is district code and the second one for the summed value of entries in the district
const district = entriesInDistrict[0];
const value = d3.sum(
entriesInDistrict[1].map(
// because we are interested to explore all the available entries, we'll further map this variable to another function (which we'll write in a moment). This will allow us to introdce a selection input.
(entry) =>
entry[prettified_keys[select_value]]
)
);
return {
distcode: district,
value: value
};
}
)
// start by grabbing the 'key' values from our dataset, which we will use as our labels [pretty printing]
prettified_keys = Object.keys(hh_scheduled_tribe_2011[0])
// we remove the top 12 entries because they aren't variables of interest for our visualization
.splice(13)
// use the reduce method to change the presentation of titles
.reduce((obj, key) => {
// use re
obj[key.replace(/_/g, " ")] = key;
//obj[_.startCase(_.capitalize(key.replace(/_/g, " ")))] = key;
return obj;
}, {})
// in-built Observable Input
viewof select_value = Inputs.select(Object.keys(prettified_keys), {
value: "Number of households with condition of census house as total total"
})
function mergeData(featureCollection, dataArray, property) {
return featureCollection.features.map((f) => {
const match = dataArray.find((r) => r[property] === f.properties[property]);
if (match) {
f.properties = {
...f.properties,
...match
};
}
return f;
});
}
hh_scheduled_tribe_2011_districts_merged = mergeData(
maharashtra_districts_centroid,
reference,
"distcode"
)
VegaLite({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 800,
height: 400,
// point to a data source
data: {
values: maharashtra_districts_centroid.features,
format: {
type: "json"
}
},
/// using layers allow us to stack in multiple visual elements
layer: [
{
// draw the map
mark: {
type: "geoshape",
fill: "#fff",
stroke: "#757575",
strokeWidth: 0.5
}
},
{
/// add a circle to the middle of each polygon
mark: {
type: "circle",
size: 20,
color: "grey"
},
encoding: {
// specifies circle location
longitude: { field: "properties.long", type: "quantitative" },
latitude: { field: "properties.lat", type: "quantitative" },
size: { value: 20 },
opacity: { value: 0.6 }
}
},
{
// name each polygon
mark: {
type: "text",
dy: -12
},
encoding: {
text: { field: "properties.distname", type: "nominal" },
longitude: { field: "properties.long", type: "quantitative" },
latitude: { field: "properties.lat", type: "quantitative" }
}
}
]
})
VegaLite({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 800,
height: 400,
// point to a data source
data: {
values: hh_scheduled_tribe_2011_districts_merged,
format: {
type: "json"
}
},
/// layers allow us to stack in multiple visual elements
layer: [
{
// draw the map
mark: {
type: "geoshape",
fill: "FFFF",
stroke: "#757575",
strokeWidth: 0.5
}
},
{
// here we will try to add a fill to each polygon the reflects the number of households with a good roof
mark: {
type: "geoshape"
},
encoding: {
longitude: { field: "properties.long", type: "quantitative" },
latitude: { field: "properties.lat", type: "quantitative" },
fill: {
field: "properties.value",
type: "quantitative",
scale: { scheme: "blues" }
},
opacity: { value: 0.9 },
tooltip: [
{ field: "properties.distname", type: "nominal" },
{ field: "properties.value", type: "quantitative" }
]
}
},
{
/// add a circle to the middle of each polygon
mark: {
type: "circle",
size: 20,
color: "orange"
},
encoding: {
// specifies circle location
longitude: { field: "properties.long", type: "quantitative" },
latitude: { field: "properties.lat", type: "quantitative" },
size: { value: 20 },
opacity: { value: 0.6 }
}
},
{
// name each polygon
mark: {
type: "text",
dy: -12
},
encoding: {
text: { field: "properties.distname", type: "nominal" },
longitude: { field: "properties.long", type: "quantitative" },
latitude: { field: "properties.lat", type: "quantitative" }
}
}
]
})
layered_map = {
const places_circles = vl
.markCircle({ size: 20, color: "grey" })
.data(maharashtra_districts_centroid.features)
.encode(
vl.longitude().fieldQ("properties.long"),
vl.latitude().fieldQ("properties.lat")
);
const places_text = vl
.markText({ dy: -10 })
.data(maharashtra_districts_centroid.features)
.encode(
vl.longitude().fieldQ("properties.long"),
vl.latitude().fieldQ("properties.lat"),
vl.text().fieldN("properties.distname")
);
const counties = vl
.markGeoshape({ fill: null, stroke: "#757575", strokeWidth: 0.5 })
.data(maharashtra_districts_centroid.features);
return vl
.layer(counties, places_text, places_circles)
.height(400)
.width(800)
.view({ stroke: "transparent" }) // removes chart border
.render({ renderer: "svg" });
}
layered_map_choropleth = {
const places_circles = vl
.markCircle({ size: 20, color: "orange" })
.data(maharashtra_districts_centroid.features)
.encode(
vl.longitude().fieldQ("properties.long"),
vl.latitude().fieldQ("properties.lat")
);
const places_text = vl
.markText({ dy: -10 })
.data(maharashtra_districts_centroid.features)
.encode(
vl.longitude().fieldQ("properties.long"),
vl.latitude().fieldQ("properties.lat"),
vl.text().fieldN("properties.distname")
);
const districts = vl
.markGeoshape({ fill: null, stroke: "#757575", strokeWidth: 0.5 })
.data(maharashtra_districts_centroid.features);
const choropleth = vl
.markGeoshape({
stroke: "#757575",
strokeWidth: 0.5
})
.data(hh_scheduled_tribe_2011_districts_merged)
.encode({
fill: {
field: "properties.value",
type: "quantitative",
scale: { scheme: "blues" }
},
tooltip: [
{ field: "properties.distname", type: "nominal" },
{ field: "properties.value", type: "quantitative" }
]
});
return vl
.layer(districts, choropleth, places_text, places_circles)
.height(400)
.width(800)
.view({ stroke: "transparent" }) // removes chart border
.render({ renderer: "svg" });
}
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.
