40:null 41:["$","title",null,{"children":"Activity 1 | Prashant Chavda's Workspace | Observable"}] 47:T475,{ const width = 600; const height = 200; const margin = {top: 10, bottom:30, left:10, right:10} const svg =d3 .create("svg") .attr("width",width + margin.left + margin.right) .attr("height",height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3.scaleLinear() .domain([0, 3]) .range([0,width]) const y = d3.scaleLinear() .domain(d3.extent(myData)) .range([height,0]) const line = d3 .line() .curve(d3.curveStep) .x((d, i) =>x(i)) .y((d) => y(d)) g.append('path') .datum(myData) .attr("d",line) .style("stroke","steelblue") .style("stroke-width",10) .style("fill","none"); g.append("g") // .attr("transform",`translate(0,${marginLeft}, ${marginTop}`) .call(d3.axisBottom(x).ticks(width/ 20)); g.append("g") .call(d3.axisLeft(y)) g.selectAll(".line") .data([myData]) .join("path") .attr("d",line) .attr("class","line") .style("stroke","#000") .style("stroke-width", 1) .style("fill","none") return svg.node(); }48:T564,chart = { const width = 900; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; const x = d3 .scaleUtc() // .domain(d3.extent(appleStockData, (d) => d.Date)) .nice() .range([0, width]); const y = d3 .scaleLinear() // .domain(d3.extent(appleStockData, (d) => d.Close)) .nice() .range([height, 0]); const line = d3 .line() .curve(d3.curveBasis) .x((d) => x(d.Date)) .y((d) => y(d.Close)); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 80)); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(appleStockData) .join("circle") .attr("cx", (d) => x(d.Date)) .attr("cy", (d) => y(d.Close)) .attr("r", 2); g.append("g") .append("path") .datum(appleStockData) .attr("d", line) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 1.5); return svg.node(); }49:T5c9,{ const width = 900; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; const x = d3 .scaleUtc() .domain(d3.extent(appleStockData, (d) => d.Date)) .nice() .range([0, width]); const bandScale = d3 .scaleBand() // .domain(Array.from(new Set(appleStockData.map((d) => d.Date)))) .range([0, width]); const y = d3 .scaleLinear() .domain(d3.extent(appleStockData, (d) => d.Close)) .nice() .range([height, 0]); const svg = d3 .create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg .append("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 20)); g.append("g").call(d3.axisLeft(y)); g.append("g") .attr("fill", "steelblue") .selectAll("rect") .enter() .data(appleStockData) .join("rect") .attr("x", (d) => x(d.Date)) .attr("y", (d) => y(d.Close)) .attr("width", bandScale.bandwidth()) .style("opacity", 0.5) .attr("height", (d) => height - y(d.Close)); g.append("g") .attr("fill", "#000") .selectAll("circle") .enter() .data(appleStockData) .join("circle") .attr("cx", (d) => x(d.Date)) .attr("cy", (d) => y(d.Close)) .attr("r", 2); return svg.node(); }4a:[{"id":"55c776e6c114a2bbf8731fa1110009e92a5e58cd599df21633eee9b4ee2fd33ad6743c27b8ea0703f8ecca2ba0a7360c015ebc804bf3d928789e34692888dd9e","href":"https://static.observableusercontent.com/files/55c776e6c114a2bbf8731fa1110009e92a5e58cd599df21633eee9b4ee2fd33ad6743c27b8ea0703f8ecca2ba0a7360c015ebc804bf3d928789e34692888dd9e","name":"data.json","type":"application/json","lastModified":1699336526111.963,"size":13859},{"id":"87808ea1887981f2954f34c5541de8ab61542d0bc0253977c7665f1604ff1a00047db3b07c2c0ab98d37563b099eb443b659c94548c8a3efefcc33213866b03c","href":"https://static.observableusercontent.com/files/87808ea1887981f2954f34c5541de8ab61542d0bc0253977c7665f1604ff1a00047db3b07c2c0ab98d37563b099eb443b659c94548c8a3efefcc33213866b03c","name":"apple.json.json","type":"application/json","lastModified":1699357785924.532,"size":2870}] 45:{"id":"89b240d7777128a9","slug":null,"title":"Activity 1","thumbnail":"1e2cf14a0b02e77a55b5e3e8a7fe59e2e6038222f5249dde965a234b8e87feb7","access_level":"public","create_time":"$D2023-11-06T08:48:51.744Z","update_time":"$D2023-11-08T05:19:14.554Z","view_time":null,"first_public_time":"$D2023-11-09T07:26:01.781Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c86d470a1aeb2d45","login":"prashant-chavda-ws","name":"Prashant Chavda's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/500b3a31291188aa09eb5846447b3d39ebb1c64e173a13a25ca61ccb2d5f2708","tier":"starter_2024","bio":"","following":false},"version":373,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e1e68dcf9e4932b","login":"prashant-chavda","name":"Prashant Chavda","avatar_url":"https://avatars-next.observableusercontent.com/ed7fb3240ff5c2d555df11168f3298f96a7fe617a2c34b744d8b8dcc3a37c8dd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6e1e68dcf9e4932b","login":"prashant-chavda","name":"Prashant Chavda","avatar_url":"https://avatars-next.observableusercontent.com/ed7fb3240ff5c2d555df11168f3298f96a7fe617a2c34b744d8b8dcc3a37c8dd","tier":null,"role":"editor"},{"type":"team","id":"c86d470a1aeb2d45","login":"prashant-chavda-ws","name":"Prashant Chavda's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/500b3a31291188aa09eb5846447b3d39ebb1c64e173a13a25ca61ccb2d5f2708","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Activity 1","cells":[{"id":0,"value":"# Activity 1\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"\n\n

HTML is neat!

It's what all your website are built in at end of the day.

Whoa1 I'm writing HTML!!!

HTML is

Fun
Cool
Old

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"myCellArray = {\n const myArray = [1,2,3,4];\n return myArray.map((d,i) => d * 2).filter((d) => d == 2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"{\n const html = htl.html`\n

First Paragraph

Second Paragraph

Third Paragraph

\n`;\n\n d3.select(html).selectAll('p').style(\"color\",\"red\");\n\n\n return html;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"#What makes Scatterplot?\n*Write up a checklist of all the things we'll need to generate to make a scatterplot.*\n*which parts need data?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"### Scatterpoint Checklist\n-Circle => data\n-Area => data\n-Labels\n-Container /Canvas\n-Text => data\n-Data of x and y values\n-Scales => ??\n-Color / Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"myLinearScale = d3.scaleLinear()\n.domain([0,1]).range([0, 100])(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"myOrignalScale = d3\n.scaleOrdinal()\n.domain([\"apple\",\"orange\",\"banana\"])\n.range([\"red\",\"orange\",\"yellow\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"myOrignalScale(\"apple\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"{\n const width = 200;\n const height = 400;\n const margin = {top:20, bottom: 20, left:50 , right:50};\n \n const svg = d3\n .create('svg')\n .attr('widht',width + margin.left + margin.right)\n .attr(\"height\",height + margin.top + margin.bottom)\n .style(\"border\",\"1px dotted #000\")\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\",`translate(${margin.left},${margin.top})`);\n\n g.append(\"rect\").attr(\"width\",width).attr(\"height\",height);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"data = FileAttachment(\"data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"#SVG Path\n*Create a new SVG path of a diagonal line from the top left corner to the bottom right corner.\n*Create a new SVG Path a triangle.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"

basic understanding

Trianle

d3.line

D3.line() is a path generator for making the line for something like a line chart.

You can supply optional parameters for curve factories for making smoothed lines or stepwise lines.

When using a path generator,it's important to remeber that this is for a single path.

You can also opt to note use a function for calling the line,as it will by default use the data bound.

Activity 3

Build Your First Line Chart

Convert this Scatterplot into a line chart using the D3 Path Generator.

\nNote axes components","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"myData = [0, 10, 5, 30]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"

Bar Chart

While bar charts are considered a simple chart form, they require a littel more consideration when implementing with D3,due to the inverted coodinate plane.

Activity 4

SVG Rect

Create a new rectangle that is 50 pixels wide,starts in the middle of SVG, and is 100 pixels tall.
Make the rectangle end at the bottom of the SVG.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"appleStockData = FileAttachment(\"apple.json.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"appleStockData.filter((d, i) => i < 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"