basskur

@basskur·11 public vizzes

Sequences sunburst

This interactive sunburst chart visualizes the sequence of pages in a user’s visit, with the central ring showing the first page and outer rings displaying subsequent pages. The size of each arc represents the number of visits following that path. Hovering over an arc reveals the percentage of all visits that begin with that exact sequence. The visualization uses the D3.js v4 library, constructs a radial layout with `d3.arc` paths, and updates an explanation text based on hover events. The example also includes a togglable legend.

Jan 20, 2020

Loading thumbnail…

Chiasm Crossfilter Integration

This example shows a linked crossfilter dashboard with a Leaflet bubble map and a bar chart, driven by Chiasm’s reactive component architecture. Brushing the bar chart filters the map’s circles by date, using `ChiasmCrossfilter` to aggregate event data by month and latitude/longitude. D3 v3 renders the bar chart and map, while the layout plugin manages the vertical split and the dataset loader fetches the `events` data. Crossfilter 1.3.12 handles multidimensional filtering across the two visualizations.

Jan 7, 2020

Loading thumbnail…

Barras D3.js

This bar chart displays the populations of the ten most populous countries, using horizontal bars ordered by country name, with population values scaled linearly from zero. The visualization is rendered as an SVG using D3 v5, reading data from a CSV file. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with tick labels formatted via `d3.format`. The axes and labels are styled through CSS, and the chart includes a custom title and formatted population values.

Jan 7, 2020

Loading thumbnail…

Barras D3.js

A horizontal bar chart displays the top 10 most populous countries, using D3.js to load a CSV file and render an SVG. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` to map population values to bar lengths and country names to y-axis positions. Bars are drawn as SVG `rect` elements with a steelblue fill. The chart includes a title and an x-axis label, with population values multiplied by 1,000 from the raw data.

Jan 6, 2020

Loading thumbnail…

Barras D3.js

Jan 6, 2020

Loading thumbnail…

Untitled

A force-directed particle system in SVG uses D3 v3’s `d3.layout.force` to simulate 200 circles with random radii, while a fixed center node applies a strong negative charge to repel others. A quadtree (`d3.geom.quadtree`) accelerates collision detection, and the layout’s `on("tick")` event updates circle positions. Mouse movement drives the root node’s velocity via `d3.mouse`, resuming the simulation. The visualization runs in React, though the rendering logic is pure D3.

Jan 6, 2020

Loading thumbnail…

Make a face D3.js

A smiling face rendered with SVG animates its eyebrows up and down. Built with D3.js v5 and React, the visualization constructs the face from basic shapes—circles for eyes, rectangles for eyebrows, and a path for the mouth—using D3's `select` and `arc` APIs. The eyebrows transition vertically via `transition().duration(2000)`, creating a playful, looping expression. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

Jan 3, 2020

Loading thumbnail…

Make a face D3.js

This example shows how to create a simple face using D3.js by drawing a circle in an SVG container. It uses d3.select to access the SVG element and d3.append to add a circle shape, then sets its radius and position based on the viewport dimensions. The code demonstrates basic SVG rendering with D3 v5 and React integration, with the circle centered at (480, 250) and a radius of 250 pixels.

Jan 3, 2020

Loading thumbnail…

SHAPES+SVG+CSS

This example draws primitive SVG shapes—circles, rectangles, lines, and a path—directly in a React component’s markup. It uses SVG attributes like `cx`, `r`, `fill`, `stroke`, and `stroke-width`, plus CSS classes to style strokes and hide page overflow. The `<g>` elements apply transforms for scaling and translation, grouping shapes with shared fill colors. The visualization demonstrates how static SVG geometry and CSS rules combine without additional libraries.

Jan 2, 2020

Loading thumbnail…

REPORTE

This example presents a static HTML report test page. It displays a heading and a bulleted list of three items, each styled with a distinct color: red, green, and purple. The visualization uses plain CSS classes to define these colors, applied directly to list items within the HTML structure. No JavaScript or external libraries are used; the rendering relies entirely on native browser styling rules. The page’s typography is set to a large monospace font, mimicking a terminal or report output, with the body margin removed for a clean presentation.

Jan 2, 2020

Loading thumbnail…

first html

This example displays the text “Hello HTML” centered on a blank page, with the font size scaled to an enormous 13em. It demonstrates the foundational structure of an HTML document, using plain HTML and CSS within a single `index.html` file. The styling applies a `text-align` property to center the content horizontally and sets the `font-size` to create a visually dominant headline. This is a minimal, static page that serves as a starting point for understanding basic web rendering, showing no interactive or data-driven elements.

Jan 2, 2020