Skip to main content
Log in
B

Bomkerss

@Bomkerss·8 public vizzes

Loading thumbnail…

Fork of Fork of Bob Ross Painting

This animated landscape reimagines Bob Ross’s painting style as a time-lapse sunset, showing shifting gradients, a moving sun, and layered mountain silhouettes over an ocean. The scene cycles through day-to-night color transitions using SVG’s `<linearGradient>` and `<stop>` elements, with `<animate>` tags driving continuous changes in hue, offset, and vertical sun position. Purely SVG-based, the visualization relies on animated attribute values for gradients and circle coordinates, with no external JavaScript libraries or data sources.

Nov 28, 2022
Loading thumbnail…

Fork of barGraph

This interactive bar chart displays the 2022 population for each country listed in a CSV file, with controls for ascending or descending sort. Built with D3.js v5, it renders SVG rects and circles, and includes tooltips on mouseover. The animation uses D3's `transition().duration(500)` to update the visual when sorting, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Nov 26, 2022
Loading thumbnail…

Dashboard_Original

This dashboard presents four coordinated visualizations of U.S. sales data from a CSV source: a choropleth map, bar chart, scatter plot, and donut chart. The map uses `d3.geoPath` and `d3.geoAlbersUsa` to display state-level sales, while the scatter plot uses `d3.scaleTime`, and the donut chart uses `d3.pie` and `d3.arc`. Animated transitions, via `transition().duration()`, update axes for the scatter plot and bar chart. The visualizations include interactive tooltips and use a CSS grid layout.

Nov 24, 2022
Loading thumbnail…

Fork of base

This example demonstrates a simple interactive SVG scene with three colored circles and a clickable rectangle. The visualization uses D3 v5 to append circles to a central group, with the red circle responding to mouseover and mouseout events. Clicking the rectangle triggers a transition chain that moves the red circle through two sequential 2-second animations using `transition.attr`. The code imports D3 functions directly via ES6 modules, and also imports a custom message from a local module, which is rendered in the page. The scene is rendered as static SVG elements with no external data source.

Nov 19, 2022
Loading thumbnail…

Fork of Yeesir

A dropdown menu lists sixteen music artists, from Lara Fabian to Bill Withers. Once an artist is chosen, the chart fetches that artist's album data from the Wasabi API, extracts lyrics from each song, and counts word frequencies after filtering out stopwords. The top ten recurring words are shown as a horizontal lollipop chart, using D3 v5's `scaleLinear` and `scaleBand`, with red circles and black lines. When the selection changes, the axes and marks transition smoothly over 500 milliseconds to reveal the updated ranking.

Nov 18, 2022
Loading thumbnail…

Dashboard_TEST_ok

This dashboard presents four synchronized views of sales data: a bar chart, a U.S. choropleth map, a scatter plot, and a pie chart. It uses several D3.js v6 APIs, including `scaleBand`, `scaleLinear`, `geoAlbersUsa`, `geoPath`, `pie`, and `arc`. The map colors states based on total sales from the provided dataset, while the pie chart breaks down sales by sub-category. All visualizations support interactive tooltips and updates with animation.

Nov 18, 2022
Loading thumbnail…

Fork of map exemple

This choropleth map colors world countries by estimated population using a dark red gradient, with a purple hover effect. It loads GeoJSON topology from the World Atlas package and population estimates from an accompanying TSV file, matching them by country ID. The map uses `d3.geoMercator` projection and `d3.geoPath` for rendering, while `d3.scaleLinear` maps population values to colors. Pan and zoom interactions are enabled via `d3.zoom`, and tooltips display country names on click.

Oct 3, 2022
Loading thumbnail…

Fork of D3 functions

This example shows how D3’s data join handles dynamic updates to a scatterplot of five circles. Buttons trigger removal or modification of data points, with exiting circles turning red while new and updated circles render in steel blue. The code uses D3 v5’s `select`, `scaleLinear`, and `merge` to bind array data to SVG circles. Updates call the `update` function, which handles enter, update, and exit selections, while random coordinates come from a custom `rand` helper.

Oct 3, 2022