2d:null 2e:["$","title",null,{"children":"Learning D3.js Donut Chart in Observable | Aaron Kyle Dennis | Observable"}] 33:T40b,{ var width = 960, height = 500, radius = Math.min(width, height) / 2; var color = d3.scaleOrdinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.arc() .outerRadius(radius - 10) .innerRadius(radius - 100); var pie = d3.pie() .sort(null) .value(function(d) { return d.population; }); var container = html``; var svg = d3.select(container) .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(csvdata)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.data.age); }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".55em") .text(function(d) { return d.data.age; }); return container; }34:T44d,md` *Lesson learned:* There were a couple of places where the code used for the [bl.ocks example](https://bl.ocks.org/mbostock/3887193) worked differently because the html output rendered in observable will always have its own and sections. To get the chart working, [Tom MacWright](https://talk.observablehq.com/u/tom/summary) [showed](https://talk.observablehq.com/t/how-to-include-csv-data-using-var-data-d3-csvparse-csvdata-type/658) that I needed to change the way that d3 was selecting the chart and appending it into the page: Thus: var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); Becomes: var svg = d3.select(container) .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); Also, for the JavasScript to return the container, one needs to add: return container; `35:[] 31:{"id":"53741fa1e44dfe77","slug":"learning-a-donut-chart-from-d3-js","title":"Learning D3.js Donut Chart in Observable","thumbnail":"d975ab21c0734768c6fa7321306bfaf86477007f18a9d6c02a8510c134868b14","access_level":"public","create_time":"$D2018-04-18T12:20:10.489Z","update_time":"$D2018-04-20T13:54:15.537Z","view_time":null,"first_public_time":"$D2018-04-19T14:08:27.283Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":374,"publish_version":374,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Learning D3.js Donut Chart in Observable","cells":[{"id":0,"value":"md`## Learning D3.js Donut Chart in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md `\nThis notebooks seeks to convert Mike Bostock’s [Block 3887193d3 | Donut Chart](https://bl.ocks.org/mbostock/3887193).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md` \n## Environment\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md` \nRequiring D3 JavaScript Library:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"https://d3js.org/d3.v4.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`\n\n## Loading in the Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md `\nThe [d3. donut example](https://bl.ocks.org/mbostock/3887193) uses CSV data. Mike's [Introduction to Data](https://beta.observablehq.com/@mbostock/introduction-to-data) explains that you can also inline tiny CSV files, if you parse them. Thus, to bring in the example CV data from the [donut example](https://bl.ocks.org/mbostock/3887193):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"csvdata = d3.csvParse(`age,population\n<5,2704659\n5-13,4499890\n14-17,2159981\n18-24,3853788\n25-44,14106543\n45-64,8819342\n≥65,612463\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`\n*Lesson learned:* I had attempted to 'prettify' the csv data in a previous try at getting this chart working by adding a line break. The chart did not draw (although an appropriately-sized canvas container was drawn.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md `\n\n## Javascript\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md `\nNext I attempt to pull over the example code and was returned a TypeError:\n\nTypeError: Cannot read property 'ordinal' of undefined\n\nPointing at the first part to break in the code:\n\n

\nvar color = d3.scale.ordinal()\n    .range([\"#98abc5\", \"#8a89a6\", \"#7b6888\", \"#6b486b\", \"#a05d56\", \"#d0743c\", \"#ff8c00\"]);\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`\n\nTo resolve this, I had to make the following adjustments:\n\nscale.ordinal changes to scaleOrdinal. ^{[[ref]](https://beta.observablehq.com/@tmcw/learning-a-donut-chart-from-d3-js)}\n\nd3.svg.arc() changes to d3.svg.arc()^{[[ref]](href=\"https://stackoverflow.com/questions/38178281/uncaught-typeerror-cannot-read-property-arc-of-undefined-in-angularjs-and-d3)}\n\nvar pie = d3.layout.pie() changesto var pie = d3.pie()^{[[ref]](href=\"https://stackoverflow.com/questions/40358268/d3-pie-chart-uncaught-type-error-cannot-read-property-pie-of-undefined)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`\nA change that Tom made that I haven't yet figured out is removing this bit of code:\n\n });\n\n function type(d) {\n d.population = +d.population;\n return d;\n }\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md `\n## HTML\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`\nAnd now let's add in the CSS styling:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`\n## Credits\n\nThe Observable team, and epecially [Tom](https://talk.observablehq.com/u/tom/summary) and [Mike](https://talk.observablehq.com/u/mike/summary), deserve all the credit for this. Tom [generously walked me through my mistakes in transferring this chart to Observable](https://talk.observablehq.com/t/how-to-include-csv-data-using-var-data-d3-csvparse-csvdata-type/658). Mike is the designer of both d3 and Observable, and generously helps people and [posts examples](https://beta.observablehq.com/@mbostock/d3-donut-chart).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"