30:Tf70,chart = { const svg = d3.select(DOM.svg(width, height)); svg.style("background-color", "white"); svg.append("g").call(xAxis); var yAxisG = svg.append("g").attr("id", "yAxisG").call(yAxis); var traceLine = svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#141414") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); if (chosenScale.name === "Log") { var points = svg.append("g").attr("id", "points"); data.forEach((d) => { points .append("text") .attr("fill", "black") .attr("x", x(d.date)) .attr("y", y(d.value)) .style("font-family", "sans-serif") .style("font-size", 10) .text(() => { if (d.value <= 500) { if (d.value >= 0.5 || d.value === 0.12 || d.value === 0.01) { return d.value; } } }) .attr("transform", `translate(${width},185)`); }); points.selectAll("text").select(function (d, i) { d3.select(this) .transition() .delay(-3000 + i * 150) .duration(600) .attr("transform", `translate(3,185)`); }); } //add label contrast yAxisG .selectAll("g.tick text") .attr("x", (d, i) => { d3.select(yAxisG._groups[0][0].childNodes[i]) .append("rect") .attr("width", 30) .attr("height", 12) .attr("fill", "white") .attr("x", width * 0.55 - i * width * 0.05 - 15) .attr("y", -9); return width * 0.55 - i * width * 0.05; }) .attr("text-anchor", "middle"); yAxisG.selectAll("g.tick text").raise(); svg .append("text") .text(loc[lang].Ylegend) .style("font-family", "sans-serif") .style("font-size", 10) .style("font-weight", "bold") .attr("transform", "translate(30,180)rotate(-90)"); var lookup = new Date(data[0].date); const bar = svg .append("line") .attr( "style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;pointer-events:none;" ) .attr("y1", 0) .attr("y2", height) .attr("x1", x(lookup)) .attr("x2", x(lookup)); var legend = svg.append("g").style("cursor", "pointer"); legend .append("rect") .attr("fill", "white") .attr("widttransith", 50) .attr("height", 30) .attr("transform", "translate(-25,-18)"); let cost = legend .append("text") .style("font-family", "sans-serif") .style("font-size", 10) .attr("y", 5) .attr("text-anchor", "middle"); let time = legend .append("text") .style("font-family", "sans-serif") .style("font-size", 10) .attr("y", -5) .attr("text-anchor", "middle"); function update(date) { const i = bisect.right(data, date); if (i < data.length && i > 0) { legend.attr("transform", `translate(${x(lookup)},${height / 2})`); time.text(formatTime(data[i - 1].date)); cost.text(data[i - 1].value); } lookup = new Date(date); bar.attr("x1", x(lookup)).attr("x2", x(lookup)); } var hoverRect = svg .append("rect") .attr("fill", "transparent") .attr("width", width) .attr("height", height) .lower() .on("mousemove touchmove", function (event) { const m = d3.pointer(event, this); update(x.invert(m[0])); }) .on("click", function (event) { const m = d3.pointer(event, this); const i = bisect.right(data, x.invert(m[0])); addMilestone(svg, i); }); var yCoords = []; yAxisG.selectAll("g").attr("transform", (d, i) => { yCoords.push(y(d)); return `translate(0,${height * 1.5})`; }); yAxisG.selectAll("g").select(function (d, i) { d3.select(this) .transition() .delay(2000 - i * 250) .duration(600) .attr("transform", () => `translate(0,${yCoords[i]})`); }); traceLine.call(reveal).node(); return svg.node(); }31:T18da,loc=({ "FR": { "title": "Coût du séquençage de l'ADN par mégabase", "Ylegend": "Coût en $US par mégabase (Mb)", "chooseScale": "Changer d'échelle", "months":"mois", "rabinow1": "Le séquençage signifie en fait l’identification de la série de paires de bases sur la carte physique. On discute en ce moment pour savoir s’il est nécessaire d’avoir la séquence complète du génome (après tout, il y a une grande quantité de débarras dont le rôle est actuellement inconnu) ou seulement la séquence de gènes « exprimés » (c’est-à-dire ceux qui codent pour des protéines connues). S’il y a de formidables problèmes technologiques impliqués par tout cela, et de formidables solutions technologiques apparaissant avec la rapidité prévue, les principes et les buts sont assez clairs. « Les moyens techniques sont devenus disponibles pour enraciner la carte physique du génome humain fermement dans la séquence d’ADN elle-même. L’information séquentielle est la langue naturelle de la cartographie génétique. » Bien sûr, la base de données n’est pas une langue mais un code informatique, et par « naturelle » notre scientifique veut probablement dire « plus utile ».", "rabinow2": "Cependant, même lorsque le génome humain sera cartographié et même lorsqu’il sera séquencé, comme le dit Charles Cantor, responsable scientifique du Projet Génome Humain pour le Département de l’Énergie, nous ne saurons rien de la façon dont il fonctionne. Nous aurons une sorte de structure sans fonction. Beaucoup de travail reste encore à faire, et est fait en ce moment, pour résoudre les problèmes scientifiques les plus difficiles : la structure de la protéine, les niveaux émergents de complexité, etc. Rappelons-nous que la totalité du matériel génétique des êtres humains se trouve dans la plupart de nos cellules, mais que nous ne savons pas comment une cellule devient et demeure une cellule du cerveau au lieu d’une cellule du doigt de pied. Ce que nous aurons dans une décennie, ce sera la séquence matérielle du « fini-illimité », une carte séquentielle qui comprendra trois milliards de paires de bases et entre cinquante et cent mille gènes.", "right1":"La baisse du coût du séquençage de l'ADN au cours des deux premières décennies du troisième millénaire est devenue un des symboles d'une révolution biotechnologique en gestation. Il est difficile cependant de se rendre compte à quel point cette baisse a été radicale, à la fois en valeur absolue et en proportion.", "right2":"Ce graphique interactif permet deux types d'explorations. En survolant sa surface, le lecteur peut afficher l'évolution coût du séquençage d'un million de paires de bases (mégabase) sur ces deux décennies. En cliquant sur le graph, on peut fixer ce couple date/coût à un endroit précis. En cliquant autre part, on affiche la durée (en mois) entre ces deux points et l'évolution du coût en proportion (le coût en pourcentage à la première date par rapport à la deuxième).", "right3":"L'autre perspective est celle du changement d'échelle. En changeant depuis l'échelle normale ou linéaire vers l'échelle log (utilisée par défaut) ou Symlog (vous pouvez trouver des détails ici), le lecteur peut se rendre compte à quel point le choix de tel ou tel échelle peut influencer sa compréhension des données présentées. L'échelle log permet de mettre en perspectives trois périodes (2001-2008 | 2008-2012 | 2012-2020). Les deux autres ouvrent d'autres types de perceptions, et donc de réflexion, sur la nature et l'importance de ce changement." }, "EN": { "title": "Cost of DNA sequencing per megabase", "Ylegend": "$ cost per megabase (Mb)", "chooseScale": "Choose scale", "months":"months", "rabinow1": "Sequencing means actually identifying the series of base pairs on the physical map. There is ongoing controversy about whether it is necessary to have the complete sequence of the genome (after all, there are vast regions of junk whose role is currently unknown), the complete set of genes (what most genes do is unknown) or merely the sequence of ‘‘expressed’’ genes (i.e., those genes whose protein products are known). While there are formidable technological problems involved in all this, and formidable technological solutions appearing with the predicted rapidity, the principles and the goal are clear enough.", "rabinow2": "Still, even when the whole human genome is mapped and even when it is sequenced, we will know nothing about how it works. We will have a kind of structure without function. Much more work remains to be done, and currently is being done, on the hard scientific problems: protein structure, emergent levels of complexity, and the rest. Remember, the entire genetic makeup of human beings is found in most of our cells, but how a cell becomes and remains a brain cell instead of a toe cell is not known. What we will have a decade from now is the material sequence of the fini-illimité, a sequence map of 3 billion base pairs and between fifty and one hundred thousand genes.", "right1":"The waning cost of sequencing DNA over the first two decade of the third millenia has become a symbol of a biotechnological revolution in the making. Yet it is cognitively hard to grasp how wide this range has been, both in absolute and relative terms.", "right2":"This interactive graph allows for two main kinds of explorations. By hovering the graph, one can precisely display the computed cost of sequencing a megabase (one million base-pairs) over these two decades. Clicking on the graph will add a marker on this date/cost point. Subsequently clicking on another location of the graph will add another marker and compute the duration (in months) and price difference (that is, the percentage cost of point 1 compared to point 2).", "right3":"The other exploratory perspective is the scale switching. By using the normal, log (default) or Symlog scale (check the Symlog D3 API to learn more), one can understand how treacherous such graphmaking perspectives can be. The log scale here is useful to make three periods appear (2001-2008 | 2008-2012 | 2012-2020). The normal and symlog scales enable other kinds of cognitive perceptions, and possibly reflections." } })32:T99b,function addMilestone(svg,dataIndex) { dataIndex -- var mileStone = svg.append("g") .style("cursor","pointer") .attr("class","milestones") .attr("id","ms"+JSON.stringify(dataIndex)) mileStone .append("line") .attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;") .attr("y1", 0) .attr("y2", height) .attr("x1", x(data[dataIndex].date)) .attr("x2", x(data[dataIndex].date)); var legend = mileStone.append("g").attr("transform",`translate(${x(data[dataIndex].date)},${height/2})`) legend.append("rect").attr("fill","white").attr("width",50).attr("height",30).attr("transform","translate(-25,-18)") legend.append("text").style("font-family","sans-serif").style("font-size",10).attr("y",-5).attr("text-anchor","middle").text(formatTime(data[dataIndex].date)) legend.append("text").style("font-family","sans-serif").style("font-size",10).attr("y",5).attr("text-anchor","middle").text(data[dataIndex].value) mileStone.on("click",function(e){ mileStone.remove() }) const milestones = [...d3.selectAll(".milestones")]; var msIndex =[] milestones.forEach(d=>msIndex.push(d.id.substring(2))) if (msIndex.length>1){ svg.selectAll(".deltas").remove(); for (let k = 0; k < msIndex.length-1; ++k) { let period = Math.round((data[msIndex[k+1]].date-data[msIndex[k]].date)/(1000*60*60*24*30)); let costDiff = Math.round(data[msIndex[k]].value * 100 / data[msIndex[k+1]].value); let xPos = x(data[msIndex[k]].date) + (Math.round(x(data[msIndex[k+1]].date)-x(data[msIndex[k]].date))/2); var delta = mileStone.append("g").attr("class","deltas") delta.append("line").attr("stroke-width",2).attr("stroke","gray") .attr("x1",x(data[msIndex[k]].date)+20) .attr("x2",x(data[msIndex[k+1]].date)-20) .attr("y1",height/2) .attr("y2",height/2) .lower() delta.append("rect").attr("y",height/2-15).attr("x",xPos-25).attr("width",50).attr("height",30).attr("fill","white") delta.append("text").attr("y",height/2-5).attr("x",xPos).text(period + " "+loc[lang].months).style("font-family","sans-serif").style("font-size",10).attr("text-anchor","middle") delta.append("text").attr("y",height/2+5).attr("x",xPos).text(costDiff + "%").style("font-family","sans-serif").style("font-size",10).attr("text-anchor","middle") } } try{svg.append(mileStone)} catch{console.log("error but still works")} }33:[{"id":"74324226c001bb576226566429d7b0448b6690e18b970c7c711d70d0e9a1ca9d07e17f29936fb56ec689e3884fe3e13995d0d41726bfecea71845a235e74a29a","href":"https://static.observableusercontent.com/files/74324226c001bb576226566429d7b0448b6690e18b970c7c711d70d0e9a1ca9d07e17f29936fb56ec689e3884fe3e13995d0d41726bfecea71845a235e74a29a","name":"seq-data@2.csv","type":"text/csv","lastModified":1628874157395.472,"size":1472}] 2e:{"title":"Cost of DNA sequencing per megabase","cells":[{"id":1165,"value":"

${loc[lang].title}

","pinned":false,"hidden":false,"mode":"html"},{"id":1156,"value":"viewof lang = Inputs.radio([\"FR\",\"EN\"],{value:\"EN\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1,"value":"md`Source: Wetterstrand KA. DNA Sequencing Costs: Data from the NHGRI Genome Sequencing Program (GSP) Available at: [www.genome.gov/sequencingcostsdata](http://www.genome.gov/sequencingcostsdata)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"viewof chosenScale = Inputs.radio(scales, {value:scales[1],label: loc[lang].chooseScale, format: x => x.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"

\n\n

\n ${loc[lang].rabinow1}

${loc[lang].rabinow2}\n

\n Paul Rabinow
\n Artificiality and Enlightenment: From Sociobiology to Biosociality (1992)\n

\n${loc[lang].right1}

${loc[lang].right2}

${loc[lang].right3}\n

\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1146,"value":"---\nData table","pinned":false,"hidden":false,"mode":"md"},{"id":991,"value":"viewof rows = Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"---\nData management","pinned":false,"hidden":false,"mode":"md"},{"id":1161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":964,"value":"scales=([{name:\"normal\",scale:d3.scaleLinear()},{name:\"Log\",scale:d3.scaleLog()},{name:\"Symlog\",scale:d3.scaleSymlog()}])","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1207,"value":"repositionScaleChange()","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"function repositionScaleChange(){\nsetTimeout(()=>{\n \ndocument.querySelectorAll(\"form\")[1].style=`position:absolute;left:${width*.55+\"px\"};top:${-height+\"px\"};border :1px solid black;padding-left:5px;background-color:white;cursor:pointer`\n\n \n},2000)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"y = chosenScale.scale\n .domain([d3.min(data, d => d.value / base * 0.9), d3.max(data, d => d.value / base / 0.9)])\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"yAxis = g => g\n.attr(\"transform\", (d,i)=>`translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .tickValues(d3.ticks(...y.domain(), 16))\n .tickFormat(format)\n )\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", d => d === 1 ? null : 0.2)\n .attr(\"x2\", width - margin.left - margin.right))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"format = {\n const f = d3.format(\"+.0%\");\n return x => x === 1 ? \"0\" : (x*100);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.value / base))","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"seq-data@2.csv\").text(), d3.autoType).map(({date, costmb,costgen}) => ({date:timeParse(date), value: costmb})), {y: \"$ Cost per Mb\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"timeParse = d3.timeParse(\"%b-%y\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"base = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"reveal = path => {path.transition()\n .duration(3000)\n .ease(d3.easeLinear)\n .attrTween(\"stroke-dasharray\", function() {\n const length = this.getTotalLength();\n return d3.interpolate(`0,${length}`, `${length},${length}`);\n })\n \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":" formatTime = d3.timeFormat(\"%Y-%m\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"bisect = d3.bisector(d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}