padmeshnaik22@gmail.com

@padmeshnaik·13 public vizzes

Montisenho Natural Park Map

Montisenho Natural Park Map visualizes forest fire records from the UCI Forest Fires dataset as an interactive scatterplot overlaid on a geographic-inspired grid. Each point represents a recorded fire event, positioned by X and Y coordinates, with point size encoding the burned area and color encoding the Fire Weather Index (FWI) or temperature. The visualization uses D3.v7 with SVG rendering to draw the park-like layout, with axes labeled by grid coordinates, a legend for the color scale, and hover tooltips revealing fire weather indices. The map highlights seasonal and monthly fire patterns across the park's spatial zones.

Apr 23, 2024

Loading thumbnail…

Fork of Humidity Vs Temperature Scatter Plot with Color

This fork visualizes the relationship between humidity (x-axis) and temperature (y-axis) as a scatter plot, with each point colored by the month of the year. The plot uses D3.js functions including `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and custom `axes` and `colorLegend` components to render the chart. Data originates from a CSV file containing monthly weather measurements, and the visualization displays all points with a constant opacity to show data density.

Mar 14, 2024

Loading thumbnail…

Temperature Vs Energy Consumption

This example visualizes average weekly energy consumption over time using a line chart rendered with D3. The data is processed by grouping daily timestamps into weeks via `d3.rollup` and calculating the mean consumption for each week. The chart uses `d3.scaleTime` and `d3.scaleLinear` to map the date and consumption values, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A line path is drawn using a `d3.line` generator, and the visualization is embedded in a responsive SVG container that adapts to its parent dimensions.

Mar 14, 2024

Loading thumbnail…

Monthly Relative Humidity Distribution (Bar Chart)

This bar chart visualizes the average relative humidity distribution across the twelve months of the year, sourced from a dataset imported in the code. It features an interactive dropdown menu that allows users to filter the view to a single month or display the full-year aggregate. The visualization uses D3.js functions like `scaleBand`, `scaleLinear`, and `axisBottom` to construct the chart, with bars colored steelblue that change to orange on hover, accompanied by a tooltip showing precise values. The rendering includes an animated update when the selection changes.

Mar 14, 2024

Loading thumbnail…

Humidity Vs Temperature Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length against sepal width. Data points are colored according to the species, with a categorical color legend identifying each group. The visualization uses D3.js `scaleLinear` and `scaleOrdinal` to construct the plot and color assignments, along with `axisBottom` and `axisLeft` for the axes. A custom `colorLegend` component displays the color-to-species mapping, while the data is read from a CSV file.

Feb 21, 2024

Loading thumbnail…

Temp and Humidity Scatter Plot with Color

This scatter plot visualizes the relationship between temperature and energy consumption, with points colored by species using an ordinal color scale. The visualization uses a D3.js linear scale for both axes and a color legend to map categorical values. The code imports data from an external module, applies d3.scaleOrdinal with schemeCategory10 for colors, and renders circles through a data join. Axes and legends are generated using d3.axisLeft, d3.axisBottom, and custom selection.join methods.

Feb 21, 2024

Loading thumbnail…

Fork of Responsive Axes (Humidity Distribution)

This example shows monthly humidity distribution as a bar chart with responsive axes that maintain consistent tick mark density during resizing. It uses d3.scaleBand and d3.scaleLinear to map months and humidity values, with d3.axisBottom and d3.axisLeft rendering the ticks. A ResizeObserver tracks container dimensions and recomputes the scales, while computed tick counts keep spacing uniform. The SVG rendering updates on resize, and axis labels are positioned via dedicated modules from the reusable axes utility.

Feb 11, 2024

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render three stylized Christmas trees, each composed of overlaid green circles for layers and a brown rectangle for the trunk. The code defines a `treeData` array with color and horizontal position for each tree, and uses helper functions to generate the circles and base. It relies on D3’s `select` and SVG append methods to build the static vector scene. No interaction or animation is present.

Feb 6, 2024

Loading thumbnail…

Fork of Simple Bar Chart

This fork of a simple bar chart displays the top 10 most populous countries as of January 1, 2024, using data from the UN population estimates dataset. The visualization ranks countries by total population in thousands, with bars sorted in descending order. Built with D3 v7, it uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, while `axisLeft` and custom axis-label utilities render the chart elements. The reusable `viz` component accepts configurable margins, labels, and data mappings, making it adaptable for different datasets.

Feb 5, 2024

Loading thumbnail…

Energy

This visualization displays the first record of an energy consumption dataset as raw JSON in a large monospace font. The code parses a CSV file using a data import statement, converts timestamp and numeric fields with the JavaScript `Date` constructor and unary plus operators, then renders the formatted object with `JSON.stringify` inside a `<pre>` element. The example demonstrates basic data loading and preprocessing from the Energy Consumption Prediction dataset on Kaggle.

Jan 30, 2024

Loading thumbnail…

Forest Fires Dataset

This example displays the first row of the Forest Fires Dataset from the UCI Machine Learning Repository as a formatted JSON object. The data includes spatial coordinates (X, Y), temporal information (month, day), and environmental metrics such as temperature, humidity, wind speed, and the fire severity index (FISI). The code imports the CSV file, coerces all numeric fields to numbers using unary plus operators, and renders the parsed object in a `<pre>` element with a fixed font size. The visualization demonstrates static text rendering with inline styles, without additional charting libraries.

Jan 23, 2024

Loading thumbnail…

World Population

This example displays the first record of the World Population dataset as a JSON object in a preformatted text block, with a font size of 36 pixels. The code loads the CSV data using an import statement, converts population and area fields to numbers, and passes the first data entry to `JSON.stringify` for indented rendering. It directly outputs the parsed data structure to the container, demonstrating the dataset’s schema without additional visualization.

Jan 23, 2024

Loading thumbnail…

Fork of Solar System

This animated visualization presents the planets of the solar system as scaled circles, with relative sizes accurate but distances compressed for display convenience. Planet diameters, solar radii, and orbital data come from Wikipedia's list of gravitationally rounded objects. Each body uses a custom SVG radial gradient to simulate a shaded, three-dimensional appearance, including the Sun and Pluto. The d3 selection and transition APIs handle the animation, while a starfield background is generated procedurally with random placement that avoids overlapping the planets. Planet labels are positioned dynamically based on each body’s calculated radius.

Jan 23, 2024