Public
Edited
Apr 27, 2024
Importers
viewof filteredData = slider(analizeData, "🚗 Analyzer(any name you want)")
filteredData
6.Basic Code
The implment of the code are down below:
function tableDisplay(filteredData) {
const table = aq // viewof shows the table view, but assigns the table value
.from(filteredData)
.view({ height: 240 }); // set maximum height of table viewer in pixels
const component = htl.html`
<h2>Display the filtered information</h2>
<div>
<div>Here is the table after the filter</div>
<div>Total rows:${filteredData.length}<div>
<div>${table}</div>
</div>
`
return component;
}
function slider(analizeData, name) {
// console.log(analizeData);
// selectRange.bind(selectRange);
let plot = null;
let emptyQuant = null;
let changeHTML = htl.html`<div></div>`;
let selectRange = interval([analizeData.minValue, analizeData.maxValue], {
step: 1,
value: [analizeData, analizeData.medianValue],
label: analizeData.quantColumn
});
if (!analizeData.quantColumn) {
emptyQuant = htl.html`<h3>Please Select a number field as quantative data!!!</h3>`;
changeHTML = emptyQuant;
} else {
console.log("rerender!");
const AnaData = [
analizeData.averageValue,
analizeData.medianValue,
analizeData.minValue,
analizeData.maxValue
];
console.log(AnaData);
let numRanges = 10;
let rangeSize = Math.ceil((AnaData[3] - AnaData[2] + 1) / numRanges); // You can adjust this as needed
// Initialize the ranges and their frequencies
let ranges = Array.from({ length: numRanges }, (_, index) => ({
range: [AnaData[2] + index * rangeSize, AnaData[2] + (index + 1) * rangeSize - 1],
frequency: 0
}));
analizeData.quantData.forEach(num => {
for (let range of ranges) {
if (num >= range.range[0] && num <= range.range[1]) {
range.frequency++;
break;
}
}
});
let frequencies = ranges.map(range => range.frequency);
let rangeArray = ranges.map(range => range.range[0]);
console.log("frequencies",frequencies);
console.log("rangeArray",rangeArray);
const frePlot = Plot.plot({
marks: [
() => htl.svg`<defs>
<linearGradient id="gradient" gradientTransform="rotate(90)">
<stop offset="15%" stop-color="purple" />
<stop offset="75%" stop-color="red" />
<stop offset="100%" stop-color="gold" />
</linearGradient>
</defs>`,
Plot.barY(alphabet, {x: rangeArray, y: frequencies, fill: "url(#gradient)"}),
Plot.ruleY([0])
]
})
plot = Plot.plot({
x: { padding: 0.4 },
marginTop: 20,
marginRight: 20,
marginBottom: 30,
marginLeft: 50,
grid: true,
marks: [
Plot.barY(alphabet, {
x: ["average", "median", "minimum", "maximum"],
y: AnaData,
dx: 2,
dy: 2
}),
Plot.barY(alphabet, {
x: ["average", "median", "minimum", "maximum"],
y: AnaData,
fill: "green",
dx: -2,
dy: -2
})
]
});
changeHTML = htl.html`
<h3>Max,Min,Average and Medain value</h3>
<div>${plot}<div>
<h3>Frequecy within each range</h3>
<div>${frePlot}</div>
<h2> Select the range you want to filter</h2>
<div> ${selectRange}</div>
`;
// console.log(plot);
}
const filter = (analizeData) => {
// if(analizeData.quantData){
// return null;
// }
// console.log("analizeData", analizeData);
// console.log("called filter");
const filterData = analizeData.data.filter((item, index) => {
const colmun = analizeData.quantColumn;
if (
analizeData.quantData[index] >= selectRange.value[0] &&
analizeData.quantData[index] <= selectRange.value[1]
) {
return item;
}
});
// console.log("after filter");
return filterData;
};
// console.log("quant", analizeData.quantColumn);
// console.log("analize", analizeData);
// console.log("T_F", analizeData.quantColumn === null);
let val = analizeData.data;
if (analizeData.quantColumn != null) {
val = filter(analizeData);
}
// console.log("val!!", val);
// :filter(analizeData)
// filter(analizeData);
// console.log("selectData",selectData);
// let table = aq // viewof shows the table view, but assigns the table value
// .from(val)
// .view({ height: 240 })
// console.log("aq",selectData);
// console.log("range",selectRange.value);
const component = htl.html`
<h1>${name}<h1>
<h2>Basic Data Information</h2>
<div> ${changeHTML}</div>
`;
component.value = val;
// <div> Here is the table after the filter</div>
// <div>Total rows:${selectData.length}<div>
// <div>${aq.value}</div>
selectRange.addEventListener("input", () => {
// console.log("change",e);
// console.log("value", selectRange.value);
let val = analizeData.data;
if (analizeData.quantColumn != null) {
val = filter(analizeData);
}
component.value = val;
component.dispatchEvent(new Event("input", { bubbles: true }));
});
return component;
}
origindata = FileAttachment("used_cars.csv").csv()
initialData = origindata.slice(0,1000)
import {interval} from '@mootari/range-slider'
import {dataInput} from "@john-guerra/data-input"
import { analyzer } from "@yang-zhao2-ws/data-analyzer";
import { aq, op } from '@uwdata/arquero'
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.
