Public
Edited
Apr 30
1 fork
Insert cell
md`# Big Spirit Lake Map`
Insert cell
//create and plot legend object
symbolLegend = plot({
autosize: "pad",
data: [
{
name: "values",
values: circleLabels
}
],
scales: [
{
name: "symbolColor",
type: "ordinal",
domain: {data: "values", field: "data"},
range: color
},
{
name: "symbolSize",
type: "ordinal",
domain: circleLabels,
range: sizeArrayForLegend
}
],
legends: [Object.assign({offset: 0}, symbolLegendDef)]
})
Insert cell
graduatedSymbols = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// BASEMAP SYMBOLOGY
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.bigspiritlake))
.attr("fill", "#2596be")// fill colors of the shapefile polygons here
.attr("stroke", "black")
.attr("stroke-width", 0.7)// Width of the outline of the point symbols
.attr("d", path_basemap);// this is where the basemap is created, make sure the object points to the topoJSON feature, not the file name itself
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.bigspiritlake, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "black") // change the color of the border lines here
.attr("stroke-linejoin", "round") // change the shape for the corners of paths when they are stroked
.attr("d", path_basemap);
// POINT SYMBOL SYMBOLOGY
svg.append("g")
.selectAll("circle")// this is where you can change the shape of the point symbol, make sure to include any new parameters that shape might require.
.data(points.features
.map(d => (d.value = Math.sqrt(d.properties[attributeName]), d))
.sort((a, b) => b.value - a.value))
.join("circle")// update this as well if changing point symbol shape
.attr("transform", d => `translate(${path_points.centroid(d)})`)
.attr("r", d => radius(d.value))
.attr("fill", d => colors(d.value))
.attr("fill-opacity", 0.7)// opacity of point symbols
.attr("stroke", "#000") //change color of point outline
.attr("stroke-width", 0.5)// Width of the outline of the point symbols
.append("title")
.text(d => `${d.properties[idName]} - ${' Blight Class: ' + format(d.properties[attributeName])}`);

return svg.node();
}
Insert cell
symbolLegendDef = {
// DEFINE LEGEND ATTRIBUTES
return {
type: "symbol",
title: "Class of Blight",// Change the title of the legend here
fill: "symbolColor",
size: "symbolSize",
direction: 'Horizontal',
columns: undefined,
rowPadding: 5,
columnPadding: 5,
clipHeight: undefined,
titleOrient: 'Top',
symbolStrokeColor: '#000',// You can define a color for the outlines of the polygons on the legend here.
symbolStrokeWidth: 0.5
};
}
Insert cell
height = 700
Insert cell
width =875
Insert cell
margin=10
Insert cell
path_points = d3.geoPath().projection(projection)
Insert cell
path_basemap = d3.geoPath().projection(projection) //
Insert cell
projection = d3.geoAlbers().fitExtent([[margin, margin], [width - margin, height - margin]], spiritlakeFeatures)
Insert cell
format = d3.format(".0s")
Insert cell
// SCALE FOR MAPPING RADIUS TO ATTRIBUTE
radius = d3.scaleThreshold()
.domain(blightClasses)
.range(radiusArray)
Insert cell
sizeArrayForLegend = Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2))
Insert cell
radiusArray = [2,4,6,8]
Insert cell
circleLabels = Array.from(blightClasses, d=> +format(Math.pow(d, 1)))
Insert cell
// MAPPING COLORS TO POINTS
colors = d3.scaleThreshold()
.domain([0,1,2,3])
.range(color) //this is how colors are mapped to the point symbols based on their classification.
Insert cell
//DEFINE COLOR ARRAY
color = ['#f1eef6','#d7b5d8','#df65b0','#ce1256']
Insert cell
blightClasses = [0,1,2,3]
Insert cell
attribute = Array.from(points.features, d=>+d.properties[attributeName])
Insert cell
attributeName = "bottom_hal"
Insert cell
idName = "notes"
Insert cell
//import the point data (geojson)
points = FileAttachment("spiritpoints.geojson").json()
Insert cell
//import the polygon base map data using the file name of the topoJSON. This is how you will create the basemap.
basepolygons = FileAttachment("bigspiritlake.json").json()
Insert cell
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
Insert cell
topojson = require("topojson-client@3")
Insert cell
import {plot} from '@vega/vega-plot'
Insert cell
d3 = require("d3@5")
Insert cell
spiritlake = FileAttachment("bigspiritlake.json").json() //this line is for the counties line
Insert cell
spiritlakeFeatures = topojson.feature(spiritlake, spiritlake.objects.bigspiritlake) //This line is important for our projection.
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