#d3js — Public Fediverse posts

Something I wish more people understood is that #d3js is not a visualization library. D3 is two related things: a DOM manipulation library designed with an eye toward data binding, and a collection of utilities for dealing with data, creating layouts based on data, and generating svg path strings (or canvas method calls). You can choose to use any or all of it. If you’re already using a js framework with html (and svg) templating, you don’t have to drop into js to use D3 selections.

Something I wish more people understood is that #d3js is not a visualization library. D3 is two related things: a DOM manipulation library designed with an eye toward data binding, and a collection of utilities for dealing with data, creating layouts based on data, and generating svg path strings (or canvas method calls). You can choose to use any or all of it. If you’re already using a js framework with html (and svg) templating, you don’t have to drop into js to use D3 selections.

I wrote a post about the embedded interactives on my site:

https://www.fractalkitty.com/about-interactives-inquiries-link/

#mtbos #indieWeb #mathLearning #iTeachMath #iteachStem #mathInquiry #p5js #svelte #d3js

I wrote a post about the embedded interactives on my site:

https://www.fractalkitty.com/about-interactives-inquiries-link/

#mtbos #indieWeb #mathLearning #iTeachMath #iteachStem #mathInquiry #p5js #svelte #d3js

I had legimate cause to create a sankey chart! To help me explore various budgeting scenarios.

I had to play around a bit with the dimensions like the node padding to stop all the ribbons collapsing to width 0. Otherwise, it did the job. Despite the tendency for sankeys to become decorative messes.

#d3js #sankey

I had legimate cause to create a sankey chart! To help me explore various budgeting scenarios.

I had to play around a bit with the dimensions like the node padding to stop all the ribbons collapsing to width 0. Otherwise, it did the job. Despite the tendency for sankeys to become decorative messes.

#d3js #sankey

@rogerlipscombe if you like a book there is this https://www.oreilly.com/library/view/interactive-data-visualization/9781449340223/

My limited experience of #D3 wrangling then consists of stealing ideas from https://d3-graph-gallery.com or off the man himself, #MikeBostock here
https://bost.ocks.org/mike/

There is then the #D3js related hosting environment but I will leave that as an exercise to the reader for further investigation

@rogerlipscombe if you like a book there is this https://www.oreilly.com/library/view/interactive-data-visualization/9781449340223/

My limited experience of #D3 wrangling then consists of stealing ideas from https://d3-graph-gallery.com or off the man himself, #MikeBostock here
https://bost.ocks.org/mike/

There is then the #D3js related hosting environment but I will leave that as an exercise to the reader for further investigation

Sankey‑диаграмма движения денег: от двух дней в Illustrator до интерактива за час

Как понять, куда на самом деле уходят деньги, если смотреть на них как на поток, а не как на набор категорий. На реальном примере показываю, как из банковской выписки собрать Sankey-диаграмму, где помогает AI, где ошибается и какие решения приходится принимать. В итоге получается не статичная картинка, а интерактивная модель, с которой можно работать: разбирать структуру расходов, видеть взаимосвязи и находить узкие места. Подход применим не только к личным финансам, но и к бизнесу — для анализа движения денег, затрат и сложных процессов. Будет полезно дизайнерам, аналитикам и всем, кто работает со сложными системами

https://habr.com/ru/articles/1016620/

#Sankey #визуализация_данных #финансы #анализ_данных #UX_дизайн #интерфейсы #бизнесаналитика #D3js #React #AI

Any of yall use Worldographer? Me and the homunculus wrote a script that converts WXX files into an interactive D3js site #dnd #rpg #ttrpg #maps #cartography #python #d3js #worldographer #hexographer

Any of yall use Worldographer? Me and the homunculus wrote a script that converts WXX files into an interactive D3js site #dnd #rpg #ttrpg #maps #cartography #python #d3js #worldographer #hexographer

TIL It's not that hard to replicate news graphics using #datavis / #d3js.
Also I learned that the Western hemisphere seems to include Ireland, UK and a large portion of north-western Africa oO

TIL It's not that hard to replicate news graphics using #datavis / #d3js.
Also I learned that the Western hemisphere seems to include Ireland, UK and a large portion of north-western Africa oO

The base map is from 1:10m #NaturalEarth. Map rendering is via the browser using #D3js and #GIMP for compiling the GIF animation.

The Sun position calculation is adapted from #Wikipedia and #Turfjs is used to generate the terminator line from the Sun’s position.

https://en.wikipedia.org/wiki/Position_of_the_sun
https://en.wikipedia.org/wiki/Equation_of_time

🧵 2/2

The base map is from 1:10m #NaturalEarth. Map rendering is via the browser using #D3js and #GIMP for compiling the GIF animation.

The Sun position calculation is adapted from #Wikipedia and #Turfjs is used to generate the terminator line from the Sun’s position.

https://en.wikipedia.org/wiki/Position_of_the_sun
https://en.wikipedia.org/wiki/Equation_of_time

🧵 2/2

#30DayMapChallenge 🗺️ Day 3️⃣: Polygons

I went with a classic #choropleth map to keep things simple (and save my energy) and this one shows the population change of the 201 barangays (kinda like wards) of the city of Pasay in the #Philippines 🇵🇭 between the 2020 and 2024 censuses.

https://en.wikipedia.org/wiki/Pasay

The boundaries come from #OpenStreetMap while the population data is from the Philippine Statistics Authority. Map rendering was done using the #D3js library.

#maps #cartography #gischat