From c760a44ed24d6b8bb1e269ce4950b1a87c435904 Mon Sep 17 00:00:00 2001 From: Zach Cutler Date: Tue, 30 Jan 2024 13:34:40 -0700 Subject: [PATCH 1/3] setting up histogram --- src/public/viz-guardrails/DataExplorer.tsx | 22 +++++++++++++--------- src/public/viz-guardrails/Histogram.tsx | 16 ++++++++++++++++ 2 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 src/public/viz-guardrails/Histogram.tsx diff --git a/src/public/viz-guardrails/DataExplorer.tsx b/src/public/viz-guardrails/DataExplorer.tsx index 2fbb6f1d6..50b714804 100644 --- a/src/public/viz-guardrails/DataExplorer.tsx +++ b/src/public/viz-guardrails/DataExplorer.tsx @@ -10,6 +10,7 @@ import LineChart from './LineChart'; import Sidebar from './Sidebar'; import RangeSelector from './RangeSelector'; import Selector from './Selector'; +import { Histogram } from './Histogram'; export interface ChartParams { dataset: string, @@ -53,7 +54,7 @@ export function DataExplorer({ parameters }: StimulusParams) { } return null; - + }, [data, range]); return filteredData&&items&&range&&selection ? ( @@ -67,14 +68,17 @@ export function DataExplorer({ parameters }: StimulusParams) { - + + {guardrail === 'juxt_summ' ? : null} + +
diff --git a/src/public/viz-guardrails/Histogram.tsx b/src/public/viz-guardrails/Histogram.tsx new file mode 100644 index 000000000..10d259f1b --- /dev/null +++ b/src/public/viz-guardrails/Histogram.tsx @@ -0,0 +1,16 @@ + + +export function Histogram({ + data +} : { + data: unknown[] +} +) { + console.log(data); + return( + + + + ); + +} From 2bb10fb445e4af79131eeedd4e9c6d8819629df6 Mon Sep 17 00:00:00 2001 From: Zach Cutler Date: Tue, 6 Feb 2024 13:45:29 -0700 Subject: [PATCH 2/3] adding --- src/public/viz-guardrails/DataExplorer.tsx | 4 +- src/public/viz-guardrails/Histogram.tsx | 54 ++++++++++++++++++++-- src/public/viz-guardrails/Sidebar.tsx | 3 +- 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/src/public/viz-guardrails/DataExplorer.tsx b/src/public/viz-guardrails/DataExplorer.tsx index c96b279ca..c2ea6726e 100644 --- a/src/public/viz-guardrails/DataExplorer.tsx +++ b/src/public/viz-guardrails/DataExplorer.tsx @@ -75,8 +75,8 @@ export function DataExplorer({ parameters }: StimulusParams) { - - {guardrail === 'juxt_summ' ? : null} + + {guardrail === 'juxt_summ' ? : null} + const [ref, {width, height}] = useResizeObserver(); + + const allData = useMemo(() => { + const tempData = data.map((d) => ({...d, value: +d.value})); + return from(tempData); + }, [data]); + + const selectedDataRange = useMemo(() => { + return d3.extent(allData.filter(escape((d) => selection.includes(d.country_name))).array('value')) as [unknown, unknown] as [number, number]; + }, [allData, selection]); + + const histValues = useMemo(() => { + return allData.orderby('value').groupby('value', { binStart: bin('value', { maxbins: 20, nice: true }), binEnd: bin('value', { maxbins: 20, nice: true, offset: 1 }) }).rollup({ count: op.count() }).groupby('binStart', 'binEnd').count(); + }, [allData]); + const yScale = useMemo(() => { + return d3.scaleLinear([margin.top, height - margin.bottom]).domain(d3.extent(allData.array('value') as number[]).reverse() as unknown as [number, number]).nice(); + }, [allData, height]); + + const xScale = useMemo(() => { + return d3.scaleLinear([margin.left, width - margin.right]).domain(d3.extent(histValues.array('count')) as unknown as [number, number]); + }, [histValues, width]); + + return( + + {histValues.objects().map((hist: {binStart: number, binEnd: number, count: number}) => { + return ; + })} + {/* */} + + + {yScale.domain()[0]} + {yScale.domain()[1]} + + {data.map((d) => )} + ); diff --git a/src/public/viz-guardrails/Sidebar.tsx b/src/public/viz-guardrails/Sidebar.tsx index 71a91dba3..7dd3a9cb9 100644 --- a/src/public/viz-guardrails/Sidebar.tsx +++ b/src/public/viz-guardrails/Sidebar.tsx @@ -78,7 +78,6 @@ export function Sidebar({ return ( setSelection(xs)} spacing={0} @@ -86,7 +85,7 @@ export function Sidebar({ > {items?.map((item) => { return ( - + Date: Tue, 13 Feb 2024 11:11:46 -0700 Subject: [PATCH 3/3] updating --- .../config-viz-guardrails.hjson | 37 +---------- public/viz-guardrails/consent.md | 2 +- src/public/viz-guardrails/DataExplorer.tsx | 2 +- src/public/viz-guardrails/Histogram.tsx | 64 +++++++++++-------- 4 files changed, 41 insertions(+), 64 deletions(-) diff --git a/public/viz-guardrails/config-viz-guardrails.hjson b/public/viz-guardrails/config-viz-guardrails.hjson index 9b379ac16..5b07bb186 100644 --- a/public/viz-guardrails/config-viz-guardrails.hjson +++ b/public/viz-guardrails/config-viz-guardrails.hjson @@ -826,7 +826,7 @@ "allow_time_slider": true, "x_var": "Date", "y_var": "Value", - "cat_var": "name", + "cat_var": "Stock", "group_var": "industry", "guardrail": "none" }, @@ -845,40 +845,7 @@ "sequence": { "order": "fixed", "components": [ - "introduction", - "consent", - { - "order": "latinSquare", - "numSamples": 1, - "components": [ - { - "order": "fixed", - "components": [ - "introduction1", - { - "order": "latinSquare", - "components": [ - "stock a-n", - "stock a-sd" - ] - } - ] - }, - { - "order": "fixed", - "components": [ - "introduction2", - { - "order": "latinSquare", - "components": [ - "viral a-n", - "viral a-sd" - ] - } - ] - }, - ] - } + "exploration" ] } } \ No newline at end of file diff --git a/public/viz-guardrails/consent.md b/public/viz-guardrails/consent.md index 5fba4ce0a..920f4f460 100644 --- a/public/viz-guardrails/consent.md +++ b/public/viz-guardrails/consent.md @@ -11,7 +11,7 @@ You are being asked to participate in a research study. Before you the study, the procedures to be followed, and any benefits, risks or discomfort that you may experience as a result of your participation. This form presents information about the study so - that you may make a fully informed decision regarding your + that you may make a fully informed decision regarding your participation. ## Purpose of the Study diff --git a/src/public/viz-guardrails/DataExplorer.tsx b/src/public/viz-guardrails/DataExplorer.tsx index f2545f7d2..1662a2d96 100644 --- a/src/public/viz-guardrails/DataExplorer.tsx +++ b/src/public/viz-guardrails/DataExplorer.tsx @@ -135,7 +135,7 @@ export function DataExplorer({ parameters, setAnswer }: StimulusParams - {guardrail === 'juxt_summ' ? : null} + {guardrail === 'juxt_summ' ? : null} { - const tempData = data.map((d) => ({...d, value: +d.value})); + const tempData = data.map((d) => ({...d, value: +d[parameters.y_var]})); return from(tempData); - }, [data]); + }, [data, parameters]); const selectedDataRange = useMemo(() => { - return d3.extent(allData.filter(escape((d) => selection.includes(d.country_name))).array('value')) as [unknown, unknown] as [number, number]; - }, [allData, selection]); + return d3.extent(allData.filter(escape((d) => selection.includes(d[parameters.cat_var]))).array('value')) as [unknown, unknown] as [number, number]; + }, [allData, selection, parameters]); - const histValues = useMemo(() => { - return allData.orderby('value').groupby('value', { binStart: bin('value', { maxbins: 20, nice: true }), binEnd: bin('value', { maxbins: 20, nice: true, offset: 1 }) }).rollup({ count: op.count() }).groupby('binStart', 'binEnd').count(); - }, [allData]); const yScale = useMemo(() => { - return d3.scaleLinear([margin.top, height - margin.bottom]).domain(d3.extent(allData.array('value') as number[]).reverse() as unknown as [number, number]).nice(); + return d3.scaleLinear([margin.top, height - margin.bottom]).domain(d3.extent(allData.array('value') as number[]).reverse() as unknown as [number, number]); }, [allData, height]); - const xScale = useMemo(() => { - return d3.scaleLinear([margin.left, width - margin.right]).domain(d3.extent(histValues.array('count')) as unknown as [number, number]); - }, [histValues, width]); + const textFormat = d3.format('.0%'); + + console.log(selectedDataRange); + + console.log(yScale.domain(), yScale.range(), data); return( - - {histValues.objects().map((hist: {binStart: number, binEnd: number, count: number}) => { - return ; - })} + {/* */} - - - {yScale.domain()[0]} - {yScale.domain()[1]} - - {data.map((d) => )} - + {/* */} + + {textFormat(yScale.domain()[0])} + {textFormat(yScale.domain()[1])} + {textFormat(selectedDataRange[0])} + {textFormat(selectedDataRange[1])} + + + + {data.map((d) => 0 ? '#1f77b4' : '#d62728ed'} x={0} width={50} y={yScale(+d.Value)} height={1}>)} + + + + + + );