kaline

@kaline·6 public vizzes

D3 Starter - d3.nest()

This example demonstrates how to group and structure an array of car objects using the `d3.nest()` function. It defines four car records with name, manufacturing year, and model, then applies a key function on the `manufactured` property to create hierarchical groups. The resulting nested data structure is logged to the browser console, showing how entries are organized by year. The code uses D3 version 4 and executes entirely in the console without any visual rendering on the page.

Sep 3, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays Brazilian public budget expenditures, comparing committed (“Empenhados”) and paid (“Pagos”) values by year. Users can filter the data by fiscal category (“Resultado Primário”) and government function (“Função”) via dropdown menus. The visualization uses D3 v5 with `d3.csv` for data loading, `d3.nest()` for aggregation, and `scaleLinear` and `scaleBand` for axes. Bars are rendered as SVG rectangles, with tooltips on hover and axis labels customized using `axisBottom` and `axisLeft`. Data originates from the provided `orcamentoData.csv` file.

Sep 1, 2023

Loading thumbnail…

Untitled

This example shows a set of overlapping circles and ellipses inside an SVG canvas, demonstrating CSS-driven interactivity and animation. Three yellow circles with green strokes transition their radius and stroke-width over five seconds when hovered, while three nested ellipses change their fill color to blue on hover. Built with React and rendered using SVG markup, the visualization relies on CSS properties like `transition`, `r`, and `stroke-width`, applied directly to SVG elements. The source code uses a basic HTML structure with inline styles, illustrating how CSS can directly manipulate SVG shapes without JavaScript logic.

Sep 1, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational elements of SVG by rendering a single circle directly within an HTML page. The circle uses SVG properties for positioning, stroke color, stroke width, and fill color. It relies solely on native SVG markup embedded in the document, with no external JavaScript libraries or data sources, highlighting how basic shapes are defined and styled in the SVG coordinate system. The fixed viewport size of 960 by 500 pixels shows the canvas dimensions used for the graphic.

Aug 31, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, starting with a single overlapping circle. It shows how raw SVG elements can be embedded directly in an HTML document without additional JavaScript libraries. The page uses inline SVG tags, specifically a `<circle>` element with explicit `cx`, `cy`, and `r` attributes, positioned within a 960-by-500 viewport. The minimal CSS hides page margins and overflow, leaving the circle as the sole visual content. The rendering approach relies purely on native browser SVG support.

Aug 28, 2023

Loading thumbnail…

ChartInteractive

This interactive visualization shows crime statistics against women across Indian states, combining a choropleth map with two donut charts that summarize data by year and crime type. Users select a year and offense category through dropdowns to update the map’s color encoding and the donut charts’ proportional segments. The map uses D3’s `geoPath` and TopoJSON for state boundaries, while the donuts employ `d3.rollups` and `d3.scaleOrdinal` for aggregation and theming. The charts animate on change, with data sourced from a CSV on crime against Indian women.

Aug 15, 2023