d3 = require("d3@5")
topojson = require("topojson-client@3")
states = FileAttachment("states.json").json()
states_features = topojson.feature(states, states.objects.states)
csv_data = d3.csvParse(await FileAttachment("iowa_counties.csv").text(),({FIPS, FEMALES, POP2010}) => [FIPS, [+FEMALES, +FEMALES/+POP2010]])
//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])
//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"]})
quantile = d3.scaleQuantile()
.domain(femalepct)
.range(["white", "#99d594", "green"])
naturalbreaks = simple.ckmeans(femalepct, 4).map(v => v.pop())
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["white", "yellow", "green", "blue", "black"])
quantize = d3.scaleQuantize()
.domain([d3.min(femalepct),d3.max(femalepct)])
.range(["#fde0dd", "#fa9fb5", "#c51b8a"])
quantize.domain()
threshold = d3.scaleThreshold()
.domain([0.05, 0.1, 0.2])
.range(["white", "#99d594", "green"])
getSumOfAbsoluteDeviationsFromMedian(femalepct)
getSumOfSquaredDifferenceFromMean(femalepct)
//IT WORKS!!!
GADF_GVF = calculateGADF_GVF(femalepct, quantizeBreakIDs)
//TODO: there is a bug in the data
quantizeBreakIDs = getBreakIDs(femalepct, quantize.domain())
quantileGADF_GVF = classifications(femalepct, 3, 11)
// Convert your array into a format that Plotly can use more directly
formattedData = quantileGADF_GVF.map(d => ({x: d[0], y: d[2]}));
// Create the line chart
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(formattedData, {x: "x", y: "y"}) // Adjusted to use the mapped data
]
})
nBreakIDs = getBreakIDs(femalepct, jenks.domain())
calculateGADF_GVF(femalepct, nBreakIDs)
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;
}
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;
}
//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;
}
//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;
}
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];
}
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
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.
