arun-subba

@arun-subba·21 public vizzes

HTML Starter

This example demonstrates a responsive HTML table for displaying personnel data, including names, ages, occupations, and locations. The page uses custom CSS to style rows and cells, with a media query that transforms the table into stacked blocks for small screens, revealing cell labels via `data-title` attributes. It also integrates Bootstrap’s `table-light` and `table-striped` classes for a second table instance. A JavaScript `console.log` statement confirms basic interactivity within the browser’s developer tools.

Dec 23, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a bare minimum HTML page that integrates the Bootstrap 5 CSS and JavaScript libraries alongside jQuery. It displays a functional navigation bar component with a dropdown menu, search form, and responsive toggling behavior. The page also includes a JavaScript console statement that outputs "Hello JavaScript!" when loaded. The code serves as a simple starter template for web development projects.

Dec 17, 2020

Loading thumbnail…

Untitled

This interactive zoombox visualization displays a hierarchical partition of biodiversity data loaded from a JSON file, breaking down the tree of life from “Life” down to individual butterfly species. The visualization uses `d3.layout.partition` to compute the rectangular layout, with `d3.scale.linear` for positioning and `d3.scale.category20c` for coloring nodes. Clicking a rectangle triggers a smooth transition using `rect.transition()`, which animates the x and y scales to zoom into that node’s domain, revealing deeper taxonomic levels. The SVG rendering is styled with white strokes between rectangles to distinguish partitions.

Aug 31, 2020

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This example presents an interactive zoomable icicle chart that visualizes hierarchical biodiversity data, with a breadcrumb trail showing the current path and percentage of the total. The visualization uses D3.js v4 to render SVG rectangles, with foreignObject elements for labels that can be clicked to zoom into a subtree. The breadcrumb trail updates dynamically on click, displaying each ancestor node and the proportion of the total value it represents. The chart uses d3.partition to compute the layout and d3.scaleOrdinal with the Category20c color scheme to differentiate nodes.

Aug 31, 2020

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This interactive visualization displays hierarchical data as a zoomable icicle chart, using rectangles sized by value and colored by category. Users can click any rectangle to zoom into that branch, while a breadcrumb trail above shows the current path and percentage of the total. The example uses d3.partition, d3.hierarchy, and d3.scaleOrdinal to build the layout, with SVG rect and foreignObject elements for rendering. Breadcrumb polygons are dynamically generated from the ancestor sequence. The code loads data from either biodiversityData.json or data.json, and includes animated transitions via rect.transition and fo.transition.

Aug 31, 2020

Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization displays monthly average air quality measurements for London, comparing PM2.5 and PM10 particulate levels across different months. Users can select different pollutant variables from a dropdown menu, which updates the y-axis and recomputes the line chart using d3.scaleTime and d3.scaleLinear. The scatter plot converts to a line plot, with data points colored by month using d3.scaleOrdinal and the inferno color scheme. A color legend allows filtering by month, highlighting relevant data points. The visualization uses data from the Kings College London Air Quality Dataset via the London Datastore, rendered with d3.v5 SVG and animation transitions.

Aug 28, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles, rectangles, lines, and a path rendered inside an SVG element, with fills and strokes applied through both inline attributes and CSS classes. The code uses native SVG elements such as `circle`, `rect`, `line`, and `path`, along with group transforms for positioning and scaling. CSS rules define stroke colors and widths for line elements, while inline attributes set fill colors for individual shapes. No external libraries are used; the example relies solely on SVG and CSS capabilities.

Aug 27, 2020

Loading thumbnail…

Geo spatial points with H3

A map of India displays a geo-spatial point distribution, with the region of Jammu & Kashmir highlighted by a grid of hexagonal cells generated using the H3 library. The visualization uses D3.js v5 to render the map and points as SVG elements, with a Mercator projection applied via `d3.geoPath`. User-supplied CSV data is aggregated by rounding coordinates to find duplicate points and increment their count, with zoom interactions enabled through `d3.zoom`.

Aug 27, 2020

Loading thumbnail…

Untitled

This interactive visualization displays global migration patterns using an interactive globe. Force-directed layout drives the placement of circular nodes representing countries, with their size tied to migration counts. The visualization employs the h3-js library for geo-indexing and d3.js’s force simulation to arrange the network. Users can hover over nodes to reveal connected migration flows, while the globe can be rotated and zoomed to explore regional patterns.

Aug 27, 2020

Loading thumbnail…

Untitled

