29:null 2a:["$","title",null,{"children":"2nd assign ans | Mrudhul Guda's Workspace | Observable"}] 2f:T41f,html``30:T44d,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("font-family", "sans-serif") .attr("font-size", "10") .attr("text-anchor", "end") .style('border', '1px dotted #999'); svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xMargin)); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(yMargin)); const barGroup = svg.append("g") .attr("transform", `translate(${margin.left},0)`); const bar = barGroup.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(0,${yMargin(i)})`); bar.append("rect") .attr("fill", "steelblue") .attr("x", 0) .attr("width", d => xMargin(d)-margin.left) .attr("height", yMargin.bandwidth() - 1); bar.append("text") .attr("fill", "white") .attr("x", d => xMargin(d)-margin.left-3) .attr("y", yMargin.bandwidth() / 2) .attr("dy", "0.35em") .text(d => d); return svg.node(); } 31:[] 2d:{"id":"559799455da8feb8","slug":null,"title":"2nd assign ans","thumbnail":"0ae0566d919a4ee7089143906aa1fec409ddd7657b6e29c1251987b61eb4a129","access_level":"public","create_time":"$D2024-02-06T12:32:54.366Z","update_time":"$D2024-03-05T18:26:59.994Z","view_time":null,"first_public_time":"$D2024-02-06T12:32:54.366Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3dd78b8674df19f8","login":"mrudhul-guda-ws","name":"Mrudhul Guda's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ecc2c0834c267909d89550cd1f76ffe9907cca6c2af4de0d5e22d0187a893af","tier":"starter_2024"},"version":291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1c2222a5ee40623a","login":"mrudhul-guda","name":"Mrudhul Guda","avatar_url":"https://avatars-next.observableusercontent.com/9e40df4007e587a5b93ae8432e8d291c0be544b0d9ef18b61960c08dd93e4e6c","tier":null}],"members":[{"type":"individual","id":"1c2222a5ee40623a","login":"mrudhul-guda","name":"Mrudhul Guda","avatar_url":"https://avatars-next.observableusercontent.com/9e40df4007e587a5b93ae8432e8d291c0be544b0d9ef18b61960c08dd93e4e6c","tier":null,"role":"editor"},{"type":"team","id":"3dd78b8674df19f8","login":"mrudhul-guda-ws","name":"Mrudhul Guda's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9ecc2c0834c267909d89550cd1f76ffe9907cca6c2af4de0d5e22d0187a893af","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2nd assign ans","cells":[{"id":0,"value":"# 2nd assign ans","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"### first hello word idi just run chesei as he said","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"{\n const div = document.createElement(\"div\");\n div.innerHTML = \"Hello, world!\";\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"### Next is uncommeting just uncomment chesei","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"{\n const p = d3.selectAll(\"p\");\n p.style(\"color\", \"red\"); // Uncomment this line and run the code!\n p.style(\"color\", null); // Uncomment this line to clear the color.\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"### next he said to try it and change h2 elemets to green color dani answer idi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"{\n const h2 = d3.selectAll(\"h2\");\n h2.style(\"color\", \"green\")\n return h2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"### if u want to display then do like this first run this hello world with h2 u will get black hello world now run kinda code it'll become green ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":35,"value":"{\n const div = document.createElement(\"div\");\n div.innerHTML = \"

Hello, world!

\"\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"{\n const h2 = d3.selectAll(\"h2\");\n h2.style(\"color\", \"green\");\n return h2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"### Next hello world ki add cheyamandu background black text white ani dani answer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"{\n const div = d3.create(\"div\");\n div.html(\"Hello, world!\");\n div.style(\"color\", \"white\")\n .style(\"background-color\", \"black\");\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"### next chaining method di answer here div chesi dani text white bg color balck anadu ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"d3.create(\"div\").style(\"color\", \"white\").style(\"background-color\", \"black\")\n .text(\"Anusha Lavanuru\").node();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"### next coding a chart lo he told to add two more circles here nen array lo pettindi nuv petanarkeldu vadu already ichadu u just need to use the second code ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"data = [4, 8, 23, 15, 32, 19]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"### next idei databinding lo cheyamanadu and vadei chesadu circles ni u just need to run it","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"### a tarvata he told it our turn and said to do the same for wallet circles ani that we will do","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":70,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"##### this small chukkal just for my bulding code u need to copy below copy chppeina code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":81,"value":" wallets = [\n { name: \"Andy\", size: 25 },\n { name: \"Beth\", size: 39 },\n { name: \"Craig\", size: 42 },\n { name: \"Diane\", size: 35 },\n { name: \"Evelyn\", size: 48 }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"#### kinda script idokati u need to copy and paste","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":74,"value":"d3.select('#walletcircles')\n .selectAll('circle') \n .data(wallets)\n .attr('r', x => x.size);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"### Next wallet viz entirely with D3 anadu after enter update and exit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":107,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 1000)\n .attr(\"height\", 100);\n \n // --- bind walletcircles to data\n svg.selectAll(\"#walletcircles\")\n .data(wallets)\n .enter().append(\"circle\")\n .attr(\"cx\", (x, i) => (i+1)*50 )\n .attr(\"cy\", 50)\n .attr(\"r\", d => d.size);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"### making a bar chart manually","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"#### adi two extra add cheymanadu bars we added anmata its a calculation => width-3 is text and width is *10 of given value","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":123,"value":"### next working with scales idi just explanation em led just run chestu vellu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":125,"value":"scale = d3.scaleLinear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"scale(2.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"ordinalScale = d3.scaleOrdinal()\n .domain(['cat', 'dog', 'parrot', 'hamster'])\n .range(d3.schemePaired); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"c = ordinalScale('parrot')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"#### urkei chesa e section ikkada copy so that next section ki use avali ani","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"## making a bar chart automatically","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"width = 420","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"height = 20* data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"y(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"x(32)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"#### idi answer edo modify cheymanadu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":154,"value":"autobar = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", y.range()[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\")\n .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n const bar = svg.selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${y(i)})`);\n\n bar.append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"x\", 0)\n .attr(\"width\", x)\n .attr(\"height\", y.bandwidth() - 1);\n\n bar.append(\"text\")\n .attr(\"fill\", \"white\")\n .attr(\"x\", d => x(d)-3) \n .attr(\"y\", y.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"### margin and axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":194,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"xMargin = x.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"yMargin = y.copy().range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", yMargin.range()[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\")\n .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n const bar = svg.selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${yMargin(i)})`);\n\n bar.append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"x\", 0)\n .attr(\"width\", xMargin)\n .attr(\"height\", yMargin.bandwidth() - 1);\n\n bar.append(\"text\")\n .attr(\"fill\", \"white\")\n .attr(\"x\", d => xMargin(d)-3) \n .attr(\"y\", yMargin.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", y.range()[1])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\")\n .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n svg.append('g')\n .attr('transform', `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(xMargin));\n \n svg.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yMargin));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"### putting everything together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"### idei final answer anamata we combined and formed a bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"