Skip to content

Instantly share code, notes, and snippets.

@Zhenmao
Created March 27, 2018 04:15
Show Gist options
  • Save Zhenmao/4c94c7dc4b519c708e4d02edbf50c756 to your computer and use it in GitHub Desktop.
Save Zhenmao/4c94c7dc4b519c708e4d02edbf50c756 to your computer and use it in GitHub Desktop.
Ring size chart
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tesoro & Amistades</title>
<link href="https://fonts.googleapis.com/css?family=Arapey|Vollkorn" rel="stylesheet">
<style>
body {
font-family: 'Vollkorn', serif;
font-size: 14px;
}
h1 {
font-family: 'Arapey', serif;
text-transform: uppercase;
font-size: 2.5rem;
}
.container {
margin: 30px;
}
.title-row {
display: flex;
position: relative;
justify-content: center;
}
.logo-container {
position: absolute;
top: 0;
left: 0;
}
#logo-img {
width: 225px;
}
.ring-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
}
@media only screen and (max-width: 1024px) {
.title-row {
flex-direction: column;
align-items: center;
text-align: center;
}
.logo-container {
position: static;
}
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class="container">
<div class="title-row">
<div class="logo-container"><img src="/Sebslara_Tesoro_Amistades_png_1_225x_2x.png" alt="logo" id="logo-img"></div>
<div><h1>Tabla de tallas para anillos</h1></div>
</div>
<div class="ring-row"></div>
</div>
<script>
var sizes = [
{ size: 3, measure: 13.3 },
{ size: 3.5, measure: 13.9 },
{ size: 4, measure: 14.6 },
{ size: 4.5, measure: 15.0 },
{ size: 5, measure: 15.7 },
{ size: 5.5, measure: 16.0 },
{ size: 6, measure: 16.5 },
{ size: 6.5, measure: 17.0 },
];
var muteColor = "#F0F0F0",
highlightColor = "#45AED5",
measureColor = "#000";
var margin = { top: 20, right: 10, bottom: 50, left: 10 };
var x = d3.scaleLinear()
.domain([0, 25])
.range([0, 200]);
var g = d3.select(".ring-row")
.selectAll("div")
.data(sizes)
.enter().append("div")
.attr("class", "ring-div")
.append("svg")
.attr("width", function(d) {
d.diameter = x(d.measure);
return d.diameter + margin.left + margin.right;
})
.attr("height", function(d) {
return d.diameter + margin.top + margin.bottom;
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var gRing = g.append("g")
.attr("transform", function(d) {
return "translate(" + d.diameter / 2 + "," + d.diameter / 2 + ")";
})
.style("pointer-events", "all");
gRing.append("circle")
.attr("r", function(d) {
return d.diameter / 2;
})
.style("fill", muteColor)
.on("mouseover", highlight)
.on("mouseout", unhighlight);
gRing.append("text")
.attr("y", "-0.6rem")
.style("font-size", "1.5rem")
.style("text-anchor", "middle")
.text("Talla")
.style("pointer-events", "none");
gRing.append("text")
.attr("y", "1rem")
.style("font-size", "1.5rem")
.style("text-anchor", "middle")
.text(function(d) {
return d.size;
})
.style("pointer-events", "none");
gMeasure = g.append("g")
.attr("class", "measure")
.attr("transform", function(d) {
return "translate(0," + (d.diameter + 10) + ")";
});
gMeasure.append("circle")
.attr("r", 3)
.style("fill", measureColor);
gMeasure.append("circle")
.attr("r", 3)
.attr("cx", function(d) {
return d.diameter;
})
.style("fill", measureColor);
gMeasure.append("line")
.attr("x2", function(d) {
return d.diameter;
})
.style("stroke-width", 1.5)
.style("stroke", measureColor);
gMeasure.append("text")
.attr("x", function(d) {
return d.diameter / 2;
})
.attr("y", 20)
.style("text-anchor", "middle")
.style("font-size", "1.5rem")
.text(function(d) {
return d.measure + "mm";
});
function highlight() {
var gHover = d3.select(this.parentNode);
gHover.select("circle")
.transition()
.style("fill", highlightColor);
gHover.selectAll("text")
.transition()
.style("fill", "#fff");
}
function unhighlight() {
var gHover = d3.select(this.parentNode);
gHover.select("circle")
.transition()
.style("fill", muteColor);
gHover.selectAll("text")
.transition().
style("fill", "#000");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment