3c:null 3d:["$","title",null,{"children":"The Story of Human Hair | Benedicta Gokah | Observable"}] 43:T190c,{ const data = [ { region: "East Asian", diameter_um: 95, density_per_cm2: 175, tensile_strength_gf: 65, elasticity_percent: 55 }, { region: "African", diameter_um: 75, density_per_cm2: 190, tensile_strength_gf: 70, elasticity_percent: 60 }, { region: "European", diameter_um: 80, density_per_cm2: 180, tensile_strength_gf: 60, elasticity_percent: 50 }, { region: "South Asian", diameter_um: 85, density_per_cm2: 170, tensile_strength_gf: 63, elasticity_percent: 52 }, { region: "Middle Eastern", diameter_um: 82, density_per_cm2: 185, tensile_strength_gf: 62, elasticity_percent: 51 }, { region: "Southeast Asian", diameter_um: 90, density_per_cm2: 172, tensile_strength_gf: 64, elasticity_percent: 53 }, { region: "Mediterranean", diameter_um: 83, density_per_cm2: 175, tensile_strength_gf: 61, elasticity_percent: 52 }, { region: "Central Asian", diameter_um: 88, density_per_cm2: 178, tensile_strength_gf: 63, elasticity_percent: 54 } ]; const width = 860; const height = 500; const margin = {top: 40, right: 200, bottom: 100, left: 60}; const keys = ["diameter_um", "density_per_cm2", "tensile_strength_gf", "elasticity_percent"]; const keyNames = { "diameter_um": "Diameter (µm)", "density_per_cm2": "Density (/cm²)", "tensile_strength_gf": "Tensile Strength (gf)", "elasticity_percent": "Elasticity (%)" }; const x0 = d3.scaleBand() .domain(data.map(d => d.region)) .range([margin.left, width - margin.right]) .padding(0.1); const x1 = d3.scaleBand() .domain(keys) .range([0, x0.bandwidth()]) .padding(0.05); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(keys) .range(["#6A6F4C", "#5D2510", "#412F26", "#806044"]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "system-ui, -apple-system, sans-serif"); // Add title svg.append("text") .attr("x", margin.left + ((width - margin.right - margin.left) / 2)) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "500") .style("fill", "#1a1a1a") .text("Hair Properties Across Different Regions"); // Create tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "10px") .style("font-size", "14px") .style("box-shadow", "2px 2px 6px rgba(0,0,0,0.1)"); // Add bars with interactions const barGroups = svg.append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${x0(d.region)},0)`); const bars = barGroups.selectAll("rect") .data(d => keys.map(key => ({key, value: d[key], region: d.region}))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => y(0) - y(d.value)) .attr("fill", d => color(d.key)) .style("opacity", 0.8) .style("transition", "all 0.2s"); // Add hover interactions bars .on("mouseover", function(event, d) { // Highlight the bar d3.select(this) .style("opacity", 1) .style("stroke", "#000") .style("stroke-width", 1); // Show tooltip tooltip .style("opacity", 1) .html(` ${d.region}
${keyNames[d.key]}: ${d.value} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { // Reset bar style d3.select(this) .style("opacity", 0.8) .style("stroke", "none"); // Hide tooltip tooltip.style("opacity", 0); }); // Add x-axis svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0)) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)") .style("font-size", "12px") .style("fill", "#666"); // Add y-axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.selectAll(".domain").remove()) .style("font-size", "12px") .style("color", "#666"); // Interactive legend const legend = svg.append("g") .attr("transform", `translate(${width - margin.right + 40}, ${margin.top + 20})`) .attr("font-size", 12); const legendItems = legend.selectAll("g") .data(Object.entries(keyNames)) .join("g") .attr("transform", (d, i) => `translate(0,${i * 25})`) .style("cursor", "pointer"); legendItems.append("rect") .attr("x", 0) .attr("width", 15) .attr("height", 15) .attr("fill", d => color(d[0])) .style("opacity", 0.8); legendItems.append("text") .attr("x", 25) .attr("y", 7.5) .attr("dy", "0.35em") .text(d => d[1]) .style("fill", "#666"); // Add legend interactions legendItems .on("mouseover", function(event, d) { // Highlight corresponding bars bars .style("opacity", bar => bar.key === d[0] ? 1 : 0.3) .style("stroke", bar => bar.key === d[0] ? "#000" : "none") .style("stroke-width", bar => bar.key === d[0] ? 1 : 0); // Highlight legend item d3.select(this).select("rect") .style("opacity", 1) .style("stroke", "#000") .style("stroke-width", 1); }) .on("mouseout", function() { // Reset all bars bars .style("opacity", 0.8) .style("stroke", "none"); // Reset legend items legendItems.select("rect") .style("opacity", 0.8) .style("stroke", "none"); }); return svg.node(); }44:T1811,{ // Original data remains the same const data = [ { time_period: "Early Homo sapiens", years_ago: 200000, hair_density_cm2: 250, average_temp_celsius: 15, hair_diameter_um: 95 }, { time_period: "Late Pleistocene", years_ago: 150000, hair_density_cm2: 230, average_temp_celsius: 16, hair_diameter_um: 92 }, { time_period: "Upper Paleolithic", years_ago: 100000, hair_density_cm2: 210, average_temp_celsius: 17, hair_diameter_um: 88 }, { time_period: "Early Holocene", years_ago: 50000, hair_density_cm2: 190, average_temp_celsius: 18, hair_diameter_um: 85 }, { time_period: "Neolithic Period", years_ago: 12000, hair_density_cm2: 185, average_temp_celsius: 19, hair_diameter_um: 82 }, { time_period: "Bronze Age", years_ago: 5000, hair_density_cm2: 182, average_temp_celsius: 19.5, hair_diameter_um: 80 }, { time_period: "Present Day", years_ago: 0, hair_density_cm2: 180, average_temp_celsius: 20, hair_diameter_um: 75 } ]; const width = 960; const height = 500; const margin = {top: 40, right: 200, bottom: 100, left: 60}; data.sort((a, b) => b.years_ago - a.years_ago); const x = d3.scaleLinear() .domain(d3.extent(data, d => d.years_ago)) .range([margin.left, width - margin.right - 50]); const y1 = d3.scaleLinear() .domain([170, d3.max(data, d => d.hair_density_cm2)]) .nice() .range([height - margin.bottom, margin.top]); const y2 = d3.scaleLinear() .domain([14, d3.max(data, d => d.average_temp_celsius)]) .nice() .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#ffffff") .style("font-family", "system-ui, -apple-system, sans-serif"); // Add subtle grid svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat("") ) .style("stroke", "#f0f0f0") .style("stroke-width", 0.5) .call(g => g.select(".domain").remove()); // Title with improved typography svg.append("text") .attr("x", margin.left + ((width - margin.right - 50 - margin.left) / 2)) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "500") .style("fill", "#1a1a1a") .text("Hair Density vs Temperature Over Time"); // Styled x-axis svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickFormat(d => d3.format(",")(d) + " years ago")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .style("font-size", "12px") .style("fill", "#666") .attr("transform", "rotate(-45)") .attr("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em")); // Styled y-axes svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style("color", "#412F26") .call(d3.axisLeft(y1)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .style("fill", "#666") .style("font-size", "12px")); svg.append("g") .attr("transform", `translate(${width - margin.right - 50},0)`) .style("color", "#e15759") .call(d3.axisRight(y2)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .style("fill", "#666") .style("font-size", "12px")); // Add smoother lines const densityLine = d3.line().curve(d3.curveCatmullRom) .x(d => x(d.years_ago)) .y(d => y1(d.hair_density_cm2)); const tempLine = d3.line().curve(d3.curveCatmullRom) .x(d => x(d.years_ago)) .y(d => y2(d.average_temp_celsius)); // Add paths with opacity svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#412F26") .attr("stroke-width", 2.5) .attr("d", densityLine) .style("opacity", 0.8); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#e15759") .attr("stroke-width", 2.5) .attr("d", tempLine) .style("opacity", 0.8); // Add styled dots svg.selectAll(".density-dot") .data(data) .join("circle") .attr("class", "density-dot") .attr("cx", d => x(d.years_ago)) .attr("cy", d => y1(d.hair_density_cm2)) .attr("r", 4) .attr("fill", "#412F26") .style("opacity", 0.8); svg.selectAll(".temp-dot") .data(data) .join("circle") .attr("class", "temp-dot") .attr("cx", d => x(d.years_ago)) .attr("cy", d => y2(d.average_temp_celsius)) .attr("r", 4) .attr("fill", "#e15759") .style("opacity", 0.8); // Modernized legend const legend = svg.append("g") .attr("font-family", "system-ui, -apple-system, sans-serif") .attr("font-size", "12px") .attr("text-anchor", "start") .selectAll("g") .data(["Hair Density (per cm²)", "Temperature (°C)"]) .join("g") .attr("transform", (d, i) => `translate(${width - margin.right + 10},${margin.top + i * 25})`); legend.append("circle") .attr("r", 4) .attr("fill", (d, i) => i === 0 ? "#412F26" : "#e15759") .attr("cx", 0) .attr("cy", 0) .style("opacity", 0.8); legend.append("text") .attr("x", 15) .attr("y", 0) .attr("dy", "0.35em") .style("fill", "#666") .text(d => d); // Modern axis labels svg.append("text") .attr("transform", "rotate(-90)") .attr("y", margin.left - 40) .attr("x", -height/2) .attr("text-anchor", "middle") .style("fill", "#666") .style("font-size", "12px") .text("Hair Density (per cm²)"); svg.append("text") .attr("transform", "rotate(90)") .attr("y", -width + margin.right + 90) .attr("x", height/2) .attr("text-anchor", "middle") .style("fill", "#666") .style("font-size", "12px") .text("Temperature (°C)"); return svg.node(); }45:T1893,{ const width = 1000; const height = 700; const margin = {top: 50, right: 100, bottom: 50, left: 120}; const boxWidth = 180; const boxHeight = 220; const lineY = height / 2; const verticalGap = 40; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("font-family", "system-ui, -apple-system, sans-serif"); // Add title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "500") .style("fill", "#1a1a1a") .text("The Evolution of Hair Care Through History"); // Add the main timeline with styled line svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", lineY) .attr("y2", lineY) .attr("stroke", "#666") .attr("stroke-width", 1.5) .style("stroke-dasharray", "4,4"); // Add styled timeline labels svg.append("text") .attr("x", margin.left - 20) .attr("y", lineY) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .style("font-size", "14px") .style("font-weight", "500") .style("fill", "#666") .text("200,000 BCE"); svg.append("text") .attr("x", width - margin.right + 20) .attr("y", lineY) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .style("font-size", "14px") .style("font-weight", "500") .style("fill", "#666") .text("Present"); // Create tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("padding", "12px") .style("font-size", "14px") .style("box-shadow", "2px 2px 6px rgba(0,0,0,0.1)") .style("max-width", "200px"); const xScale = d3.scalePoint() .domain(d3.range(data.length)) .range([margin.left + boxWidth/2, width - margin.right - boxWidth/2]); // Add boxes with interactions data.forEach((d, i) => { const x = xScale(i); const isTop = d.position === "top"; const y = isTop ? lineY - verticalGap - boxHeight : lineY + verticalGap; // Add vertical connector line svg.append("line") .attr("x1", x) .attr("x2", x) .attr("y1", lineY) .attr("y2", isTop ? lineY - verticalGap : lineY + verticalGap) .attr("stroke", "#666") .attr("stroke-width", 1.5) .style("stroke-dasharray", "4,4"); // Create box group with hover interactions const g = svg.append("g") .attr("transform", `translate(${x - boxWidth/2},${y})`) .style("cursor", "pointer") .on("mouseover", function(event) { // Highlight box d3.select(this).select("rect") .style("filter", "drop-shadow(0 0 8px rgba(0,0,0,0.1))") .style("transition", "all 0.2s ease") .attr("stroke", "#000"); // Show tooltip tooltip .style("opacity", 1) .style("transition", "opacity 0.2s ease") .html(` ${d.title}
${d.year}

${d.description} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { // Reset box d3.select(this).select("rect") .style("filter", null) .style("transition", "all 0.2s ease") .attr("stroke", "#ddd"); // Hide tooltip tooltip .style("opacity", 0) .style("transition", "opacity 0.2s ease"); }); // Add styled box g.append("rect") .attr("width", boxWidth) .attr("height", boxHeight) .attr("fill", "white") .attr("stroke", "#ddd") .attr("stroke-width", 1.5) .attr("rx", 8) .style("filter", "drop-shadow(0 0 4px rgba(0,0,0,0.05))"); // Add image with clip path g.append("clipPath") .attr("id", `clip-${i}`) .append("rect") .attr("x", 15) .attr("y", 15) .attr("width", boxWidth - 30) .attr("height", boxWidth - 30) .attr("rx", 6); g.append("image") .attr("x", 15) .attr("y", 15) .attr("width", boxWidth - 30) .attr("height", boxWidth - 30) .attr("clip-path", `url(#clip-${i})`) .attr("preserveAspectRatio", "xMidYMid slice") .attr("href", d.imageUrl) .style("opacity", 0.9); // Add styled text g.append("text") .attr("x", boxWidth/2) .attr("y", boxWidth + 10) .attr("text-anchor", "middle") .style("font-weight", "500") .style("font-size", "14px") .style("fill", "#1a1a1a") .text(d.title); g.append("text") .attr("x", boxWidth/2) .attr("y", boxWidth + 30) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text(d.year); // Add word-wrapped description // const words = d.description.split(/\s+/); // let lines = []; // let currentLine = []; // const maxCharsPerLine = 20; // words.forEach(word => { // let potentialLine = [...currentLine, word].join(' '); // if (potentialLine.length <= maxCharsPerLine && currentLine.length < 3) { // currentLine.push(word); // } else { // if (currentLine.length > 0) { // lines.push(currentLine.join(' ')); // } // currentLine = [word]; // } // }); // if (currentLine.length > 0) { // lines.push(currentLine.join(' ')); // } // g.append("text") // .attr("x", boxWidth/2) // .attr("y", boxWidth + 50) // .attr("text-anchor", "middle") // .style("font-size", "11px") // .style("fill", "#666") // .style("line-height", "1.4") // .selectAll("tspan") // .data(lines) // .join("tspan") // .attr("x", boxWidth/2) // .attr("dy", (d, i) => i === 0 ? 0 : 15) // .text(d => d); }); return svg.node(); }46:T733,// Create the data data = [ { title: "First Hair Tools", year: "75,000 BCE", description: "Humans created the first known tools specifically for hair grooming", position: "top", imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTml0yKErT31-Y0BEl_P4AQTcWQSGgYwGf__w&s" // This will be your image of the women with long hair }, { title: "Ancient Hair Braiding", year: "30,000 BCE", description: "Studies of prehistoric tools show evidence of hair braiding", position: "bottom", imageUrl: "https://richlyadorned.wordpress.com/wp-content/uploads/2017/01/brassempuouysm.jpg?w=364" // This will be your image of the ancient carved head }, { title: "Native Hair Traditions", year: "Pre-colonial Era", description: "In many Native American cultures, hair length was tied to spiritual strength", position: "top", imageUrl: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9SsqFTTAJel2S5Rtt_sYufRWLB8EU3Iknun1sqLcZx2bQG7LrndqcGhPH1QEKuM6XP3JkcRQ_Zjni4VqbwXW6HvBoMb5k1BlgeaHiKLCI5hTT20heymRQKME0L0GiW49dfZeOtfWbwMm/s640/1069200_10151738304254534_165635509_n.jpg" // This will be your image of the braided pattern }, { title: "Mad Hatter Discovery", year: "1800s", description: "Hair analysis helped prove that mercury poisoning affected hat makers (leading to the phrase 'mad as a hatter') ", position: "bottom", imageUrl: "https://i0.wp.com/images.huffingtonpost.com/gen/87687/original.jpg" // This will be your image of the stone tools }, { title: "Hair as Maps", year: "1800s", description: "Hair braiding patterns were used as maps during slavery", position: "top", imageUrl: "https://i.pinimg.com/originals/f4/4a/2a/f44a2a46474873a3a25c39b78baeb398.jpg" // This will be your Mad Hatter image } ]47:T93b,function createVisualization() { const width = 800; const height = 250; const margin = { top: 20, right: 40, bottom: 20, left: 40 }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // Add background image with heavy blur svg.append("defs") .append("filter") .attr("id", "blur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 15); svg.append("image") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("xlink:href", "https://images.unsplash.com/photo-1601056975077-e1ea2159c8f0") .attr("filter", "url(#blur)"); svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "rgba(0, 0, 0, 0.4)"); const textContent = "Now that we have had a deep dive into the science and history, let's make this personal. Answer a few questions about your hair to see how you fit into the global story."; svg.append("text") .attr("x", margin.left) .attr("y", margin.top) .attr("font-family", "Helvetica, sans-serif") .attr("font-weight", 300) .attr("font-size", "16pt") .attr("fill", "white") .call(wrapText, width - margin.left - margin.right); function wrapText(text, width) { text.each(function() { var text = d3.select(this), words = textContent.split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, x = text.attr("x"), y = text.attr("y"), dy = 0, tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); } return svg.node(); } 48:Tbb8,{ const width = 1200; const height = 390; const margin = { top: 40, right: 40, bottom: 40, left: 40 }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // Create organic, hair-like texture pattern const defs = svg.append("defs"); const pattern = defs.append("pattern") .attr("id", "hairTexture") .attr("patternUnits", "userSpaceOnUse") .attr("width", 200) .attr("height", 400) .attr("opacity", 1); // Generate multiple curved lines for hair-like texture for (let i = 0; i < 50; i++) { const points = Array.from({length: 20}, (_, j) => { return [ Math.random() * 200, j * 20 + Math.random() * 10 ]; }); const lineGenerator = d3.line() .x(d => d[0]) .y(d => d[1]) .curve(d3.curveBasis); pattern.append("path") .attr("d", lineGenerator(points)) .attr("stroke", "#935E3F") // Brown color for texture .attr("stroke-width", 0.5) .attr("fill", "none"); } // Add background with hair texture svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "url(#hairTexture)"); // Add brown overlay svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#935E3F") .attr("opacity", 0.75); // Add heading with white text svg.append("text") .attr("x", width / 2) .attr("y", height / 3) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Helvetica, Arial, sans-serif") .attr("font-weight", 100) .attr("font-size", "50px") .attr("fill", "white") .text("Discover Your Hair Story"); // Add main text in white const mainText = svg.append("text") .attr("x", width / 2) .attr("y", height / 2 + 20) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Helvetica, Arial, sans-serif") .attr("font-weight", 300) .attr("font-size", "24px") .attr("fill", "white") .attr("line-height", 1.5); // Split text into multiple lines mainText.append("tspan") .attr("x", width / 2) .attr("dy", "0em") .text("Now that we have had a deep dive into the science and history,"); mainText.append("tspan") .attr("x", width / 2) .attr("dy", "1.5em") .text("let's make this personal. Answer a few questions about your hair"); mainText.append("tspan") .attr("x", width / 2) .attr("dy", "1.5em") .text("to see how you fit into the global story."); // Add decorative wavy lines in white const wavyLine = (x, amplitude, frequency) => { return Array.from({length: 20}, (_, i) => { const t = i / 19; return [ x + amplitude * Math.sin(2 * Math.PI * frequency * t), margin.top + t * (height - 2 * margin.top) ]; }); }; const curveGenerator = d3.line().curve(d3.curveBasis); return svg.node(); } 49:T15ec,{ const width = 1700; const height = 560; const margin = { top: 30, right: 50, bottom: 50, left: 0 }; const cellWidth = 150; const cellHeight = 405; const gap = 20; const textPadding = 120; const curveHeight = cellHeight - 180; const bottomMargin = 40; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); const lineGenerator = d3.line() .x(d => d[0]) .y(d => d[1]) .curve(d3.curveBasis); // Function to generate S-curve points with more pronounced loops const generateSCurve = (amplitude, frequency, phase = 0) => { return Array.from({length: 100}, (_, i) => { const t = i / 99; const x = 67 + amplitude * Math.sin(2 * Math.PI * frequency * t + phase); const y = textPadding + t * curveHeight + bottomMargin; return [x, y]; }); }; // Modified curves with more pronounced S patterns const curves = { straight: Array.from({length: 100}, (_, i) => [ 67, textPadding + (i / 99) * curveHeight + bottomMargin ]), softWavy: generateSCurve(30, 2), wavy: generateSCurve(35, 2.5), veryWavy: generateSCurve(40, 3), curly: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 25; const numLoops = 6; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }), veryCurly: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 20; const numLoops = 8; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }), tightCurls: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 15; const numLoops = 10; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }), coil: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 12; const numLoops = 12; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }), zigzagCoils: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 10; const numLoops = 14; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }), tightZigzag: Array.from({length: 100}, (_, i) => { const t = i / 99; const loopSize = 8; const numLoops = 16; return [ 67 + loopSize * Math.sin(2 * Math.PI * numLoops * t), textPadding + t * curveHeight + bottomMargin ]; }) }; const boxNames = [ "Straight", "Soft Wavy", "Wavy", "Very Wavy", "Curly", "Very Curly", "Tight Curls", "Coil", "Zig-zag Coils", "Tight Zig-Zag" ]; const boxNamesSecondary = [ "1", "2A", "2B", "2C", "3A", "3B", "3C", "4A", "4B", "4C" ]; boxNames.forEach((name, index) => { const x = margin.left + index * (cellWidth + gap); const g = svg.append("g") .attr("transform", `translate(${x},${margin.top})`) .attr("cursor", "pointer") .on("click", function() { handleClick.call(this, index); }); g.append("rect") .attr("id", `box-${index}`) .attr("width", cellWidth) .attr("height", cellHeight) .attr("fill", "white") .attr("stroke", "lightgrey") .attr("stroke-width", 2); const curveData = index === 0 ? curves.straight : index === 1 ? curves.softWavy : index === 2 ? curves.wavy : index === 3 ? curves.veryWavy : index === 4 ? curves.curly : index === 5 ? curves.veryCurly : index === 6 ? curves.tightCurls : index === 7 ? curves.coil : index === 8 ? curves.zigzagCoils : curves.tightZigzag; g.append("path") .attr("d", lineGenerator(curveData)) .attr("stroke", "black") .attr("stroke-width", 6) .attr("fill", "none"); g.append("text") .attr("id", `text-${index}`) .attr("x", cellWidth / 2) .attr("y", cellHeight / 12) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Arial, sans-serif") .attr("font-size", "23px") .attr("font-weight", "300") .attr("fill", "black") .text(boxNames[index]); g.append("text") .attr("id", `text-secondary-${index}`) .attr("x", cellWidth / 2) .attr("y", cellHeight / 6) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Arial, sans-serif") .attr("font-size", "18px") .attr("font-weight", "800") .attr("fill", "#935E3F") .text(boxNamesSecondary[index]); }); let selectedBox = null; function handleClick(index) { console.log(`${boxNames[index]} clicked`); if (selectedBox !== null) { d3.select(`#box-${selectedBox}`) .attr("fill", "white") .attr("stroke", "lightgrey"); d3.select(`#text-${selectedBox}`).text(boxNames[selectedBox]); } d3.select(`#box-${index}`) .attr("fill", "#935E3F") .attr("opacity", 0.5) .attr("stroke", "#935E3F"); selectedBox = index; } return svg.node(); }4a:T1368,// Create the visualization { const width = 400; // Adjusted width for 5 columns const height = 180; // Adjusted height for 2 rows (reduced height) const margin = { top: 10, right: 10, bottom: 30, left: 10 }; const cellWidth = 50; const cellHeight = 50; const gap = 20; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // Calculate positions for cells const xScale = d3.scaleLinear() .domain([0, 4]) // 5 columns .range([margin.left, width - margin.right - cellWidth]); // Decrease vertical range to reduce the gap between the rows const yScale = d3.scaleLinear() .domain([0, 1]) // 2 rows .range([margin.top, height - margin.bottom - cellHeight - 5]); // Reduce space at the bottom // Array of colors for each box (10 unique colors for 2x5 grid) const boxColors = [ "#000000", "#120906", "#47372F", "#805A46", "#9A8358", "#935E3F", "#A4473A", "#AE927C", "#CBBB9D", "#E9DAC3" ]; // Labels for each box const labels = [ "Black", "Dark brown", "Light ash brown", "Medium copper blonde", "Medium copper blonde", "Caramel", "Ginger", "Light ash blonde", "Very light natural blonde", "Extreme blonde" ]; // Variable to store the currently selected box let selectedBox = null; let highlightBox = null; // Create 2x5 grid (2 rows and 5 columns) for (let row = 0; row < 2; row++) { for (let col = 0; col < 5; col++) { const x = xScale(col); const y = yScale(row); const g = svg.append("g") .attr("transform", `translate(${x},${y})`) .attr("cursor", "pointer") .on("click", function () { handleClick.call(this, row, col); // Pass row and col to handleClick }); // Add rectangle with unique color const boxColor = boxColors[(row * 5 + col) % boxColors.length]; g.append("rect") .attr("id", `box-${row}-${col}`) // Use unique ID for each box .attr("width", cellWidth) .attr("height", cellHeight) .attr("fill", boxColor) .attr("stroke", boxColor) // Set stroke color same as the fill .attr("stroke-width", 2); // Add label text below the box (from the labels array) g.append("text") .attr("id", `text-${row}-${col}`) // Use unique ID for each text element .attr("x", cellWidth / 2) // Centered horizontally .attr("y", cellHeight + 12) // Position below the box .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Helvetica, sans-serif") // Use sans-serif font .attr("font-weight", "300") .attr("fill", "black") // Ensure text is visible .attr("font-size", "5pt") // Set font size to 16pt .text(labels[(row * 5 + col)]); // Set the label from the labels array } } // Function to handle click events function handleClick(row, col) { console.log(`Cell (${row},${col}) clicked`); // If there's already a selected box, reset its highlight if (selectedBox !== null) { const [prevRow, prevCol] = selectedBox; // Reset the previously selected box's highlight and opacity d3.select(`#box-${prevRow}-${prevCol}`) .attr("opacity", 1) // Restore the original opacity // Reset text to the original placeholder name d3.select(`#text-${prevRow}-${prevCol}`).text(labels[(prevRow * 5 + prevCol)]); // Remove the previously added highlight box (if any) if (highlightBox) { highlightBox.remove(); } } // Get the color of the selected box const boxColor = d3.select(`#box-${row}-${col}`).attr("fill"); // Highlight the clicked box with a slightly transparent effect d3.select(`#box-${row}-${col}`) .attr("opacity", 0.8); // Keep opacity for the selected box // Create a larger box around the selected color with the same stroke color as the inside highlightBox = svg.append("rect") .attr("x", xScale(col) - 5) // Position slightly outside the selected box .attr("y", yScale(row) - 5) // Position slightly outside the selected box .attr("width", cellWidth + 10) // Increase width to make the box larger .attr("height", cellHeight + 10) // Increase height to make the box larger .attr("stroke", boxColor) // Same stroke color as the selected box .attr("stroke-width", 0.5) // Set thicker stroke .attr("fill", "none"); // No fill, just a border // Change the text of the clicked box to allow editing const currentText = d3.select(`#text-${row}-${col}`).text(); const newText = prompt("Enter new label for this box:", currentText); // If newText is not null (user clicked "OK") if (newText !== null) { d3.select(`#text-${row}-${col}`).text(newText); } // Update the selected box index selectedBox = [row, col]; } return svg.node(); } 4b:Tc32,{ const width = 800; const height = 120; // Increased height to accommodate secondary labels const margin = { top: 0, right: 90, bottom: 50, left: 90 }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // Create color scale const colorScale = d3.scaleLinear() .domain([0, 0.2, 0.4, 0.6, 0.8, 1]) .range(["#E9DAC3", "#CBBB9D", "#AE927C", "#D9D9D9", "#D9D9D9", "#2E2E2E"]); // Dark gray // Create x scale const xScale = d3.scaleLinear() .domain([0, 1]) .range([margin.left, width - margin.right]) .clamp(true); // Create the slider track const track = svg.append("line") .attr("x1", xScale.range()[0]) .attr("x2", xScale.range()[1]) .attr("y1", height/4) .attr("y2", height/4) .attr("stroke-width", 10) .attr("stroke-linecap", "round"); // Create gradient for track background const gradient = svg.append("defs") .append("linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("x2", "100%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", "#E9DAC3"); gradient.append("stop").attr("offset", "20%").attr("stop-color", "#CBBB9D"); gradient.append("stop").attr("offset", "40%").attr("stop-color", "#AE927C"); gradient.append("stop").attr("offset", "60%").attr("stop-color", "#D9D9D9"); gradient.append("stop").attr("offset", "80%").attr("stop-color", "#D9D9D9"); gradient.append("stop").attr("offset", "100%").attr("stop-color", "#2E2E2E"); // Dark gray track.attr("stroke", "url(#gradient)"); // Add primary labels const primaryLabels = ["Dry", "Mixed", "Medium", "Oily"]; const labelPositions = [0, 0.33, 0.66, 1]; svg.selectAll(".primary-label") .data(primaryLabels) .join("text") .attr("class", "primary-label") .attr("x", (d, i) => xScale(labelPositions[i])) .attr("y", height/2 - 10) .attr("text-anchor", "middle") .attr("font-family", "Arial") .attr("font-size", "16px") .attr("font-weight", "200") .text(d => d); // Add secondary labels const secondaryLabels = [ "Dry roots and dry hair", "Oily roots and dry hair", "Normal roots and normal hair", "Oily roots and oily hair" ]; svg.selectAll(".secondary-label") .data(secondaryLabels) .join("text") .attr("class", "secondary-label") .attr("x", (d, i) => xScale(labelPositions[i])) .attr("y", height/2 +5) .attr("text-anchor", "middle") .attr("font-family", "Arial") .attr("font-weight", "800") .attr("font-size", "10px") .attr("fill", "#935E3F") .text(d => d); // Create draggable handle const handle = svg.append("circle") .attr("r", 12) .attr("cx", xScale(0.5)) .attr("cy", height/8) .attr("fill", colorScale(0.5)) .attr("cursor", "pointer") .call(d3.drag() .on("drag", function(event) { const x = event.x; const value = xScale.invert(x); d3.select(this) .attr("cx", xScale(value)) .attr("fill", colorScale(value)); })); return svg.node(); } 4c:Taae,divider = { const width = 1140; const height = 600; const topMargin = 50; // Add this line to set top margin const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // Image container const imageContainer = svg.append("g") .attr("width", width * 0.3) .attr("height", height - topMargin) .attr("transform", `translate(0, ${topMargin})`); // Move down by topMargin // Background image imageContainer.append("image") .attr("href", "https://example.com/your-image-url.jpg") .attr("width", "100%") .attr("height", "100%") .attr("stroke", "#935E3F") .attr("stroke-width", 3) .attr("preserveAspectRatio", "xMidYMid slice"); // Brown overlay imageContainer.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "#935E3F") .attr("opacity", 0.6) .attr("stroke", "#935E3F") .attr("stroke-width", 3); // Text container const textContainer = svg.append("g") .attr("transform", `translate(${width * 0.3}, ${topMargin})`); // Move down by topMargin // Text box textContainer.append("rect") .attr("width", width * 0.7) .attr("height", height - topMargin) .attr("fill", "white") .attr("stroke", "#935E3F") .attr("stroke-width", 3); // Body text textContainer.append("text") .attr("x", 50) .attr("y", 60) .attr("font-family", "Helvetica") .attr("font-weight", 800) .attr("font-size", "18px") .attr("fill", "#935E3F") .text("60% women in our database resonate!"); // Bigger header text textContainer.append("text") .attr("x", 50) .attr("y", 110) .attr("font-family", "Helvetica") .attr("font-weight", 300) .attr("font-size", "45px") .attr("fill", "black") .text("It closely resembles xyz hair"); // Small body text using foreignObject for wrapping const foreignObject = textContainer.append("foreignObject") .attr("x", 50) .attr("y", 160) .attr("width", width * 0.7 - 100) .attr("height", height - 160 - topMargin); foreignObject.append("xhtml:div") .style("font-family", "Helvetica") .style("font-weight", "300") .style("font-size", "18px") .style("color", "black") .style("overflow-wrap", "break-word") .text("Nam eleifend ullamcorper magna, vel dictum felis blandit sit amet. Curabitur lobortis vestibulum odio, eu aliquam ligula tincidunt id. Nullam non efficitur eros. Donec at pharetra dolor. Proin vulputate venenatis feugiat. Integer gravida ante a augue elementum, sollicitudin imperdiet ex viverra. Cras gravida dolor sit amet arcu efficitur, semper auctor sem dapibus."); return svg.node(); } 4d:[{"id":"17f42fda9161a5a60d4bb586b2f75f21dde311bcddf2cb2ffb508204fd1adfbdf502bec463a2352a0a88b526172007f596591cd1217971647b52e60ad5df2554","href":"https://static.observableusercontent.com/files/17f42fda9161a5a60d4bb586b2f75f21dde311bcddf2cb2ffb508204fd1adfbdf502bec463a2352a0a88b526172007f596591cd1217971647b52e60ad5df2554","name":"Frame1.png","type":"image/png","lastModified":1733277322324.312,"size":1910},{"id":"b980246db0afe03c441aa94d3169458e3b3070b0c0bce1aea94180fcfaa58fd1b6d6893e8b88c5ce9652fd7e496a49f3f8b0b8abbf78a39fee4aaadb24de83c4","href":"https://static.observableusercontent.com/files/b980246db0afe03c441aa94d3169458e3b3070b0c0bce1aea94180fcfaa58fd1b6d6893e8b88c5ce9652fd7e496a49f3f8b0b8abbf78a39fee4aaadb24de83c4","name":"Frame2.png","type":"image/png","lastModified":1733278208319.013,"size":10277},{"id":"8aefff15de7cc45daa461f097c8ae10684e28e6859548b8519f5a400614cac11739fd9ac5ba044299e42cee15f7fd320609043c2bb2869bc4c9171134fb78c63","href":"https://static.observableusercontent.com/files/8aefff15de7cc45daa461f097c8ae10684e28e6859548b8519f5a400614cac11739fd9ac5ba044299e42cee15f7fd320609043c2bb2869bc4c9171134fb78c63","name":"Frame4.png","type":"image/png","lastModified":1733278208369.124,"size":17082},{"id":"3c5e0136663488f3b57d6fa65553e26982a7414d4477bce1c1e57768d8bf2b271880d391014e757588fb34c65355b6c425a26bffd91b00c6b95b27b7bc6c7184","href":"https://static.observableusercontent.com/files/3c5e0136663488f3b57d6fa65553e26982a7414d4477bce1c1e57768d8bf2b271880d391014e757588fb34c65355b6c425a26bffd91b00c6b95b27b7bc6c7184","name":"Frame3.png","type":"image/png","lastModified":1733278208361.811,"size":13610},{"id":"14d6a50c38a1704e475f316d2fe313cb02ca172ce94688e86ca30927929bc60f5c479ca1430a3e7ff2cab9748044c9ac8b976dc597df6eef6e300d4ef51ada09","href":"https://static.observableusercontent.com/files/14d6a50c38a1704e475f316d2fe313cb02ca172ce94688e86ca30927929bc60f5c479ca1430a3e7ff2cab9748044c9ac8b976dc597df6eef6e300d4ef51ada09","name":"Frame8.png","type":"image/png","lastModified":1733278440402.259,"size":32069},{"id":"cca956462810ed64012be82f61be2c8e516b1b9aa9aac004e28169cd0c1409bb1517404088df0fd958fb17400ef88582f62034354a70218a5c07f78bd97714fd","href":"https://static.observableusercontent.com/files/cca956462810ed64012be82f61be2c8e516b1b9aa9aac004e28169cd0c1409bb1517404088df0fd958fb17400ef88582f62034354a70218a5c07f78bd97714fd","name":"Frame9.png","type":"image/png","lastModified":1733278440411.451,"size":28966},{"id":"d9065e39553ccc83d74c0c44fb30a1e31d0f20eb1f83eb74420da77fa906526e8980c992c6e54df4ba23d72ddeb8035ec89c73ad7768cf69831f037c32f57460","href":"https://static.observableusercontent.com/files/d9065e39553ccc83d74c0c44fb30a1e31d0f20eb1f83eb74420da77fa906526e8980c992c6e54df4ba23d72ddeb8035ec89c73ad7768cf69831f037c32f57460","name":"Frame5.png","type":"image/png","lastModified":1733278440402.675,"size":28275},{"id":"f7d03b87c188d14ad5f54532f5d9b5ea8f244f4721a87d4d0b439870fc5a32f62f625d28bc044e341f2c547b361a0b7cd1a712839e36c5525215f11c9428e133","href":"https://static.observableusercontent.com/files/f7d03b87c188d14ad5f54532f5d9b5ea8f244f4721a87d4d0b439870fc5a32f62f625d28bc044e341f2c547b361a0b7cd1a712839e36c5525215f11c9428e133","name":"Frame6.png","type":"image/png","lastModified":1733278440413.884,"size":31141},{"id":"9548a41d98fd09d330823a769f3ac1a3f585bbb1d9dc2df85e66d9fe54099a9f150c1b190fcba08aa0e781e103ba1f3451218e83bec3316c404987de3203bc6a","href":"https://static.observableusercontent.com/files/9548a41d98fd09d330823a769f3ac1a3f585bbb1d9dc2df85e66d9fe54099a9f150c1b190fcba08aa0e781e103ba1f3451218e83bec3316c404987de3203bc6a","name":"Frame10.png","type":"image/png","lastModified":1733278440426.554,"size":36906},{"id":"2dade346c138e19b8767152329889322ca0e1c6c5d5004981dd46e448ab03f255b04256d64e1f33b617d6b5700ce23eba17e3f7b0a34fb5c11987fbe1404c8fd","href":"https://static.observableusercontent.com/files/2dade346c138e19b8767152329889322ca0e1c6c5d5004981dd46e448ab03f255b04256d64e1f33b617d6b5700ce23eba17e3f7b0a34fb5c11987fbe1404c8fd","name":"Frame7.png","type":"image/png","lastModified":1733278440469.516,"size":34395}] 41:{"id":"90f6132799944fc2","slug":null,"title":" The Story of Human Hair ","thumbnail":"300b85d3c37bccab847440f09d996597682108fc644a2559584166d7825b6136","access_level":"public","create_time":"$D2024-11-19T21:09:52.956Z","update_time":"$D2024-12-04T20:35:06.946Z","view_time":null,"first_public_time":"$D2024-11-19T22:30:58.204Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2722a31cbb5fad50","login":"benedicta-gokah","name":"Benedicta Gokah","avatar_url":"https://avatars-next.observableusercontent.com/d8db78ddfcfe2ff02f1b753d574017dcb8397749b707a40a604a75bef3c9c272","tier":"pro_2024","bio":""},"version":826,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1773481c22f7535f","login":"varsha-rao","name":"Varsha Rao","avatar_url":"https://avatars-next.observableusercontent.com/dee8266de9c432070ff4bd2878f2c77d0eb338ec7cccf7f36bd2157fcad059ec","tier":null,"bio":""},{"type":"individual","id":"bce0b2f8a6893db7","login":"benedicta-gokah","name":"Benedicta Gokah","avatar_url":"https://avatars-next.observableusercontent.com/030081bf976d55accfd0f324d43eee3e61e6f728c0d6a6572bf1f63c23caa22b","tier":null,"bio":""}],"members":[{"type":"team","id":"2722a31cbb5fad50","login":"benedicta-gokah","name":"Benedicta Gokah","avatar_url":"https://avatars-next.observableusercontent.com/d8db78ddfcfe2ff02f1b753d574017dcb8397749b707a40a604a75bef3c9c272","tier":"pro_2024","role":"editor"},{"type":"individual","id":"bce0b2f8a6893db7","login":"benedicta-gokah","name":"Benedicta Gokah","avatar_url":"https://avatars-next.observableusercontent.com/030081bf976d55accfd0f324d43eee3e61e6f728c0d6a6572bf1f63c23caa22b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":" The Story of Human Hair ","cells":[{"id":0,"value":"# The Story of Human Hair ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"### What 200,000 years of evolution, 100,000 scientific measurements, and 7.8 billion heads of hair tell us about humanity... \n \n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":643,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"### A WORLD OF DIFFERENCE ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"### From the straight, thick strands of East Asia to the tightly coiled textures of Africa, each variation tells a story of human adaptation. \n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"### CLIMATE AND THE EVOLUTION OF HUMAN HAIR \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"### As humans migrated out of Africa, our hair evolved to adapt to new environments. The data shows a fascinating correlation between climate and hair characteristics. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"### LETS EXPLORE SOME INTERESTING HISTORICAL FACTS \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"### What's your hair texture based on the Andre Walker Hair Scale?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"### You don’t have to be exact—just choose whatever option feels like the closest match to your hair type or texture!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"### Now, tell us about your hair color!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"### Pick a color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"### And, where would you put your hair on the dry to oily scale ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"html`\n \n\n

How old are you?

\n \n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:"$41:body"