//This workbook is based off the same data as forked. The reason for that is the lack of ability to find suitable attribute data to fit the states as a base line. I did hours of research but either files were too big or they did not contain the correct geographic information. The comments provided however will allow for seemless transition of data if I can get assistance finding data.
//Initially to create the baseline of maps the use of states_simple.json as a base layer is critical. The next layer which contains the point is added using QGIS. We press on vector -> Geometry Tools -> Centroids. Then clicking run will allow centroids to be created as a layer on the states to which we can later assign values as attributes.
height=610
// the next two cells denote the height and width of the map projection in Observable
width=975
path_points=d3.geoPath().projection(projection)
//This path_points equation creates a link between our points that we get from our states48_points.geojson and the map projected.
path_basemap=d3.geoPath().projection(projection)
//This path_basemap equation creates a link between our states baseline that we get from our states_simple.json and the map projected.
//This piece of code creates the radius of the points. In this instance it's going to represent the 1999 population for each state. The classification method used is naturalbreaks. Hence the circles will be visualized in 4 different sizes, each of which represent one natural break. The radius implies that the shape of the points will be a circle.
//This function uses a math package to calcuate the area of each one of the circles. This is used for the sizes of the centroids in the map.
radiusArray=[3,10,23,34]
//This piece of code shows an array of radiuses of 4 circles. I adjusted the sizes to be proportional to the naturalbreaks created below (2M, 7M, ... etc).
//This creates correct labels in the legend for the circles based off the areas.
colors=d3.scaleThreshold()
.domain(naturalbreaks)
.range(GnBu)
//As above in the "radius" expression, this "colors" expression uses natural breaks and the GnBu color scheme defined below to assign color to classes.
GnBu=["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"]
//This cell sets the colour scheme for the circles. Using colorbrewer.org, I chose a sequential Green Blue.
//After using this formula, each attribute will contain the square root of the value of the specified attribute for each feature in the points object. The square root is used to not only normalize the data but also because it makes the data easier to visualize.
attributeName=("POP1999")
//This cell is where the column or variable we want to analyze is defined. In this instance we are looking at the population from 1999 for each state.
idName="STATE_NAME"
//This defines the id we are using to analyze the attribute. In this instance State_Name is the primary key.
//Imports the polygon base map data. This is for the outlines of the states.
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.