Add food example #1548
Add food example #1548
Conversation
|
This rocks!! |
| // ], | ||
|
|
||
| // Content to add to the head of the page, e.g. for a favicon: | ||
| head: '<link rel="icon" href="observable.png" type="image/png" sizes="32x32">', |
There was a problem hiding this comment.
To deploy pass in a --config ../observablehq.config.js option which then adds the common header.
| @@ -0,0 +1,101 @@ | |||
| import * as d3 from "npm:d3"; | |||
There was a problem hiding this comment.
We also have a marimekko component in examples/google-analytics/src/components/marimekkoChart.js and pangea; I haven't compared them, but it would feel useful to unify them if they're different (and take the best from each, if needs be).
examples/food-imports/src/index.md
Outdated
| ```js | ||
| // full palette from dictionary-of-colour-combinations by Sanzo Wada, | ||
| // source: https://github.com/mattdesl/dictionary-of-colour-combinations/blob/master/colors.json | ||
| const colors = FileAttachment("./data/colors.json").json(); |
There was a problem hiding this comment.
we need 16+ colors but we can materialize them; once that's done we can remove the colors.json file
| import * as d3 from "npm:d3"; | ||
|
|
||
| // adapted from @d3/marimekko-chart | ||
| // i.e. turned vertical, changed color scheme |
There was a problem hiding this comment.
turned vertical is already an option in the other component I think(??)
the color scheme should be passed as a variable
There was a problem hiding this comment.
we could also try to adapt https://observablehq.observablehq.cloud/pangea/plot/marimekko
There was a problem hiding this comment.
maybe find a way to change the stacking orientation: x then y or y then x.
| @@ -28,7 +28,7 @@ export function Sunburst( | |||
| startAngle = 0, // the starting angle for the sunburst | |||
| endAngle = 2 * Math.PI, // the ending angle for the sunburst | |||
| radius = Math.min(width - marginLeft - marginRight, height - marginTop - marginBottom) / 2, // outer radius | |||
| color = d3.interpolateRainbow, // color scheme, if any | |||
| color = d3.interpolateRainbow, // color scheme or scale, if any | |||
There was a problem hiding this comment.
I'm not sure this is the right approach—we need to make sure the same color scale is used here and in the marimekko
examples/food-imports/src/index.md
Outdated
| @@ -74,6 +91,8 @@ const nest = { | |||
| children: Array.from(children, ([name, value]) => ({name, value})) | |||
| })) | |||
| }; | |||
| // reorder nodes to match category order established above | |||
| nest.children = d3.sort(nest.children, (a,b) => categories.indexOf(a.name) - categories.indexOf(b.name)) | |||
There was a problem hiding this comment.
| nest.children = d3.sort(nest.children, (a,b) => categories.indexOf(a.name) - categories.indexOf(b.name)) | |
| nest.children = d3.sort(nest.children, (d) => categories.indexOf(d.name)) |
d3.sort accepts an accessor, which is often simpler than using a comparator. You can inline this in L74.
No description provided.