The avatar for @arpitnarechania
Arpit Narechania
I design visual interfaces that help users be more aware of their analytic behaviors and guide them towards their goals. I also develop tools that augment visualization interfaces with the querying power of natural language.
Public
Edited
Sep 10, 2023
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
binguru = import('https://cdn.skypack.dev/binguru@1.0.0-alpha.18.0');
Insert cell
import {InputGroup} from "@sethpipho/input-group";
Insert cell
embed = require("vega-embed@6")
Insert cell
Insert cell
Insert cell
viewof inputs = InputGroup({
rawDataFile: Inputs.file({label: "Upload CSV file (e.g. https://raw.githubusercontent.com/nl4dv/nl4dv/master/examples/assets/data/euro.csv)", accept: ".csv", required: false}),
rawDataFileFeature: Inputs.text({label: "Feature from CSV file", placeholder: "Type here", value: null, required: false}),
rawData: Inputs.textarea({label: "OR Enter comma (,) or newline (\\n) or tab (\\t) separated list of values", placeholder: "[1, 2, 3, 4, 5]", value: [1.7,1.8,1.9,3,1.8,1.3,1.9,1.9,1.7,1.4,2.3,1.7,1.8,1.3,2,1.7,2.2,2.9,1.9,1.7,1.8,1.6,2,1.1,1.8,1.8,1.7,2.4,1.9,1.6,1.3,1.4,1.8,1.6,1.4,1.5, null, null, "nan", undefined, "", "null"]}),
binCount: Inputs.range([1, 10], {value: 6, step: 1, label: "Enter desired number of bins, wherever applicable."}),
binExtent: Inputs.range([0, 100], {value: 10, step: 0.01, label: "Enter desired bin extent, wherever applicable."}),
precision: Inputs.range([0, 5], {value: 2, step: 1, label: "Enter desired precision value."}),
colorScheme: Inputs.select([].concat(["viridis", "magma", "inferno", "plasma", "cividis", "turbo", "bluegreen", "bluepurple", "greenblue", "orangered", "purplebluegreen", "purpleblue", "purplered", "redpurple", "yellowgreenblue", "yellowgreen", "yelloworangebrown", "yelloworangered", "category10", "category20", "category20b", "category20c", "dark2", "paired", "pastel1", "pastel2", "set1", "set2", "set3", "tableau10", "tableau20", "blues", "greens", "greys", "oranges", "purples", "reds", "blueorange", "brownbluegreen", "purplegreen", "pinkyellowgreen", "purpleorange", "redblue", "redgrey", "redyellowblue", "redyellowgreen", "spectral"]), {label: "Color Scheme", value: "viridis"})
});
Insert cell
fileData = inputs.rawDataFile ? inputs.rawDataFile.csv({typed: true}): []
Insert cell
rawData = inputs.rawDataFile && inputs.rawDataFileFeature ? fileData.map(val => val[inputs.rawDataFileFeature]) : inputs.rawData.split(/[,\t\r\n]/).map(parseFloat);
Insert cell
binGuruObj = new binguru.BinGuru(rawData, inputs.binCount, inputs.binExtent, inputs.precision);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ei = binGuruObj.equalInterval()
Insert cell
embed(binGuruObj.visualize(ei, binguru.EQUAL_INTERVAL, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
di = binGuruObj.definedInterval(0.5)
Insert cell
embed(binGuruObj.visualize(di, binguru.DEFINED_INTERVAL, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
ebs = binGuruObj.exponentialBinSizes()
Insert cell
embed(binGuruObj.visualize(ebs, binguru.EXPONENTIAL_BIN_SIZE, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
gi = binGuruObj.geometricInterval()
Insert cell
embed(binGuruObj.visualize(gi, binguru.GEOMETRIC_INTERVAL, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
mb = binGuruObj.maximumBreaks()
Insert cell
embed(binGuruObj.visualize(mb, binguru.MAXIMUM_BREAKS, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
qa = binGuruObj.quantile()
Insert cell
embed(binGuruObj.visualize(qa, binguru.QUANTILE, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
bp = binGuruObj.boxPlot()
Insert cell
embed(binGuruObj.visualize(bp, binguru.BOXPLOT, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
pe = binGuruObj.percentile()
Insert cell
embed(binGuruObj.visualize(pe, binguru.PERCENTILE, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
sd1 = binGuruObj.standardDeviation(true, 1)
Insert cell
embed(binGuruObj.visualize(sd1, binguru.STANDARD_DEVIATION, inputs.colorScheme));
Insert cell
sd2 = binGuruObj.standardDeviation(false, 1)
Insert cell
embed(binGuruObj.visualize(sd2, binguru.STANDARD_DEVIATION, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fj = binGuruObj.fisherJenks()
Insert cell
embed(binGuruObj.visualize(fj, binguru.FISHER_JENKS, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
ckm = binGuruObj.ckMeans()
Insert cell
embed(binGuruObj.visualize(ckm, binguru.CK_MEANS, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
ht = binGuruObj.headTailBreaks()
Insert cell
embed(binGuruObj.visualize(ht, binguru.HEAD_TAIL_BREAKS, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pb = binGuruObj.prettyBreaks()
Insert cell
embed(binGuruObj.visualize(pb, binguru.PRETTY_BREAKS, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
mi = binGuruObj.manualInterval([0.5, 0.75, 1.25, 1.5, 2])
Insert cell
embed(binGuruObj.visualize(mi, binguru.MANUAL_INTERVAL, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
unc = binGuruObj.unclassed()
Insert cell
// Note: This visualization is hard-coded to the viridis color scale as there is no API available that transforms a Vega-Lite color scheme into its d3-scale-chromatic equivalent to generate the desired "stops" for the desired linear gradient here.
embed(binGuruObj.visualize(unc, binguru.UNCLASSED, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
uniq = binGuruObj.unique()
Insert cell
embed(binGuruObj.visualize(uniq, null, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
binningMethods = ["equalInterval", "percentile", "quantile", "geometricInterval", "boxPlot", "standardDeviation", "maximumBreaks", "fisherJenks"]
// binningMethods = []
Insert cell
// binningMethodObjs = {
// let obj = {};
// obj[binguru.EQUAL_INTERVAL] = ei;
// obj[binguru.PERCENTILE] = pe;
// obj[binguru.QUANTILE] = qa;
// obj[binguru.GEOMETRIC_INTERVAL] = gi;
// obj[binguru.BOXPLOT] = bp;
// obj[binguru.STANDARD_DEVIATION] = sd1;
// obj[binguru.MAXIMUM_BREAKS] = mb;
// obj[binguru.FISHER_JENKS] = fj;
// return obj;
// }
binningMethodObjs = {}
Insert cell
// One of the two parameters must be passed. Priority is given to `binningMethods`
res = binGuruObj.resiliency(binningMethods, binningMethodObjs)
Insert cell
embed(binGuruObj.visualize(res, binguru.RESILIENCY, inputs.colorScheme));
Insert cell
Insert cell
Insert cell
// viewof geoDataFile = Inputs.file({label: "Upload a TOPOJSON file", accept: ".json", required: true});
// geoData = geoDataFile.json({typed: true})
geoData = d3.json("https://vega.github.io/vega-datasets/data/us-10m.json")
Insert cell
// viewof inputDataFile = Inputs.file({label: "Upload the input data file", accept: ".csv", required: true});
// inputData = inputDataFile.csv({typed: true})
inputData = d3.tsv("https://vega.github.io/vega-datasets/data/unemployment.tsv")
Insert cell
inputDataFeature = "rate"
Insert cell
binGuruObj2 = new binguru.BinGuru(inputData.map(d => parseFloat(d[inputDataFeature])), inputs.binCount);
Insert cell
fj2 = binGuruObj2.fisherJenks()
Insert cell
/* binguruRes: any, inputData: number[], geoData: any[], inputDataFeature: string, geoDataFeature: string, geoDataLookup:string = "id", inputDataKey:string = "id", colorSchemeCode = "viridis" */
embed(binGuruObj.map(fj2, inputData, geoData, inputDataFeature, "counties", "id", "id", inputs.colorScheme));
Insert cell
Insert cell
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