A

atree-rohit

@atree-rohit·19 public vizzes

Loading thumbnail…

Vertical Breadcrumbs

The visualization shows a vertical breadcrumb navigation with an animated SVG face above it. The breadcrumb links transition from a dark, arrow-shaped style to a flat white design with a green hover effect. The face, drawn using D3 selections and shapes, features animated eyebrows that raise and lower via chained `transition().duration()` calls. The SVG elements include circles for eyes and an arc path for the mouth, all positioned with transforms. The code uses D3’s `select`, `arc`, and transition APIs for the animation.

Loading thumbnail…

d3 zoomable sunburst

This example visualizes a hierarchical dataset of plant classifications, organizing species into a zoomable sunburst layout that displays taxonomic relationships from kingdom down to species. Users can click on arcs to zoom into deeper levels of the hierarchy. The visualization uses d3.v5, leveraging the d3.partition and d3.hierarchy APIs to compute the sunburst layout and render it as SVG paths. The data consists of plant entries with taxonomic fields, which are transformed into a nested tree structure for display.

Loading thumbnail…

D3.js collapsible tree with boxes

This is a radial collapsible tree visualization built with D3.js v3, displaying a hierarchical dataset of High Conservation Value Areas (HCVAs) in Sikkim. The tree branches outward from a central root node, with circular node markers and text labels arranged in a circular layout. The visualization uses `d3.layout.tree` and `d3.svg.diagonal.radial` to position nodes and draw connecting links, with node positions computed via rotational transforms. The dataset is loaded from a JSON file using `d3.json`, and the layout supports hierarchical nesting up to three levels.

Loading thumbnail…

CSV to JSON

This example demonstrates a hierarchical visualization of iNaturalist butterfly observation data, converting a CSV file into a nested JSON-like structure. The code loads the data using `d3.csv` and transforms each row into objects containing fields such as location coordinates, dates, and taxonomic classifications from kingdom down to species. The visualization displays this hierarchical taxonomic data using a tree layout, with nodes rendered as circles and connecting links as paths. The implementation relies on D3 v5’s selection and data-joining methods to bind the processed data to SVG elements.

Loading thumbnail…

Untitled

This interactive icicle chart visualizes the hierarchical classification of several butterfly species within the animal kingdom, from life down to the specific Latin names. Built with D3 v5, it uses a partition layout to render the tree as nested rectangles, with colors assigned via a rainbow interpolator. Clicking any rectangle smoothly animates the chart, zooming in or out to refocus the view on that branch of the data.

Loading thumbnail…

iNat Visualizer

This visualization provides a mobile-friendly interface for exploring iNaturalist observation data, offering separate tabs for viewing records by time, space, and species. Users load a CSV file through a file input, which is parsed using D3’s `d3.csvParse` to convert each row into structured data containing coordinates, dates, and user information. The app’s navigation relies on Onsen UI’s `ons-navigator`, `ons-tabbar`, and `ons-tab` components, while the overall layout is built with a combination of HTML templates and jQuery for event handling.

Loading thumbnail…

Select Dataset

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The code uses d3.csv to load data, d3.scaleLinear for both axes, and d3.axisLeft/axisBottom to render ticks and gridlines. Each car appears as a semi-transparent red circle, with axes labeled “Horsepower” and “Weight” and a title. The SVG renderer applies d3 selections and transitions to update the display.

Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Loading thumbnail…

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes one week of temperature observations in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as individual circles using D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The SVG chart includes labeled axes, a title, and a grid created by removing domain lines from the tick marks. Data comes from the Data Canvas - Sense Your City initiative.

Loading thumbnail…

Untitled

This example demonstrates a file input interface that lets the user select a local CSV file and parses its contents into an array of objects using D3’s `d3.csvParse`. The parsed data is logged to the browser console for inspection. The code loads D3 v5 from UNPKG, uses a native HTML file input element, and relies on the `FileReader` API to read the file as text. No visualization is drawn; the focus is on data ingestion and basic parsing.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data into a usable format, displaying the result as a text summary of file size, row count, and column count. It uses the D3.js `csv` function to fetch and parse a remote CSV file of CSS named colors, then formats the parsed data with `d3.csvFormat`. The interface includes a file input for user-selected local CSV files, triggering the same parsing workflow via the `onchange` event handler.

Loading thumbnail…

Bowl of Fruit - General Update Pattern II

This example demonstrates the General Update Pattern I with a bowl of fruit, showing how a D3 visualization responds to changes in its underlying data array. Initially five red apples are rendered as circles with labels, then sequentially one fruit is removed, another is updated from apple to lemon, and a third is filtered out, all through timed `setTimeout` calls. The code uses D3 v5's `select` and `scaleOrdinal` APIs, building SVG groups, circles, and text elements within a static HTML document. Colors and radii map qualitatively to fruit types via ordinal scales, while the explicit `exit().remove()` and `.merge()` operations highlight the update lifecycle.

Loading thumbnail…

Bowl of Fruit - General Update Pattern

Five circles represent apples in a bowl, rendered as red SVG circles via a custom D3 module. The animation demonstrates the general update pattern: fruits enter with a growing radius, update color and position when types change, and exit by shrinking. Using d3.select, scaleOrdinal for color and radius scales, and transition().duration(1000) with attr tweens, the code applies sequential changes at one-second intervals, modifying the fruit array to trigger enter, update, and exit transitions.

Loading thumbnail…

World Population Area Chart

This visualization presents global population trends from 1950 to 2015 as a filled area chart, with the vertical axis representing population in billions and the horizontal axis showing time. The chart uses D3 v5’s `area` generator with `curveBasis` smoothing, paired with `scaleTime` and `scaleLinear` for axes. Data comes from the UN World Population Prospects 2017, loaded via `csv` and rendered into an SVG. Axis labels and ticks are styled with custom formatting, and the area fill is maroon.

Loading thumbnail…

Cars Scatter Plot

This visualization displays a scatter plot of the Auto MPG Data Set from the UCI Machine Learning Repository, showing the relationship between horsepower and weight for various car models. Each red circle represents a car, with axes labeled accordingly and a title indicating the variables compared. The code uses d3.csv to load the dataset, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom to render the axes. SVG is the rendering framework, with a fixed 960 by 500 pixel canvas and margins that accommodate axis labels.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with each circle’s position determined by population on the x-axis and country on the y-axis. Data comes from the United Nations’ World Population Prospects 2017, loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for the x-scale, `d3.scalePoint` for the y-scale, and renders circles as SVG elements, with `d3.axisBottom` and `d3.axisLeft` providing labeled axes and gridlines.

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2017 United Nations data. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, with axes customized via d3.axisBottom and d3.axisLeft. Tick labels are formatted with d3.format, converting G to B for billions, and gridlines are created using negative tick sizes. The SVG rendering includes a title, axis labels, and steel-blue bars, with CSS styling for tick text and font sizes.

Loading thumbnail…

Bar Chart

This bar chart displays the population of the top 10 most populous countries, using horizontal bars sorted by country name. The data, sourced from United Nations population projections for 2017, is loaded from a CSV file and rendered as SVG. The visualization uses D3 v5 APIs including `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to draw the chart’s axes. Bars are colored steelblue via CSS.

Loading thumbnail…

SVG Face

A stylized, yellow SVG face with black-outlined features and animated eyebrows. The face is constructed using D3 primitives: circles for the face and eyes, and rectangles for the brows. The entire face is centered within the SVG, with the mouth drawn as an arc path. The eyebrows animate via chained `transition` calls, moving downward over one second and then returning to their original position over two seconds. The code imports `select` and `arc` from D3 v5.