Published
Edited
Dec 7, 2021
1 fork
5 stars
function createDiagram(){
// Dropdown menu change view: Race, Age Group, Relationship to Incident Location
// left_attribute_selection;
// outcome_attribute_selection;
const container = html`<div style= "position: relative; height:500px; width: 1000px; font-family: Muli "> </div>`;
let canvas = DOM.canvas(800, 500);
container.appendChild(canvas);
container.value = wrapREGL({
canvas: canvas,
});
// const legend= displayLegend_toggle();
// container.appendChild(legend);
const labels = rightSideRaceOutcomes();
container.appendChild(labels);
const leftLabel = leftSideIntro();
container.appendChild(leftLabel);
/* Functions for labels
shooterRaceCategory()
relationShipIncidentCategory()
ageGroupCategory
*/
return container;
}
function leftSideIntro() { return html`
<div style="position: absolute; height:100%; width: 27%; top: 30%; left: 1%; text-align: center; color: black; ">
<!--- 2 --->
<div style="position: relative; height:20%; width: 100%; right: 0%; font-size: 22px; ">
Of all the people who voted in the US in ${electionYear}
</div>
</div>
</div>
`};
function rightSideRaceOutcomes() { return html`
<div style="position: absolute; height:100%; width: 25%; top: 0px; right: 1%; text-align: center; color: black; ">
<!--- 2 --->
<div style="position: relative; height:50%; width: 100%; background-color: white; right: 0%; font-size: 22px; ">
<div class="text" style=" left: -12%; top: 25%; position: relative;"> ${getPct(+top_forty.tot/ (+top_forty.tot + (+elseWhere.tot)))} live in Top-forty metro</div>
<div style="position:relative; height: 0%; width: 100%; left: 0%;top: 25%; ">
<div style="position: absolute; height: 100%; width: 25%; left: 0%;">
<div style="position:relative; top: 10%; color: rgb(141,159,202);font-size: 18px;">${getPct( +top_forty.dem/(+top_forty.tot))} </div>
</div>
<div style="position: absolute; height: 100%; width: 25%; left: 25%;">
<div style="position:relative; top: 10%; color:rgb(251,141,97);font-size: 18px;"> ${getPct( +top_forty.rep/(+top_forty.tot))}</div>
</div>
<div style="position: absolute; height: 100%; width: 25%; left: 50%;">
<div style="position:relative; top: 10%; color: rgb(166,215,81);font-size: 18px;">2% </div>
</div>
</div>
</div>
<!--- 4 --->
<div style="position: relative; height:40%; width: 100%; background-color: white; right: 0%; font-size: 22px; ">
<div class="text" style=" left: -10%; top: 32%; position: relative;"> ${getPct(+elseWhere.tot/ (+top_forty.tot + (+elseWhere.tot)))} live elsewhere</div>
<div style="position:relative; height: 0%; width: 100%; left: 0%; top: 32%; ">
<div style="position: absolute; height: 100%; width: 25%; left: 0%;">
<div style="position:relative; top: 10%; color: rgb(141,159,202);font-size: 18px;"> ${getPct(+elseWhere.dem/(+elseWhere.tot))} </div>
</div>
<div style="position: absolute; height: 100%; width: 25%; left: 25%;">
<div style="position:relative; top: 10%; color:rgb(251,141,97);font-size: 18px;"> ${getPct(+elseWhere.rep/(+elseWhere.tot))}</div>
</div>
<div style="position: absolute; height: 100%; width: 25%; left: 50%;">
<div style="position:relative; top: 10%; color: rgb(166,215,81);font-size: 18px;"> 2% </div>
</div>
</div>
</div>
</div>
</div>
`};
function getPct(num){
return (num * 100).toFixed(0)+'%'
}
google_sheet_url ='https://docs.google.com/spreadsheets/d/e/2PACX-1vThJI97E6R65631yx9yr43g2sC7Gd7bykAHySm9JjpPzbS0n-TL4TuL_iiDR6HVB270sP8h6gwO_Leq/pub?output=tsv'
createdData = (new Array(allPop2020).fill((t,i)=>{ return {speed: 1, 'idx': i} } )).map( (t, idx) =>{
return {
speed: Math.random()*0.2+0.5,
x: Math.random(),
y0: -0.2,
y1: (idx < Math.round(data2020[0]/weightLoss) )? -0.5: 0.4,
dy: Math.random() * 0.2,
isB: getColorCode(idx),
attr: idx< data2020[0]? 'elseWhere': 'top_forty'
}
} )
(+elseWhere['dem'] + (+elseWhere['rep']) )/weightLoss
function getColorCode(idx) {
if( idx<= +elseWhere['dem']/weightLoss ){
return 1
} else if(idx<= (+elseWhere['dem'] + (+elseWhere['rep']) )/weightLoss ){
return 2
} else if(idx<= +elseWhere['tot']/ weightLoss){
return 4
} else if(idx<= (+elseWhere['tot'] + (+top_forty['dem']) )/weightLoss ){
return 1
} else if(idx<= (+elseWhere['tot'] + (+top_forty['dem']) + (+top_forty['rep']) )/weightLoss ){
return 2
} else {
return 4
}
}
allPop2020 = Math.round( d3.sum(data2020)/ weightLoss)
data2020 = allDataSelected.map(t=>t.tot)
{
window.regltick = regl.frame(({ time }) => {
regl.clear({
color: [1, 1, 1, 1],
depth: 1
})
drawPoints({ interp: time / 5 })
})
}
count = allPop2020
height = 950
drawPoints = regl({
vert: `
precision mediump float;
attribute float speed, x, y0, y1, dy;
attribute float isB;
varying float c;
uniform float interp;
void main() {
float t = mod(x + interp*speed, 1.0);
// cubic ease
float ct = t < 0.5
? 4.0 * t * t * t
: -0.5 * pow(abs(2.0 * t - 2.0), 3.0) + 1.0;
float x = mix(-1.0, 1.0, t);
float y = mix(y0, y1, ct);
gl_Position = vec4(x, y + dy, 0, 1);
gl_PointSize = 5.0;
c = isB;
}`,
frag: `
precision mediump float;
varying float c;
void main() {
vec4 color0 = vec4(.400, .761, .647, 1);
vec4 color1 = vec4(.553, .627, .796, 1);
vec4 color2 = vec4(.988, .553, .384, 1);
vec4 color3 = vec4(.906, .541, .765, 1);
vec4 color4 = vec4(.651, .847, .329, 1);
vec4 color5 = vec4(1.00, .851, .184, 1);
vec4 color6 = vec4(.898, .769, .580, 1);
vec4 color7 = vec4(1.00, 1.00, 1.00, 1);
if (c == 0.0) {
gl_FragColor = color0;
} else if (c == 1.0) {
gl_FragColor = color1;
} else if (c == 2.0) {
gl_FragColor = color2;
} else if (c == 3.0) {
gl_FragColor = color3;
} else if (c == 4.0) {
gl_FragColor = color4;
} else if (c == 10.0) {
gl_FragColor = color7;
} else {
gl_FragColor = color4;
}
}`,
attributes: {
speed: createdData.map(d => d.speed),
x: createdData.map(d => d.x),
y0: createdData.map(d => d.y0),
y1: createdData.map(d => d.y1),
dy: createdData.map(d => d.dy),
isB: createdData.map(d => d.isB)
},
uniforms: {
interp: (ctx, props) => props.interp
},
primitive: 'point',
count: createdData.length,
})
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
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.
