L

libramanju

@libramanju·21 public vizzes

Loading thumbnail…

Vis for Project

This visualization shows the average Air Quality Index (AQI) for six pollutants—CO, NO2, SO2, PM10, PM2.5, and Ozone—as a pie chart with a custom legend listing each pollutant and its mean value in units. The code loads a CSV dataset from a GitHub gist, aggregates the pollutant-specific AQI values by summing and averaging non-void entries, and renders the result using D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10`. The SVG is drawn with paths, and each segment includes a mouseover handler that logs the pollutant’s AQI to the console.

Loading thumbnail…

Social_Network_graph_ICE-8

This example shows a small social network of eight named individuals, arranged into two labeled groups, with weighted connections represented by line thickness. The graph is rendered as an SVG using D3 v4 and the older d3.layout.force API, which applies gravity, charge, and distance parameters to position nodes interactively. Nodes are drawn as red squares with blue text labels, and users can click and drag them via force.drag. The data comes from a local graph.json file containing node names and link weights.

Loading thumbnail…

ICE_8_Tree_Chart

This example displays a hierarchical military organization as an animated tree chart, starting from a King and branching down through Ministers, Leaders, and individual unit types such as Spear Men and Archers. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw links, while SVG rectangles and text elements represent each role. The chart updates with a 700-millisecond transition when nodes are clicked, allowing users to collapse and expand branches. Data is embedded as a JavaScript array, with the entire tree rendered on a gray background.

Loading thumbnail…

Europe Map ICE8

This example displays a map of India rendered as red-outlined, cream-filled regions. It uses a React setup with D3 v5 and TopoJSON to load and draw geographic features. A Mercator projection is configured with specific center, scale, and translate values, while d3.geoPath converts the GeoJSON geometry into SVG paths. The map fetches its data from a remote GeoJSON URL hosted on GitHub.

Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection, displaying country boundaries as green shapes on a light blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from GeoJSON data converted from TopoJSON via the topojson.feature API. World country data is loaded from the world-atlas package, and the SVG includes a sphere outline to emphasize the spherical projection. The map is static, with no interactive elements or animations.

Loading thumbnail…

Ozone AQI Count by Days

This example shows a pie chart of ozone AQI categories by the number of days each category occurred, with a legend listing each category and its corresponding day count. The chart is generated in React using D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to create the slices, which are rendered as SVG paths. Data is loaded via `csv` from a GitHub gist and processed to count unique dates per category before being passed to the rendering function.

Loading thumbnail…

Median PM2.5 daily concentration

This line chart visualizes median PM2.5 daily concentration across months, with a smooth curve connecting data points. The y-axis measures concentration levels, while the x-axis represents months from January through December. Built with D3 v5, the code uses `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file hosted on GitHub Gist, and the chart includes styled grid lines and axis labels. The rendering approach uses an SVG element with margins defining the plotting area.

Loading thumbnail…

ICE7 Line Chart

This line chart displays the median PM2.5 concentration for each month in San Francisco, with the x-axis representing months and the y-axis showing concentration values. The visualization is built using D3 v5, specifically employing `scaleLinear`, `axisLeft`, `axisBottom`, and a `line` generator with `curveBasis` for smooth interpolation. The chart includes labeled axes for "Month" and "Median PM 2.5 Conc," with data loaded from a CSV file hosted on GitHub. The SVG rendering uses a blue line with a title and grid lines, styled via CSS.

Loading thumbnail…

Unhealthy AQI for PM2.5 in Texas

This visualization shows the ten most common categories of unhealthy Air Quality Index (AQI) days for PM2.5 pollution in Texas, presented as a pie chart with a legend listing each category and its corresponding day count. The data is loaded from a CSV file and sorted in descending order before rendering. Using D3 v5, the code employs `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate the chart and legend. The visualization is built with React, rendered as SVG, and includes interactive mouseover logging to the console.

Loading thumbnail…

Month wise Ozone Max AQI

This line chart shows the maximum Ozone Air Quality Index (AQI) for each month of the year. Data is loaded from a GitHub gist CSV and mapped to numeric month values using a month-to-number array. The visualization uses D3 v5 with `scaleLinear`, `scaleTime` (though not applied), `axisBottom`, `axisLeft`, and `line` with `curveBasis` smoothing. The SVG renders axis labels, grid lines, and a blue stroke line path styled by the `styles.css` class, with title and axis text annotations.

Loading thumbnail…

Unhealthy AQI for SO2 in Texas

A bar chart shows the count of days in Texas falling into four AQI categories for sulfur dioxide, from Good to Unhealthy. The chart is built with D3 v5, using `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Hovering over a bar dims other values, highlights the selected bar, draws a dashed threshold line via a dynamically appended `line`, and displays the numeric difference between each category and the hovered one.

