Skip to content

Instantly share code, notes, and snippets.

@yestheboxer

yestheboxer/insurance_gender_data.html

Created September 10, 2024 23:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yestheboxer/0a335ae5c6ab3973cd2fd2386da1bec4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yestheboxer/0a335ae5c6ab3973cd2fd2386da1bec4 to your computer and use it in GitHub Desktop.
Download ZIP
2016 Average Car Insurance Cost Differences by Gender
Raw
insurance_gender_data.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2016 Average Car Insurance Cost Differences by Gender</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f4f6;
margin: 0;
padding: 10px;
color: #1f2937;
}
.container {
max-width: 4000px;
margin: 4px;
}
h1 {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 16px;
}
.legend {
text-align: center;
font-size: 14px;
margin-bottom: 16px;
}
.legend-item {
display: inline-flex;
align-items: center;
margin: 0 8px;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 4px;
}
.pink {
background-color: #ec4899;
}
.blue {
background-color: #3b82f6;
}
.scroll-container {
width: 100%;
height: 550px;
overflow-x: auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.chart {
display: flex;
height: 500px;
align-items: flex-end;
padding: 8px;
}
.state {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 8px;
}
.bar {
position: relative;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.bar-label {
position: absolute;
bottom: 4px;
left: 4px;
color: white;
font-weight: bold;
font-size: 12px;
}
.state-name {
font-size: 14px;
font-weight: 600;
margin-top: 8px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.state-population {
font-size: 12px;
color: #6b7280;
text-align: center;
}
.note {
font-size: 12px;
color: #6b7280;
text-align: center;
margin-top: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>2016 Average Car Insurance Cost Differences by Gender</h1>
<div class="legend">
<p>Bar height = insurance cost difference. Bar width = population.</p>
<div>
<span class="legend-item"
><span class="legend-color pink"></span>Women pay more</span
>
<span class="legend-item"
><span class="legend-color blue"></span>Men pay more</span
>
</div>
</div>
<div class="scroll-container">
<div id="chart" class="chart"></div>
</div>
<div class="note">
<p>
<strong>Note:</strong> Massachusetts, Hawaii, North Carolina, Montana,
Pennsylvania do not allow gender-based car insurance pricing.
</p>
</div>
</div>
<script>
const stateData = [
{
name: "Michigan",
womenPayMore: true,
difference: 79,
population: 9986857,
},
{
name: "Florida",
womenPayMore: true,
difference: 61,
population: 21477737,
},
{
name: "Louisiana",
womenPayMore: true,
difference: 48,
population: 4648794,
},
{
name: "Minnesota",
womenPayMore: true,
difference: 41,
population: 5639632,
},
{
name: "Delaware",
womenPayMore: true,
difference: 34,
population: 973764,
},
{
name: "Iowa",
womenPayMore: true,
difference: 33,
population: 3155070,
},
{
name: "West Virginia",
womenPayMore: true,
difference: 32,
population: 1792147,
},
{
name: "New York",
womenPayMore: true,
difference: 31,
population: 19453561,
},
{
name: "Oregon",
womenPayMore: true,
difference: 27,
population: 4217737,
},
{
name: "Indiana",
womenPayMore: true,
difference: 14,
population: 6732219,
},
{
name: "Arkansas",
womenPayMore: true,
difference: 13,
population: 3017804,
},
{
name: "New Jersey",
womenPayMore: true,
difference: 1,
population: 8882190,
},
{
name: "Mississippi",
womenPayMore: false,
difference: 1,
population: 2976149,
},
{
name: "Nebraska",
womenPayMore: false,
difference: 2,
population: 1934408,
},
{
name: "Idaho",
womenPayMore: false,
difference: 4,
population: 1787065,
},
{
name: "South Dakota",
womenPayMore: false,
difference: 4,
population: 884659,
},
{
name: "Ohio",
womenPayMore: false,
difference: 4,
population: 11689100,
},
{
name: "Kentucky",
womenPayMore: false,
difference: 6,
population: 4467673,
},
{
name: "Illinois",
womenPayMore: false,
difference: 6,
population: 12671821,
},
{
name: "Connecticut",
womenPayMore: false,
difference: 6,
population: 3565287,
},
{
name: "Tennessee",
womenPayMore: false,
difference: 8,
population: 6829174,
},
{
name: "Alabama",
womenPayMore: false,
difference: 9,
population: 4903185,
},
{
name: "Virginia",
womenPayMore: false,
difference: 10,
population: 8535519,
},
{
name: "District of Columbia",
womenPayMore: false,
difference: 11,
population: 705749,
},
{
name: "South Carolina",
womenPayMore: false,
difference: 11,
population: 5148714,
},
{
name: "Texas",
womenPayMore: false,
difference: 12,
population: 28995881,
},
{
name: "Arizona",
womenPayMore: false,
difference: 13,
population: 7278717,
},
{
name: "Wisconsin",
womenPayMore: false,
difference: 14,
population: 5822434,
},
{
name: "Maine",
womenPayMore: false,
difference: 21,
population: 1344212,
},
{
name: "Missouri",
womenPayMore: false,
difference: 22,
population: 6137428,
},
{
name: "New Mexico",
womenPayMore: false,
difference: 27,
population: 2096829,
},
{
name: "Nevada",
womenPayMore: false,
difference: 29,
population: 3080156,
},
{
name: "Vermont",
womenPayMore: false,
difference: 30,
population: 623989,
},
{
name: "Utah",
womenPayMore: false,
difference: 30,
population: 3205958,
},
{
name: "Georgia",
womenPayMore: false,
difference: 31,
population: 10617423,
},
{
name: "Kansas",
womenPayMore: false,
difference: 37,
population: 2913314,
},
{
name: "Oklahoma",
womenPayMore: false,
difference: 41,
population: 3956971,
},
{
name: "Maryland",
womenPayMore: false,
difference: 44,
population: 6045680,
},
{
name: "Colorado",
womenPayMore: false,
difference: 45,
population: 5758736,
},
{
name: "California",
womenPayMore: false,
difference: 45,
population: 39512223,
},
{
name: "Washington",
womenPayMore: false,
difference: 51,
population: 7614893,
},
{
name: "Rhode Island",
womenPayMore: false,
difference: 52,
population: 1059361,
},
{
name: "Wyoming",
womenPayMore: false,
difference: 54,
population: 578759,
},
];
function renderChart() {
const chartElement = document.getElementById("chart");
const maxPopulation = Math.max(
...stateData.map((state) => state.population)
);
const maxDifference = Math.max(
...stateData.map((state) => state.difference)
);
const minWidth = 80;
const maxWidth = 300;
// Sort states
const sortedStates = [...stateData].sort((a, b) => {
if (a.womenPayMore !== b.womenPayMore) {
return b.womenPayMore ? 1 : -1;
}
return a.womenPayMore
? b.difference - a.difference
: a.difference - b.difference;
});
chartElement.style.width = `${sortedStates.length * (minWidth + 16)}px`;
sortedStates.forEach((state) => {
const heightPixels = Math.max(
(state.difference / maxDifference) * 400,
60
);
const widthPixels =
minWidth +
(state.population / maxPopulation) * (maxWidth - minWidth);
const stateElement = document.createElement("div");
stateElement.className = "state";
stateElement.style.width = `${widthPixels}px`;
const barElement = document.createElement("div");
barElement.className = "bar";
barElement.style.height = `${heightPixels}px`;
barElement.style.width = "100%";
barElement.style.backgroundColor = state.womenPayMore
? "#ec4899"
: "#3b82f6";
const labelElement = document.createElement("span");
labelElement.className = "bar-label";
labelElement.textContent = `$${state.difference}`;
barElement.appendChild(labelElement);
const nameElement = document.createElement("div");
nameElement.className = "state-name";
nameElement.textContent = state.name;
nameElement.title = state.name;
const populationElement = document.createElement("div");
populationElement.className = "state-population";
populationElement.textContent = `${(
state.population / 1000000
).toFixed(1)}M`;
stateElement.appendChild(barElement);
stateElement.appendChild(nameElement);
stateElement.appendChild(populationElement);
chartElement.appendChild(stateElement);
});
}
document.addEventListener("DOMContentLoaded", renderChart);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment