Public
Edited
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
topojson = require("topojson-client@3")
Insert cell
states = FileAttachment("states.json").json()
Insert cell
states_features = topojson.feature(states, states.objects.states)
Insert cell
csv_data = d3.csvParse(await FileAttachment("iowa_counties.csv").text(),({FIPS, FEMALES, POP2010}) => [FIPS, [+FEMALES, +FEMALES/+POP2010]])
Insert cell
//this is how to take the values of a variable (column) from all variables you created from the csv file
femalepct = Array.from(csv_data.values(), d => d[1][1])
Insert cell
//this is how you map the id column to the values. We will use this for joining with topojson later.
data = Object.assign(new Map(csv_data), {title: ["Females", "Female Pct"]})
Insert cell
quantile = d3.scaleQuantile()
.domain(femalepct)
.range(["white", "#99d594", "green"])
Insert cell
naturalbreaks = simple.ckmeans(femalepct, 3).map(v => v.pop())
Insert cell
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "#99d594", "green"])
Insert cell
quantize = d3.scaleQuantize()
.domain([d3.min(femalepct),d3.max(femalepct)])
.range(["#fde0dd", "#fa9fb5", "#c51b8a"])
Insert cell
quantize.domain()
Insert cell
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2])
.range(["white", "#99d594", "green"])
Insert cell
getSumOfAbsoluteDeviationsFromMedian(femalepct)
Insert cell
getSumOfSquaredDifferenceFromMean(femalepct)
Insert cell
//IT WORKS!!!
GADF_GVF = calculateGADF_GVF(femalepct, quantizeBreakIDs)
Insert cell
//TODO: there is a bug in the data
quantizeBreakIDs = getBreakIDs(femalepct, quantize.domain())
Insert cell
quantileGADF_GVF = classifications(femalepct, 3, 11)
Insert cell
// Convert your array into a format that Plotly can use more directly
formattedData = quantileGADF_GVF.map(d => ({x: d[0], y: d[2]}));
Insert cell
// Create the line chart
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(formattedData, {x: "x", y: "y"}) // Adjusted to use the mapped data
]
})
Insert cell
classifications = function(mydata, minNumOfC, maxNumOfClas){
let quantileArray = [];
for (let i = minNumOfC; i <= maxNumOfClas; i++) {
const mycolor = d3.schemeSpectral[i];
const nbreaks = simple.ckmeans(mydata, i).map(v => v.pop());
const jenks = d3.scaleThreshold().domain(nbreaks).range(mycolor);
const nBreakIDs = getBreakIDs(mydata, jenks.domain());
//console.log(jenks.domain());
const gadf_gvf = calculateGADF_GVF(mydata, nBreakIDs);
quantileArray.push([i, gadf_gvf[0], gadf_gvf[1]]);
}
return quantileArray;
}
Insert cell
getBreakIDs = function(data, breaks){
let breakids = [];
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < breaks.length-1; j++) {
if(data[i].toFixed(5) == breaks[j].toFixed(5))
breakids.push(i);
}
}
return breakids;
}
Insert cell
//calculate the sum of absolute devisations from median
getSumOfAbsoluteDeviationsFromMedian = function(data){
let ADAM = 0;
let median = d3.median(data)
for (let i = 0; i < data.length; i++) {
ADAM += Math.abs(data[i] - median);
}
return ADAM;
}
Insert cell
//This method is used in calculating the sum of squared difference from the mean
getSumOfSquaredDifferenceFromMean = function(data){
let GVF_dev = 0;
let mean = d3.mean(data)
for (let i = 0; i < data.length; i++) {
GVF_dev += Math.pow((data[i] - mean), 2);
}
return GVF_dev;
}
Insert cell
calculateGADF_GVF = function(data, breakIDs){

// The measure of central tendency using the median.
let GADF = NaN;
// the sum of absolute deviations about class medians for a particular number of
// classes
let ADCM = 0;
// the sum of absolute deviations about the median for the entire data set.
let ADAM = 0;

// The measure of central tendency using the mean. The error in a class is the
// sum of squared deviations about the mean.
let GVF = 0;
// the sum of squared difference from the mean for a particular number of
// classes
let SSDcMean = 0;
// the sum of squared difference from the mean for the entire data set.
let SSDAMean = 0;
ADAM = getSumOfAbsoluteDeviationsFromMedian(data);
SSDAMean = getSumOfSquaredDifferenceFromMean(data);
for (let i = 0; i < breakIDs.length; i++) {
let min_idx = breakIDs[i];
let max_idx = -1;
if (i < breakIDs.length - 1)
max_idx = breakIDs[i + 1];
else
max_idx = data.length - 1;
let data_class = [] ;
let cnt = 0;
for (let j = min_idx; j < max_idx; j++) {
data_class.push(data[j]);
}
// sum of all ADCMS for each classFs
if (data_class.length != 0) {
ADCM += getSumOfAbsoluteDeviationsFromMedian(data_class);
SSDcMean += getSumOfSquaredDifferenceFromMean(data_class);
}
}
GADF = 1 - (ADCM / ADAM);
GVF = 1 - (SSDcMean / SSDAMean);
return [GADF, GVF];
}
Insert cell
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
Insert cell

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.
Learn more