Loading thumbnail…

Untitled

Eight colored cubes float in a 3D space, each labeled with a product name and positioned by category from a small inline sales dataset. The cubes rise to heights proportional to sales values, and users can drag to rotate the entire scene. Built with React and D3 v4, it uses the `d3-3d` plugin to project cube faces, `d3.scaleOrdinal` for colors, and `d3.drag` for interaction. SVG paths and text elements update via `transition.attrTween` and `d3._3d().sort` for depth ordering.

Loading thumbnail…

Bonus_ICE_IntBarChart

This interactive bar chart visualizes carbon emissions by car make year from 2013 to 2022, using values from an external CSV file. The chart displays CO2 emissions in grams per kilometer for each year, with bars color-coded by year. Built with D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Hovering over a bar triggers a transition that highlights the selected bar, displays a dashed reference line, and shows divergence values for other years. The visualization includes grid lines, axis labels, and a title.

Loading thumbnail…

Untitled

A 3D scatter plot visualizes five product categories—Garment, Electronics, Decoration, Fitness, and Footwear—using three axes: Number of Orders, Sales, and Available in Stock. Each category appears as a distinct colored marker, encoding the relationship between order volume, revenue, and inventory across the dataset. The code loads a CSV via d3.csv, filters rows by category using a custom unpack function, and constructs five Plotly trace objects of type scatter3d. These traces are passed to Plotly.newPlot, which renders the interactive chart inside the designated div with a minimal margin layout.

Loading thumbnail…

ICE7 Area

This area chart displays pollutant emissions (CO and NOx) over time from a CSV dataset of USA pollution records. Two overlapping filled paths, one orange and one blue, show each pollutant’s annual values using d3.area with curveBasis smoothing, scaled by d3.scaleTime and d3.scaleLinear. The SVG rendering includes custom axes with tick formatting, labels, and a red title, all built with d3 v5 and styled via CSS.

Loading thumbnail…

ICE 7 Pie Chart

This example visualizes top product sales as an interactive pie chart, with a legend displaying each product name and its corresponding unit count. The chart renders using D3 v5 within a React framework, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded from an external CSV file via `d3.csv`, sorted by sales value, and the top 10 items are selected for display. The SVG-based visualization includes hover logging of sales values, with legends positioned alongside the chart.

Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatterplot visualizes sales data, showing the relationship between the number of orders placed by customers, available stock, and sales revenue for different product categories. The visualization uses D3.js (v6) with SVG rendering to display colored circles representing product categories, with an animation that periodically switches the x-axis between 'Number of Orders' and 'Available in Stock' using `setInterval`. A legend with category colors and axis labels enhances readability, while the reusable `scatterPlot` module handles axis scaling and circle positioning.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Loading thumbnail…

ICE-6 Bar Graph

This example displays the average carbon emissions of cars by model year as a horizontal bar graph. It uses React hooks to load and filter CSV data from a GitHub gist, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The chart includes custom axes via `d3.axisBottom`-style tick rendering, with red gridlines and a title above the visualization.

Loading thumbnail…

ICE 5

This example displays an embedded image of the Earth against a patterned background, presented within a bordered container. The page uses a pre-existing JPEG image, encoded as a base64 data URI, and renders it through an SVG pattern fill. The styling is handled with CSS, including custom borders, background colors, and table formatting. The code relies on D3 v5 and a standard React setup, with the SVG and HTML elements structured directly in the file.

Loading thumbnail…

Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A black background features a colorful, overlapping Buddha rendered in SVG paths, with hundreds of small, randomly positioned, semi-transparent rectangles scattered across the canvas. The visualization uses React to generate the layout, mapping over a numeric array to draw each rectangle with random coordinates and fill colors via the `rgb()` function. The Buddha path is transformed and scaled, with a large stroke width, creating a layered, abstract composition of geometric shapes and intricate linework.