Public
Edited
Dec 18, 2023
selection_MC = {
return radios;
}
mutable message_MC = " "
// radio button for MC options
viewof radios = {
// Define the options as an array of objects
const options = [
{ value: "Total cases", label: "Total cases" },
{ value: "The number of deaths and how fast they vaccinate by county", label: "The number of deaths and how fast they vaccinate by county" },
{ value: "The number of deaths out of all cases and the rate of vaccination by county", label: "The number of deaths out of all cases and the rate of vaccination by county" },
{ value: "Population levels and poverty by county", label: "Population levels and poverty by county" }
];
// Shuffle the options array
for (let i = options.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[options[i], options[j]] = [options[j], options[i]];
}
// Create a container for the entire radio group
const form = html`<form>
<fieldset>
<legend style="margin-bottom: 1em;">What do these maps show?</legend>
${options.map(option => html`
<label style="display: block; margin-top: 0.5em;">
<input type="radio" name="option" value="${option.value}" /> ${option.label}
</label>
`)}
</fieldset>
</form>`;
// Return the value of the selected radio button
form.oninput = event => {
form.value = form.elements.option.value;
};
// Initialize the form value
form.value = null;
return form;
}
mutable message_Likert = " "
html`<div style="display: flex; justify-content: space-around; align-items: start;">
<div style="flex-basis: 60%;">${mapSelect}</div>
<div style="flex-basis: 40%;">
<div>${viewof mapSelectInput}</div>
<div style="margin-top: 1em;">${submitSelect}</div>
<div style="margin-top: 1em;">${message_mapClick}</div>
</div>
</div>`
mapSelect = {
const width = 980
const height = 600
const svg = d3.select(DOM.svg(width, height))
// Make our SVG responsive.
svg.attr('viewBox', `0 0 ${width} ${height}`)
svg.attr('preserveAspectRatio', 'xMidYMid meet')
svg.style('max-width', '100%').style('height', 'auto')
let StateValue = null;
const g = svg.append('g')
g.append('g')
.attr('class', 'states')
.selectAll('path')
.data(stateData)
.join('path')
.attr('class', 'state')
.attr('d', path)
.attr('id', 'state')
g.append('clipPath')
.attr('id', 'clip-state')
.append('use')
.attr('xlink:href', '#state')
// All counties.
g.append('g')
.attr('class', 'counties')
.selectAll('path')
.data(countiesData)
.join('path')
.attr('clip-path', 'url(#clip-state)')
.attr('class', 'county')
.attr('d', path)
.on('mouseover', function (d) {
this.classList.add('hovered')
tooltip.text(d.properties.name).style('display', '')
})
.on('mousemove', function () {
tooltip
.style('top', (d3.event.pageY - 10) + 'px')
.style('left', (d3.event.pageX + 10) + 'px')
})
.on('mouseout', function () {
this.classList.remove('hovered')
tooltip.style('display', 'none')
})
// click functionality
.on('click', function (d) {
d3.selectAll('.county').classed('selected', false);
this.classList.add('selected');
mutable mapSelectValue = d.id;
});
return svg.node();
}
viewof mapSelectInput = {
// Create a container
const form = html`<form>
<fieldset>
<legend style="margin-bottom: 1em;">Click and select the blue county on the map, then click the submit button.</legend>
</div>
</fieldset>
</form>`;
// Return the value
form.oninput = event => {
form.value = form.elements.option.value;
};
// Initialize the form value
form.value = null;
return form;
}
// print the ID of the map selection
mapSelectValue
submitSelect = {
const button = html`<button disabled style="padding: 10px 10px; font-size: 20px;">Submit</button>`;
// Assuming `mapSelectValue` is a cell that holds the current value of the selection
$: if (mapSelectValue === null) {
button.disabled = true;
button.onclick = null; // Remove the click handler when disabled
} else {
button.disabled = false;
button.onclick = (event) => {
// your submit logic here
console.log(`Selected value: ${mapSelectValue}`);
mutable message_mapClick = "Please press F10 to continue"; // Set the message when the button is clicked
};
}
return button;
}
mutable message_mapClick = " "
// create a null map selection variable
mutable mapSelectValue = null;
tooltip = d3.select('body')
.append('div')
.attr('class', 'tooltip')
.style('position', 'absolute')
.text('test')
path = d3.geoPath().projection(projection);
projection = d3.geoIdentity().fitSize([width, height], stateData[0]);
stateData = topojson.feature(usData, usData.objects.states).features.filter((d) => d.id === selectedStateId);
usData = await d3.json('https://d3js.org/us-10m.v2.json')
height = 600
width = 960
topojson = require('topojson-client@3')
d3 = require("d3@5")
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.
