34:["$","title",null,{"children":"Movies ratings and runtime timeseries | tanrockstan34 | Observable"}] 3c:T698,add_data = function(){ x.domain(d3.extent(data[0], d => d.year)) y.domain([0, 100]) 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]) }3d:T711,html ``3e:[] 38:{"id":"3f32572aeacf6faf","slug":"movies-ratings-and-runtime-timeseries","title":"Movies ratings and runtime timeseries","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2019-03-10T20:17:09.154Z","update_time":"$D2019-03-21T19:05:48.285Z","view_time":null,"first_public_time":"$D2019-03-21T19:06:57.626Z","has_unpublished_edits":null,"fork":{"id":"e5791485374cf6a6","slug":"movies-ratings-and-runtime-timeseries","title":"Movies ratings and runtime timeseries","owner":{"id":"745d9f059f19555f","login":"amal994","name":"Amal Alabdulkarim"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8955cded1584642b","login":"tanrockstan34","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63f0c42348474a4ec4c9a6ea3d287eb2623bc6086da6e6bc89a052d162029306","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":692,"publish_version":692,"role":null,"authored":false,"authors":[{"type":"individual","id":"61933655519ce6df","login":"tanrockstan34","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63f0c42348474a4ec4c9a6ea3d287eb2623bc6086da6e6bc89a052d162029306","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"61933655519ce6df","login":"tanrockstan34","name":"","avatar_url":"https://avatars-next.observableusercontent.com/63f0c42348474a4ec4c9a6ea3d287eb2623bc6086da6e6bc89a052d162029306","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"//d3 = require('d3')\nd3 = require('d3', 'd3-array@2');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"/*\ndata = d3.range(13).map(function(i){\n var genre_data = []\n for(var j = 0; j d.genre), ([key, value]) => (value));\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"html `Main GraphData Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"line = d3.line()\n .x(d => x(d.year))\n .y(d => y(d.rating))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"add_data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"html ` Functions: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"html `Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null