30:Tbdb,chart = { const svg = d3.select(DOM.svg(width,height)) .attr("viewBox", [0,0,width,height]) .style("background-color","#ded6da") svg.append("text") .attr("x",width/2) .attr("y",margin.top-180) .style("font-weight","bold") .style("font-size","1.7em") .style("text-anchor","middle") .text("Fertility") svg.append("g") .attr("fill","none") .attr("stroke-width",1.5) .attr("stroke-opacity", 1) // .attr("stroke-dasharray","5") .selectAll("path") .data(data) .join("path") .attr("stroke",d=>color(d.Diagnosis)) .attr("d", d=>line(d3.cross(keys, [d], (key, d) => [key, d[key]]))) svg.append("g") .selectAll("g") .data(keys) .join("g") .attr("transform", d=> `translate(${x(d)})`) .each(function(d) {d3.select(this).call(d3.axisLeft(y.get(d)))}) .style("stroke-width",2) .style("font-weight","bold") svg.append("circle") .attr("cx",margin.left+10) .attr("cy",height-310) .attr("r",10) .style("fill","white") svg.append("text") .attr("x",margin.left+30) .attr("y",height-305) .style("font-weight","bold") .text("- normal diagnosis") svg.append("circle") .attr("cx",margin.left+10) .attr("cy",height-285) .attr("r",10) .style("fill","#1f15e6") svg.append("text") .attr("x",margin.left+30) .attr("y",height-280) .style("font-weight","bold") .text("- altered diagnosis") svg.append("text") .attr("x",margin.left) .attr("y",height-250) .style("font-weight","bold") .text("Age at the time of analysis:- between 18 - 36 years old.") svg.append("text") .attr("x",margin.left) .attr("y",height-220) .style("font-weight","bold") .text("Childhood Diseases:- 0: yes, 1: no") svg.append("text") .attr("x",margin.left) .attr("y",height-190) .style("font-weight","bold") .text("Accident or serious trauma:- 0: yes, 1: no") svg.append("text") .attr("x",margin.left) .attr("y",height-160) .style("font-weight","bold") .text("Surgical Intervention:- 0: yes, 1: no") svg.append("text") .attr("x",margin.left) .attr("y",height-130) .style("font-weight","bold") .text("High fevers in last year:- less than 3 months ago: -1, more than 3 months ago: 0, no: 1") svg.append("text") .attr("x",margin.left) .attr("y",height-100) .style("font-weight","bold") .text("Alcohol:- several times a day: 0.2, everyday: 0.4, several times a week: 0.6, once a week: 0.8, hardly or never: 1 ") svg.append("text") .attr("x",margin.left) .attr("y",height-70) .style("font-weight","bold") .text("Smoking:- never: -1, occasional: 0, daily: 1") svg.append("text") .attr("x",margin.left) .attr("y",height-40) .style("font-weight","bold") .text("Number of hours spent sitting:- 0,1") return svg.node() }31:[{"id":"c9aa21f40b8ad02a04d2374704af4f18251e1a350370c8c6c44884150e3428f30cc562248464b61f3ca0ce8d45f955446dba436717a14a41295603b2bf90095d","href":"https://static.observableusercontent.com/files/c9aa21f40b8ad02a04d2374704af4f18251e1a350370c8c6c44884150e3428f30cc562248464b61f3ca0ce8d45f955446dba436717a14a41295603b2bf90095d","name":"fertilityData.csv","type":"text/csv","lastModified":1618517497766.154,"size":2829}] 2e:{"title":"Fertility","cells":[{"id":0,"value":"html`

Fertility

Week 3:Relationships. Day 15:Multivariate.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"html`

Data Credit:\nUCI Machine Learning Repository: Fertility Data Set

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"annotations = {\n chart\n const annotations = keys.map((d,i)=>{\n return{\n x:x(d),\n y:240,\n dy:-30,\n dx: 0,\n color:\"black\",\n note:{\n title:d\n }\n }})\n const type = d3.annotationCustomType(\n d3.annotationLabel,\n {\"className\":\"custom\",\n \"connector\":{\"end\":\"dot\"},\n \"note\":{\"lineType\":\"horizontal\",\n \"align\":\"middle\"}})\n \n const makeAnnotations = d3.annotation()\n .type(type)\n .textWrap(80)\n .annotations(annotations)\n \n d3.select(\"svg\").append(\"g\")\n .call(makeAnnotations)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"color = d3.scaleOrdinal()\n .domain(data.map(d=>d.Diagnosis))\n .range([\"white\",\"#1f15e6\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"line = d3.line()\n .defined(([, value]) => value != null)\n .x(([key]) => x(key))\n .y(([key, value]) => y.get(key)(value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"y = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(data, d=> d[key]), [margin.top, height - margin.bottom])]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"x = d3.scalePoint(keys, [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"keys = data.columns.slice(0,8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({top: 250, right: 50, bottom: 350, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = FileAttachment(\"fertilityData.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6','d3-svg-annotation')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}