45:["$","title",null,{"children":"Learning A Donut Chart from D3.js | Tom MacWright | Observable"}] 4d:T403,{ 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 - 70); 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(data)) .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", ".35em") .text(function(d) { return d.data.age; }); return container; }4e:[] 49:{"id":"6178236c7430d284","slug":"learning-a-donut-chart-from-d3-js","title":"Learning A Donut Chart from D3.js","thumbnail":"93ac81fe9f7b6989ffe3645a25f17fd87819e3e694832335a7da631ab2c17f53","access_level":"public","create_time":"$D2018-04-19T16:00:28.612Z","update_time":"$D2018-04-19T16:14:14.639Z","view_time":null,"first_public_time":"$D2018-04-19T16:14:30.331Z","has_unpublished_edits":null,"fork":{"id":"53741fa1e44dfe77","slug":"learning-a-donut-chart-from-d3-js","title":"Learning D3.js Donut Chart in Observable","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024","bio":"hi!","followed_by_you":false,"follows_you":false},"version":341,"publish_version":341,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"bio":"hi!","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learning A Donut Chart from D3.js","cells":[{"id":0,"value":"md`## Learning A Donut Chart from D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md` \n## Environment\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = 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`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`\nI note that I couldn't use data.csv =, getting an error RuntimeError: data is not defined, so I'll have to accont for the difference later.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md `\n\n## Javascript\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md `\nI 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 scaleBand. ^{[[ref]](https://stackoverflow.com/questions/39695967/d3-js-ordinal-scale-version-3-to-version-4)}\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md `\n## HTML\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`\nFirst, let's add in the CSS styling:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`\nAs [Tom MacWright's solution to my previous problems](https://beta.observablehq.com/@tmcw/learning-javascript-and-observable-by-converting-a-fiddle) in rendering charts involved declaring d3, I'll try that: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null