31:T7ee,map = { console.log(baseurl); const svg = d3 .create("svg") .attr("class", "map") .attr("viewBox", [0, 0, mapDim.width, mapDim.height]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const defs = svg.append('defs'); const pattern = defs .append('pattern') .attr('id', 'fill-texture') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 5) .attr('height', 5); pattern .append('rect') .attr('width', 5) .attr('height', 5) .attr('fill', 'lightgray'); pattern .append('path') .attr('d', 'M0 0L5 5ZM5 0L0 5Z') .attr('stroke', 'gray') .attr('stroke-width', 1); const state = svg .append('g') .selectAll('.state') .data(topojson.feature(us, us.objects.states).features) .join('path') .attr('class', 'state') .attr('d', path) .attr('fill', d => { if (mapAnnotations.ageStateColorData.get(d.properties.STUSPS)) { return mapAnnotations.ageStateColorData.get(d.properties.STUSPS)[ yearButon.id ].color; } return `url(${baseurl}#fill-texture)`; }); const side = 10; const legend = svg .append('g') .attr('class', 'age-legend') .attr( 'transform', `translate(${mapDim.width - 120}, ${mapDim.height - 100})` ); const dots = legend .selectAll('g') .data(legendData) .enter() .append('g') .attr('transform', (_, i) => `translate(${i * side}, ${0})`); dots .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', side) .attr('height', side) .attr('fill', d => d[1]); const legendWidth = dots.size() * side; legend .append('text') .attr('x', 0) .attr('y', '-5px') .text('Youngest'); legend .append('text') .attr('x', legendWidth) .attr('y', '-5px') .text('Oldest'); legend .append('text') .text('Age Range') .attr('class', 'legend-title') .attr('x', legendWidth / 2) .attr('y', '-20px'); yield svg.node(); }32:T416,viewof yearButon = { const el = DOM.element('div'); el.classList.add('buttons'); el.style = "display: flex;justify-content: center;align-items: center;"; el.value = { id: 0, hasClicked: false }; const spanAnima = DOM.element('span'); spanAnima.classList.add('click-anima'); const buttons = yearsButtonsData.map((e, i) => { const bt = DOM.element('button'); bt.setAttribute('data-id', i); bt.innerText = e; bt.addEventListener('click', event => update(event)); bt.classList.toggle('active', +i === +el.value.id); if (i >= yearsButtonsData.length - 1) { bt.appendChild(spanAnima); } el.appendChild(bt); return bt; }); const update = event => { if (event) { const { target } = event; if (spanAnima) spanAnima.remove(); el.value.id = +target.getAttribute("data-id"); buttons.forEach((bt, i) => { bt.classList.toggle('active', +i === +el.value.id); }); el.dispatchEvent(new CustomEvent("input")); } }; return update(), el; }33:T4aa,mapAnnotations = { const ageStateColorData = new Map(); const labels = topojson.feature(us, us.objects.states).features.map(e => { const x = path.centroid(e)[0]; const y = path.centroid(e)[1]; const label = e.properties.STUSPS; const custom = mapAnnotationsCustom.find(d => d.note.label === label); const stateData = stateMapData.get(label); // const age = stateData ? stateData.values[yearButon][1] : ''; const age = stateData ? stateData.values[yearButon.id][1] || "N/A" : "N/A"; ageStateColorData.set( label, stateData ? stateData.values.map(d => ({ year: d[0], color: color(+d[1]) })) : '' ); return { note: { label, title: age, align: custom ? (label === 'VT' ? 'middle' : 'dynamic') : '', orientation: custom ? label === 'VT' ? 'topBottom' : 'leftRight' : 'topBottom', custom: !!custom, years: stateData ? stateData.values : null }, offset: 0, type: basetype, x, y, dx: custom ? custom.dx : 0, dy: custom ? custom.dy : 0 }; }); return { labels, ageStateColorData }; }34:T5f5,lineChartAnnotations = [ { note: { bgPadding: 0, label: "Max" }, //can use x, y directly instead of data data: { x: 614, y: 71.7 }, className: "show-bg", dx: 40, dy: -14 }, { note: { bgPadding: 0, label: "Min" }, //can use x, y directly instead of data data: { x: 614, y: 149 }, className: "show-bg", dx: 40, dy: 14 }, { note: { bgPadding: 0, label: "Median" }, //can use x, y directly instead of data data: { x: 614, y: 123 }, className: "show-bg", dx: 40, dy: -14 }, { note: { bgPadding: 0, label: "In 1999, the age of consent in Hawaii was 14, the lowest at the time in the United States.", wrap: 150, lineType: "vertical", align: "top" }, //can use x, y directly instead of data data: { x: 547, y: 174 }, className: "show-bg", subject: { radius: 13.99917351869263 }, dx: -32, dy: 170, type: d3.annotationCalloutCircle }, { note: { bgPadding: 0, label: "In 1885, the age of consent in Delaware was 7 years old.", wrap: 150, lineType: "vertical", align: "top" }, //can use x, y directly instead of data data: { x: 42, y: 355 }, className: "show-bg", subject: { radius: 13.99917351869263 }, dx: 82, dy: 8, type: d3.annotationCalloutCircle } ]35:T99c,mapAnnotationsCustom = [ { x: 740.0849895461586, y: 268.9751849465421, dx: 61.118896484375, dy: 72.91372680664062, note: { label: "DC", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 743.4746223867401, y: 265.89961992131657, dx: 57.9022216796875, dy: 48.25177001953125, note: { label: "MD", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 815.4069125271898, y: 126.2672009342402, dx: 39.673583984375, dy: 8.578094482421875, note: { label: "ME", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 787.8938928856286, y: 205.75244924877535, dx: 67.55242919921875, dy: 47.179473876953125, note: { label: "CT", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 761.065598396688, y: 262.7419972859574, dx: 40.745849609375, dy: 23.5897216796875, note: { label: "DE", title: "7", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 798.0169056737703, y: 191.16485949689456, dx: 57.90216064453125, dy: 2.1445159912109375, note: { label: "MA", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 793.4707328728683, y: 164.364382245589, dx: 62.191162109375, dy: 0, note: { label: "NH", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 767.8506848054253, y: 238.40275364135388, dx: 34.3123779296875, dy: 20.373016357421875, note: { label: "NJ", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 803.736373653626, y: 200.8502403038496, dx: 52.540771484375, dy: 22.517471313476562, note: { label: "RI", title: "10", align: "dynamic", orientation: "leftRight", custom: true } }, { x: 777.5488720941044, y: 160.9148348403736, dx: -1.07232666015625, dy: -23.58971405029297, note: { label: "VT", title: "10", align: "middle", orientation: "topBottom", custom: true } } ]36:Tbec,styles = { yield html` `; }37:[{"id":"a9b2e5da3c4488412de18a0379cea9a7230224c88bef8c1280b76eaa8e2b15e222145cf1cbe118d71b021055922122c38138b3a4d1a391394f90e7a345b6586e","href":"https://static.observableusercontent.com/files/a9b2e5da3c4488412de18a0379cea9a7230224c88bef8c1280b76eaa8e2b15e222145cf1cbe118d71b021055922122c38138b3a4d1a391394f90e7a345b6586e","name":"us-all-states-20m-ligth-basic@1.json","type":"application/json","lastModified":1583348089868.162,"size":57828},{"id":"d8cbe99448eaa86dd22bfe4134248d5557141e5bfeffe59b76f9e7282d77012612ccf3f3f40ed89fa4922c602c6fab1c4d6d25863e7c88fbdf7c95543a64c480","href":"https://static.observableusercontent.com/files/d8cbe99448eaa86dd22bfe4134248d5557141e5bfeffe59b76f9e7282d77012612ccf3f3f40ed89fa4922c602c6fab1c4d6d25863e7c88fbdf7c95543a64c480","name":"age of consent information.csv","type":"text/csv","lastModified":1583370069558.606,"size":1459}] 2f:{"title":"Age of Consent Through the Years in the United States.","cells":[{"id":0,"value":"md`# Age of Consent Through the Years in the United States.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2040,"value":"md`\nOriginal content published in the article\n\n[Illegal Or Just Creepy? The Complicated History of Age of Consent](https://interactive.yr.media/the-complicated-history-of-age-of-consent/)
\nAn interactive report on the history and cultural politics of \"age of consent\" laws and what they reveal about the boundary between relationships and crimes.
\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"md`## Map Age of Consent, 1885-2014`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"md`## Graphing Change in Age of Consent, 1885-2014`","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"lineChart = {\n lineChartAnnotations;\n const svg = d3\n .create(\"svg\")\n .attr(\"class\", \"linechart\")\n .attr(\"viewBox\", [0, 0, lineChartDim.width + 50, lineChartDim.height])\n .style(\"overflow\", \"visible\");\n\n svg\n .append(\"g\")\n .attr(\"class\", \"axis\")\n .call(xAxis);\n svg\n .append(\"g\")\n .attr(\"class\", \"axis\")\n .call(yAxis);\n\n const serie = svg\n .selectAll(\".serie\")\n .data(lineChartData.points)\n .enter()\n .append(\"g\")\n .attr(\"class\", \"serie\");\n\n serie\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"stroke\", d => d.color)\n .attr(\"d\", d => line(d.values));\n\n serie\n .selectAll(\"circle\")\n .data(d => d.values)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", (d, i) => x(lineChartData.years[i]))\n .attr(\"cy\", d => y(d))\n .attr(\"r\", 3);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1791,"value":"md`\n_{(Source: \"[Jailbait: The Politics of Statutory Rape Laws in the United States ](https://www.sunypress.edu/p-3847-jailbait.aspx)\", by Carolyn Cocco (2004).Prof. Cocca provided updated 2014 data to [YR Media](https://yr.media) directly)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2337,"value":"md`### code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"makeLineChartAnn = {\n const svg = d3.select(lineChart);\n const annotations = makeAnnotations(lineChartAnnotations).accessors({\n x: d => d.x,\n y: d => d.y\n });\n svg\n .append('g')\n .attr('class', 'annotation-group')\n .call(annotations)\n .on('dblclick', function() {\n annotations.editMode(!annotations.editMode()).update();\n });\n return annotations;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"line = d3\n .line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(lineChartData.years[i]))\n .y(d => y(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(lineChartData.years))\n .range([margin.left, lineChartDim.width - margin.right])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"y = d3\n .scaleLinear()\n .domain([\n d3.min(lineChartData.points, d => d3.min(d.values)),\n d3.max(lineChartData.points, d => d3.max(d.values) + 2)\n ])\n .range([lineChartDim.height - margin.bottom, margin.top])\n .nice(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${lineChartDim.height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(5)\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .selectAll(\".tick line\")\n .clone()\n .attr(\"y2\", -(lineChartDim.height - margin.bottom - margin.top))\n .attr(\"stroke-opacity\", 0.2)\n )\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"y\", \"-1em\")\n .attr(\"x\", \"-0.5em\")\n\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(lineChartData.x)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(y)\n .ticks(5)\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .selectAll(\".tick line\")\n .clone()\n .attr(\"x2\", lineChartDim.width - margin.left - margin.right)\n .attr(\"stroke-opacity\", 0.2)\n )\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", \"0.5em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"dominant-baseline\", \"hanging\")\n .text(lineChartData.y)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"lineChartData = {\n const years = rawData.columns.slice(2);\n const points = [\n {\n name: \"min\",\n color: \"#111111\",\n values: years.map(year => d3.min(rawData, e => e[year]))\n },\n {\n name: \"max\",\n color: \"#333333\",\n values: years.map(year => d3.max(rawData, e => e[year]))\n },\n {\n name: \"median\",\n color: \"#6e6e6e\",\n values: years.map(year => d3.median(rawData, e => e[year]))\n }\n ];\n\n return {\n years: years.map(year => d3.timeParse(\"%Y\")(year)),\n points,\n y: \"Age\",\n x: \"Years\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"fixCustomAnnotations = {\n const svg = d3.select(map);\n const annotations = makeAnnotations(mapAnnotations.labels);\n svg\n .append('g')\n .attr('class', 'annotation-group')\n .call(annotations);\n svg\n .select('.annotation-group')\n .selectAll('.annotation-note-title')\n .select('tspan')\n .attr(\"data-mode\", e =>\n e.note.years ? e.note.years[yearButon.id][1] || \"N/A\" : \"N/A\"\n )\n .attr('dy', 0);\n svg\n .select('.annotation-group')\n .selectAll('.annotation-note-label')\n .attr('y', 0)\n .select('tspan');\n svg\n .select('.annotation-group')\n .selectAll('.annotation-note-label')\n .filter(d => d.note.label === 'VT')\n .attr('y', 0)\n .select('tspan');\n svg\n .select('.annotation-group')\n .selectAll('.annotation-note-content')\n .filter(d => d.note.label === 'VT')\n .attr('transform', (d, i, nodes) => {\n const { x, y } = getTransform(nodes[i]);\n return `translate(${x} ${y * 0.1})`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"stateMapData = {\n const years = rawData.columns.slice(2);\n return new Map(\n rawData.map(e => [\n e.Abbr,\n {\n abbr: e.Abbr,\n state: e.State,\n values: years.map(y => [+y, +e[y]])\n }\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"yearsButtonsData = [...stateMapData][0][1].values.map(e => e[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"allAges = [...stateMapData].map(e => e[1].values.map(d => +d[1])).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"ageRange = d3.extent(allAges)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"allUniqueAges = allAges\n .filter((e, i, values) => values.indexOf(e) === i)\n .sort((a, b) => a - b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"legendData = allUniqueAges.map(age => [age, color(age)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"color = val => {\n if (!isNaN(val)) {\n return d3.interpolateGreys(\n 0.7 - ((val - ageRange[0]) * (0.7 - 0)) / (ageRange[1] - ageRange[0])\n );\n }\n return `url(${baseurl}#fill-texture)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"makeAnnotations = labels => {\n return d3.annotation().annotations(labels);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`### consts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"baseurl = location.href","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"margin = ({ top: 20, right: 20, bottom: 20, left: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"mapDim = ({ width: 850, height: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"lineChartDim = ({ width: 660, height: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"basetype = d3.annotationCustomType(d3.annotationLabel, {\n note: {\n padding: 0,\n bgPadding: 0,\n wrap: 10\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"md`### imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"rawData = // fetch(\n// \"https://interactive.yr.media/the-complicated-history-of-age-of-consent/data/age_of_consent_data.csv\"\n// \"https://gist.githubusercontent.com/radames/756cdd121353596b473c99ff86b35534/raw/96263da7fd38e0f07e0a1af2e74de527674ff7a2/age_of_consent_data.csv\"\n// \"https://gist.githubusercontent.com/radames/756cdd121353596b473c99ff86b35534/raw/484ffcdc2b16dda335d96cff8f6eb29011ee4e25/age_of_consent_data.csv\"\n// )\n// .then(d => d.text())\nFileAttachment(\"age of consent information.csv\")\n .text()\n .then(d =>\n d3.csvParse(d, args =>\n Object.assign(args, {\n 1885: +args[\"1885\"],\n 1890: +args[\"1890\"],\n 1920: +args[\"1920\"],\n 1999: +args[\"1999\"],\n 2014: +args[\"2014\"]\n })\n )\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"us = // \"https://interactive.yr.media/the-complicated-history-of-age-of-consent/data/us-all-states-20m-ligth-basic.json\" // /fetch(\n// \"https://gist.githubusercontent.com/radames/3e90c0cc7aadbc370d8cfd04fe3a140b/raw/0f734bcd3b0c0068d2515599bb0ba4cc9d318858/us-all-states-20m-ligth-basic.json\").then(d => d.json())\nawait FileAttachment(\"us-all-states-20m-ligth-basic@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-svg-annotation@2\", \"d3-array@^2.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"projection = d3.geoAlbersUsa().translate([mapDim.width / 2, mapDim.height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"getTransform = el => {\n const transform = d3.select(el).style('transform');\n const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n g.setAttributeNS(null, 'transform', transform);\n const value = g.transform.baseVal.consolidate();\n if (!value) {\n return { x: 0, y: 0 };\n }\n return { x: value.matrix.e, y: value.matrix.f };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}