People often ask for more comments in D3 examples. I tried here to use the notebook format to full effect, explaining the code and encouraging tinkering. And I’m experimenting with patterns (such as components) to make the code more approachable.
-
-
Prikaži ovu nit
-
I also thought about how to make this type of chart easier to fork and customize. Past implementations of this race required you to preprocess the data (for example to interpolate and compute ranks); now the notebook does that for you on the fly.
Prikaži ovu nit -
(I also found an error in the Interbrand dataset: it only included the top 100 brands from 2018, not the top brands from 2000 onwards. So I resourced the data, and the race probably looks different than what you’ve seen previously!)
Prikaži ovu nit -
Would you like more notebooks like this? Let me know how I can better teach D3.
Prikaži ovu nit -
There’s also a minimal version for forking (or importing or embedding) here:https://observablehq.com/@d3/bar-chart-race …
Prikaži ovu nit
Kraj razgovora
Novi razgovor -
-
-
Phenomenal work! Love the clarity of explanations and code. This is perhaps more an aside than anything, but do you have thoughts on how one could export the rendered frames as a gif? I can think of a few ways, but none that are particularly straightforward.
-
I’ve used gif.js to convert canvas animations to GIF, and you can also render SVG to canvas… but my guess is you’d want to render a limited number of frames. Using screen capture the race is easily 50+MB.https://observablehq.com/@mbostock/canvas-to-gif …
Kraj razgovora
Novi razgovor -
-
-
thanks
@mbostock ! Is it possible to put the label name in the Y axis and not in the bar? -
Yes. Use text-anchor: start for the labels rather than text-anchor: end, and then shift them to the right using the x attribute.
- Još 1 odgovor
Novi razgovor -
-
-
This is great! but I wonder if this can be implemented in d3 v4 without select joins.
-
Yes, see the source of selection.join for the equivalent longhand form. I don’t know why you wouldn’t just use v5, though, as it is almost entirely backwards compatible.
- Još 1 odgovor
Novi razgovor -
Čini se da učitavanje traje već neko vrijeme.
Twitter je možda preopterećen ili ima kratkotrajnih poteškoća u radu. Pokušajte ponovno ili potražite dodatne informacije u odjeljku Status Twittera.