This example presents a mobile-style user interface for an iNaturalist data visualizer, built with the Onsen UI framework and jQuery. The interface includes a navigator with a tab bar offering five sections: Home, Time, Space, Species, and Settings. Each tab is a separate page template, with the Home page containing a file input for uploading CSV data. The JavaScript handles page initialization events and logs tab clicks through jQuery’s `$(document).ready` and `click` handlers, though the actual data visualization logic is not yet implemented.

Aug 26, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

D3's general update pattern animates a bowl of fruit as apples are eaten and replaced with lemons. Using `d3.scaleOrdinal` for color and radius, circles enter, update, and exit with 1-second transitions. The code demonstrates data joins via `selection.data`, merging enter and update selections, and removing exit elements after shrinking their radius to zero.

Aug 25, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time, using a smooth curve to highlight the upward trend. The data is loaded from a CSV file, and each year's population is mapped to vertical height. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG. The y-axis labels are formatted from billions (G) to (B), and gridlines are drawn via tick sizes.

Aug 25, 2020

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization includes labeled axes with grid lines and a smoothed, filled area representing temperature fluctuations. The code uses D3 v5 functions such as `select`, `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to render the SVG output. Data is loaded from a CSV file provided by Data Canvas - Sense Your City.

Aug 25, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart shows one week of temperature in degrees Celsius in San Francisco, plotted over time using a smooth curve. The D3 v5 code loads CSV data via `d3.csv`, scales time and temperature with `scaleTime` and `scaleLinear`, and renders axes with `axisBottom` and `axisLeft`. A `d3.line` generator with `curveBasis` draws the path, while grid lines and styled text labels are added manually. The data originates from Data Canvas - Sense Your City, and the SVG output includes a title and axis labels.

Aug 25, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot shows one week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each circle represents a single timestamped measurement, labeled across a titled "A Week in San Francisco" chart. Using D3 v5, the code loads CSV data, applies `scaleTime` and `scaleLinear` for axes, and renders SVG circles with a steelblue fill. Axis grids are drawn via `axisBottom` and `axisLeft` with removed domains, and the data originates from the Data Canvas - Sense Your City project.

Aug 25, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a car, positioned using d3.scaleLinear for both axes. The chart includes labeled axes, tick marks, and a title, all rendered as SVG elements. The code uses d3.csv to load the data, d3.extent to set domains, and d3.axisBottom and d3.axisLeft to generate the axes.

Aug 25, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, using circles positioned along a linear x-axis for population values and a point scale y-axis for country names. The code leverages d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft to render an SVG visualization with gridlines. Data comes from the United Nations World Population Prospects 2019, with population values scaled by 1,000. The chart includes formatted tick labels and a title, with a steelblue fill for each circle.

Aug 25, 2020

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It demonstrates how to customize chart axes: the y-axis labels are left-aligned without tick lines, while the x-axis uses a custom tick formatter to convert large numbers (using `d3.format`’s `.3s` notation) to display billions as "B" instead of "G". The chart also includes vertical gridlines created by setting a negative tick size on the bottom axis. The visualization is built with D3 v5, using `d3.select`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendering to an SVG element with CSS styling for fonts and colors.

Aug 25, 2020

Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts along the x-axis. The chart uses data from the United Nations World Population Prospects 2019, loaded from a CSV file. Constructed with D3 v5, the code uses `select`, `csv`, `scaleLinear`, `scaleBand`, `max`, `axisLeft`, and `axisBottom` to define scales and render SVG rectangles. The bar lengths encode each nation’s population, drawn in steel blue with an accompanying axis for reference.

Aug 24, 2020

Loading thumbnail…

Let's make a face with d3.js!

A yellow SVG face is drawn with d3.js, featuring two eyes, animated eyebrows that move up and down via chained transitions, and a smiling mouth with a tongue created using d3.arc. The code uses d3.select to attach elements to an SVG canvas, d3.arc for path generation, and transition().duration() to animate the eyebrow transforms over two seconds.

Aug 21, 2020

Loading thumbnail…

Cars Report

This example displays a text report of cars priced under $2,000, listing each vehicle’s year, make, model, and price from a hard-coded JSON array. It demonstrates asynchronous data fetching with a Promise and `setTimeout` delay, then filters and formats the data using array methods like `filter`, `map`, and `join`. The core logic relies on JavaScript ES6 modules (`import`/`export`) and destructuring, with the DOM updated via `document.getElementById` and `textContent`. The report appears only after a two-second loading phase.

Aug 20, 2020