2a:null 2b:["$","title",null,{"children":"Movies ratings and runtime timeseries | Amal Alabdulkarim | Observable"}] 30:T6da,add_data = function(){ x.domain(d3.extent(data[0], function(d) { return d.year; })) y.domain([0, d3.max(data[0], function (d) { return d.rating; })]) x2.domain(x.domain()) y2.domain(y.domain()) focus.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(xAxis) focus.append("g") .attr("class", "axis axis--y") .call(yAxis) var color = d3.scaleOrdinal(["#8fb03d","#ca66c8","#5aa554","#946fd1","#c4a942","#537bdd","#c9822d","#4d3585","#45c097","#903280","#9d8a42","#668cd1","#c75d34","#c585cc","#99432b","#dc6baa","#dc5559","#8c2a5c","#db5987","#b44858"]); for (var i = 0 ; i < data.length ; i++){ Line_chart.append("path") .datum(data[i]) .attr("class", "line") .style("stroke", color(i)) .attr("d", line) context.append("path") .datum(data[i]) .attr("class", "line") .style("stroke", color(i)) .attr("d", line2) var series = legend.append('div'); series.append('div').attr("class", "series-marker").style("background-color", color(i)); series.append('p').text(data[i][0].genre); data[i].legend = series; } context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height2 + ")") .call(xAxis2) context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, x.range()) svg.append("rect") .attr("class", "zoom") .attr("width", width) .attr("height", height) .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(zoom) console.log(data[0]) }31:T711,html ``32:[] 2e:{"id":"e5791485374cf6a6","slug":"movies-ratings-and-runtime-timeseries","title":"Movies ratings and runtime timeseries","thumbnail":"4543c10547926e5f7fedf2731e5f4300d36fd7c90320281c912de59d2385e4ed","access_level":"public","create_time":"$D2019-03-03T02:17:17.245Z","update_time":"$D2019-03-23T00:19:50.266Z","view_time":null,"first_public_time":"$D2019-03-03T20:02:23.322Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"745d9f059f19555f","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":"starter_2024"},"version":636,"publish_version":636,"role":null,"authored":false,"authors":[{"type":"individual","id":"e615fe64d4444f84","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":null}],"members":[{"type":"individual","id":"e615fe64d4444f84","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Movies ratings and runtime timeseries","cells":[{"id":0,"value":"md`# Movies ratings and runtime timeseries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"html `Load Library and Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"rating_data_genre = function() { return Math.ceil(d3.randomUniform(1,10)()*100)/100}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"years = x.ticks(d3.timeYear.every(1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"genre = [\"Drama\",\"Comedy\",\"Documentary\",\"News\",\"Talk-Show\",\"Action\",\"Animation\", \"Romance\",\"Horror\",\"Fantasy\",\"Sci-Fi\",\"Thriller\",\"Mystery\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"data = d3.range(13).map(function(i){\n var genre_data = []\n for(var j = 0; jMain GraphData Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"line = d3.line()\n .x(function (d,i) { return x(d.year) })\n .y(function (d,i) { return y(d.rating) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"line2 = d3.line()\n .x(function (d) { return x2(d.year) })\n .y(function (d) { return y2(d.rating) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"clip = svg.append(\"defs\").append(\"svg:clipPath\")\n .attr(\"id\", \"clip\")\n .append(\"svg:rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"x\", 0)\n .attr(\"y\", 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"Line_chart = svg.append(\"g\")\n .attr(\"class\", \"focus\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")\n .attr(\"clip-path\", \"url(#clip)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"focus = svg.append(\"g\")\n .attr(\"class\", \"focus\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"context = svg.append(\"g\")\n .attr(\"class\", \"context\")\n .attr(\"transform\", \"translate(\" + margin2.left + \",\" + margin2.top + \")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"add_data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"html ` Brush Code: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"brush = d3.brushX()\n .extent([[0, 0], [width, height2]])\n .on(\"brush end\", brushed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"html ` Zoom Code: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"zoom = d3.zoom()\n .scaleExtent([1, Infinity])\n .translateExtent([[0, 0], [width, height]])\n .extent([[0, 0], [width, height]])\n //.on(\"zoom\", zoomed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"html ` Functions: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"function brushed() {\n if (d3.event.sourceEvent && d3.event.sourceEvent.type === \"zoom\") return; // ignore brush-by-zoom\n var s = d3.event.selection || x2.range();\n x.domain(s.map(x2.invert, x2));\n Line_chart.selectAll(\".line\").attr(\"d\", line);\n focus.select(\".axis--x\").call(xAxis);\n svg.select(\".zoom\").call(zoom.transform, d3.zoomIdentity\n .scale(width / (s[1] - s[0]))\n .translate(-s[0], 0));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"function zoomed() {\n if (d3.event.sourceEvent && d3.event.sourceEvent.type === \"brush\") return; // ignore zoom-by-brush\n var t = d3.event.transform;\n x.domain(t.rescaleX(x2).domain());\n Line_chart.selectAll(\".line\").attr(\"d\", line);\n focus.select(\".axis--x\").call(xAxis);\n context.select(\".brush\").call(brush.move, x.range().map(t.invertX, t));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"html `Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"