28:null 29:["$","title",null,{"children":"Q1 Prices by State | Kaluza | Observable"}] 2e:Ta5b,buttons = { const buttons =html` ` function myfunc(p) { var ss = title.innerHTML; ss= ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " "+ p.innerHTML; } // buttons.querySelector("#a").onclick = () => { // update(mydata2012,stock2012); // var ss = title.innerHTML; // ss = ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " 2012"; // reset_mark(); // } buttons.querySelector("#b").onclick = () => { update(mydata2013,stock2013); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2013"; reset_mark(); } buttons.querySelector("#c").onclick = () => { update(mydata2014,stock2014); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2014"; reset_mark(); } buttons.querySelector("#d").onclick = () => { update(mydata2015,stock2015); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2015"; reset_mark(); } buttons.querySelector("#e").onclick = () => { update(mydata2016,stock2016); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2016"; reset_mark(); } buttons.querySelector("#f").onclick = () => { update(mydata2017,stock2017); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2017"; reset_mark(); } buttons.querySelector("#g").onclick = () => { update(mydata2018,stock2018); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2018"; reset_mark(); } return buttons }2f:T7ee,viewof date = { const svg = d3.select(DOM.svg(width, height)) .style("-webkit-tap-highlight-color", "transparent") .on("mousemove touchmove", moved); svg.append("g") .call(xAxis); svg.append("g") .call(xAxis2); svg.append("g") .call(yAxis); const rule = svg.append("g") .append("line") .attr("y1", height) .attr("y2", 0) .attr("stroke", "#323b45") .attr("stroke-width", 4) .attr("stroke-opacity", .2); rule.append("text") .da const serie = svg.append("g") .style("font", "bold 10px roboto") .selectAll("g") .data(series) .join("g"); serie.append("path") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke", d => z2(d.key)) .attr("d", d => line(d.values)); serie.append("text") .datum(d => ({key: d.key, value: d.values[d.values.length - 1].value})) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) .attr("x", x.range()[1] + 3) .attr("y", d => y(d.value)) .attr("dy", "0.35em") .text(d => d.key) .clone(true) .attr("fill", d => z2(d.key)) .attr("stroke", null); d3.transition() .ease(d3.easeCubicOut) .duration(1500) .tween("date", () => { const i = d3.interpolateDate(x.domain()[1], x.domain()[0]); return t => update(i(t)); }); function update(date) { date = d3.timeDay.round(date); rule.attr("transform", `translate(${x(date) + 0.5},0)`); serie.attr("transform", ({values}) => { const i = bisect(values, date, 0, values.length - 1); return `translate(0,${y(1) - y(values[i].value / values[0].value)})`; }); svg.property("value", date).dispatch("input"); } function moved() { update(x.invert(d3.mouse(this)[0])); d3.event.preventDefault(); } update(x.domain()[0]); return svg.node(); }30:[] 2c:{"id":"bfc18396f6b8bd61","slug":"q1-prices-by-state","title":"Q1 Prices by State","thumbnail":"2a0598ef3bd6283f8ffb45b3981b09af480776f44db975631e08faadcbb54238","access_level":"public","create_time":"$D2019-03-28T01:51:40.265Z","update_time":"$D2019-04-04T00:21:21.520Z","view_time":null,"first_public_time":"$D2019-04-01T03:33:21.379Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"4bcb72c21e16d60e","login":"kaluza-au","name":"Kaluza","avatar_url":"https://avatars-next.observableusercontent.com/39c9c24c6b4a34ab0f637855a57d9594a4f8b2c7171649010d74442651b6ee94","tier":"pro_2024"},"version":810,"publish_version":810,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa28a9480a29f1ad","login":"jessewarburg","name":"Jesse Warburg","avatar_url":"https://avatars-next.observableusercontent.com/597100ef35066b4094ae52236e53868edd0691e238f7241fb6abe0b51615f4e8","tier":null}],"members":[{"type":"team","id":"4bcb72c21e16d60e","login":"kaluza-au","name":"Kaluza","avatar_url":"https://avatars-next.observableusercontent.com/39c9c24c6b4a34ab0f637855a57d9594a4f8b2c7171649010d74442651b6ee94","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Q1 Prices by State","cells":[{"id":1,"value":"md`# Q1 Prices by State\nThis chart shows the relative value of each Flat quarterly ASX Q1 contract for the 12 months before the quarter began (1 Jan 2016) through to the final settled price at 31 March 2017.\n\nIm still working on adding the `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"date","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = ({top: 20, right: 60 , bottom: 60, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"y = {\n const k = d3.nest()\n .key(d => d.name)\n .rollup(data => d3.max(data, d => d.value) / d3.min(data, d => d.value))\n .entries(data)\n .reduce((p, d) => Math.max(p, d.value), 0);\n return d3.scaleLog()\n .domain([1 / k, k])\n .range([height - margin.bottom, margin.top]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"hydroColours4 = [\"#009581\", \"#a51890\", \"#004081\", \"#323b45\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"y2 = d3.scaleLinear()\n .domain(d3.extent(data, d => d.values))\n .range([margin.top, height - margin.bottom])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"z = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"z2 = d3.scaleOrdinal(hydroColours4)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"stroke-opacity\", .2)\n .call(d3.axisBottom(x)\n .ticks(width / 100)\n .tickSize(-height)\n .tickFormat(monthFormat))\n .call(g => g.select(\".domain\").remove()) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"' https://bl.ocks.org/dianaow/0da76b59a7dffe24abcfa55d5b9e163e/0892481142937672adbc801281ffb61466e612e7 '","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"xAxis2 = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom + margin.bottom/2})`)\n .attr(\"stroke-opacity\", .2)\n .call(d3.axisBottom(x)\n .ticks(2)\n .tickSize(0)\n .tickFormat(yearFormat))\n .call(g => g.select(\".domain\").remove()) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(null, x => +x.toFixed(3) + \"×\") \n .tickSize(0))\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"formatDate = d3.timeFormat(\"%B, %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"bisect = d3.bisector(d => d.date).left","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"series = d3.nest().key(d => d.name).entries(data).map(({key, values}) => {\n const v = values[0].value;\n return {key, values: values.map(({date, value}) => ({date, value: value / v}))};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"monthFormat = d3.timeFormat(\"%B\")\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"yearFormat = d3.timeFormat(\"%Y\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"stock2017 = {\n var parse = d3.timeParse(\"%Y-%m-%d\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/jwarburg/5a37da9693fa059b541b5b91f7275fe3/raw/912d706222221f60345958e52fbf4725968e4f74/BVM2019%2520455%2520days.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n //d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"myData2017 = []\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"dataOld = d3.merge(await Promise.all([\"VIC\", \"NSW\", \"QLD\", \"SA\"].map(name => d3.csv(`https://gist.githubusercontent.com/jwarburg/0e59ab3692ab0ca405d7943a503773a1/raw/83e3fa3763dab772ce04f433f6659f8e4986b172/ASX_Q1_2017.csv`, d => {\n const date = parseDate(d[\"textDate\"]);\n return {name, date, value: +d[\"value\"]};\n}))));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"data = Object.assign((await d3.csv(\"https://gist.githubusercontent.com/jwarburg/a5619c20b0caef4f038d2caec03232a1/raw/ae541dcbb58bac78b711046d0037cfcc005c4cc8/ASX_Q1_2017.csv\", d3.autoType)).map(({name, value, textDate}) => ({name, value: value, date: textDate})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"d3_svg_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"