dineshsingiri18@gmail.com

@dineshtechi-deloitte·17 public vizzes

Q! Dinesh

A choropleth world map colors countries by their 2024 GDP in trillions of US dollars, using a sequential blue scale to indicate magnitude. Built with React and D3 v7, it draws the map via `d3.geoEqualEarth` and `d3.geoPath` over a background sphere, with a tooltip showing exact values on hover. Data comes from the included `world_gdp_2024.csv`, matched to the TopoJSON country names through alias normalization.

Nov 10, 2025

Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Nov 10, 2025

Loading thumbnail…

Dinesh ICE8 Q1

This example shows two maps side-by-side: a world map in a Natural Earth projection and a map of U.S. states using the Albers USA projection, with each state colored according to a numeric value from a linked CSV dataset. The visualization uses D3.js v7 with the `d3.geoNaturalEarth1()` and `d3.geoAlbersUsa()` projections, alongside `d3.geoPath` for rendering GeoJSON features. It loads world countries from `world-atlas`, U.S. states from `us-atlas`, joins state IDs to CSV values, and applies a sequential purple color scale to encode the data.

Nov 10, 2025

Loading thumbnail…

Dinesh ICE8 Q1

This example displays the text “Hello D3” centered on a blank page. It is a minimal starter template that demonstrates basic D3 setup with an import map for the D3 v7 library. The code uses the `select` function from D3 to target the body element and applies the `text` method to render the greeting. The page styling is defined in CSS, setting the font size and layout. This serves as a simple introduction to using D3 for DOM manipulation.

Nov 10, 2025

Loading thumbnail…

Dinesh ICE8 Q1

Nov 10, 2025

Loading thumbnail…

Q3 dinesh area chart D3.js!

This area chart visualizes global average temperatures from 2000 to 2024, showing a steady upward trend from 14.3°C to 15.6°C. The visualization loads data from a CSV file using d3.csv, then employs d3.area and d3.curveMonotoneX to render a smooth filled region with steelblue stroke. Axes are generated with d3.axisBottom and d3.axisLeft, while d3.scaleLinear maps years and temperature values. The SVG chart includes labeled axes and a title, all styled through a separate CSS file.

Oct 28, 2025

Loading thumbnail…

Q2 dinesh Line chart D3.js!

This line chart visualizes the rise in average global temperature from 2000 to 2024, with yearly values plotted as a smooth monotone curve and marked by tomato-colored circles. The D3.js v7 code loads data from a CSV file using `d3.csv`, calculates linear scales with `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. The chart is drawn as an SVG path with a steelblue stroke, while axes labels and a title are added as SVG text elements.

Oct 28, 2025

Loading thumbnail…

Q2 Dinesh Pie chart D3.js!

This D3.js pie chart visualizes global energy consumption by source, displaying percentage shares for coal, natural gas, hydroelectric, nuclear, and renewables. It renders SVG slices using `d3.pie` and `d3.arc`, with `d3.scaleOrdinal` and `d3.schemeSet2` for color encoding. Labels positioned via `arc.centroid` show source names and percentages, while a legend on the right uses colored rectangles. Data comes from an external CSV file loaded with `d3.csv`.

Oct 27, 2025

Loading thumbnail…

Q1 -Dinesh D3.js!

This scatter plot visualizes the relationship between alcohol content and wine quality, with each point's color encoding the wine's citric acid level using a turbo color scale. The visualization displays the data from the included `wine_quality.csv` file, rendering as an SVG. The code constructs a reusable chart function using D3.js v7, leveraging `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to build the axes and scales. The color mapping employs `d3.scaleSequential` with `d3.interpolateTurbo`.

Oct 27, 2025

Loading thumbnail…

Q3 D3 combined chart Dinesh

This combined chart visualizes 200 weeks of student performance data, showing study hours as blue bars, sleep hours as a dashed green line, and exam scores as a red line across a shared timeline. The visualization uses two distinct y-axes—a left axis for hours and a right axis for exam scores—to accommodate the different measurement scales. Built with D3 v7, the chart employs `scaleBand`, `scaleLinear`, `d3.line` with `curveMonotoneX`, and `d3.axisLeft`/`d3.axisRight` to render the SVG elements, including custom gridlines and a legend.

Oct 20, 2025

Loading thumbnail…

Q3 D3 Starter - Dinesh

This example displays a multi-series line chart tracking student performance across 200 weeks, plotting study hours, sleep hours, and exam scores on a single y-axis. The D3 v7 code loads data from a CSV file and uses `d3.line` with `curveMonotoneX` to generate smooth paths for each metric, with circles marking individual data points. Axes and gridlines are rendered via `d3.axisLeft` and `d3.axisBottom`, while a legend distinguishes the three colored series. The visualization employs an SVG-based rendering approach with a white background and styled grid lines.

Oct 20, 2025

Loading thumbnail…

Q2 D3

A scatter plot visualizes the relationship between hours studied and exam scores across 150 students, using D3 v7 to load CSV data and render SVG circles mapped through linear scales. The chart includes labeled axes, a bold title, and semi-transparent steelblue points sized at 4 pixels. Data comes from a local `study_scores.csv` file, with axes and scales configured via `d3.scaleLinear`, `d3.extent`, and `axisBottom`/`axisLeft`.

Oct 20, 2025

Loading thumbnail…

Dinesh D3 Starter

A bar chart displays the average study hours per course, computed from a CSV dataset of 100 students. The visualization uses D3 v7 with SVG rendering, loading data via `d3.csv` and aggregating it with `d3.group` and `d3.mean`. The chart encodes course categories on the x-axis using `d3.scaleBand` and average hours on the y-axis with `d3.scaleLinear`, applying styled rectangles and labeled axes.

Oct 20, 2025

Loading thumbnail…

Coffee shops

This visualization presents summary statistics for a Texas coffee shop dataset. It displays key performance indicators like average daily customers, employees, and monthly revenue, alongside a bar chart showing total monthly revenue by city. The page loads data from a raw CSV file hosted on GitHub Gist using `d3.csv` and builds its UI with D3's selection and DOM manipulation methods. The chart is rendered as SVG, with styling handled by CSS custom properties and layout achieved through a responsive CSS grid.

Oct 6, 2025

Loading thumbnail…

Coffee shops dataset

This visualization presents a dashboard summary of a Texas coffee shop dataset, displaying key performance indicators in a card layout and a bar chart of total monthly revenue by city. The page uses D3 v7 to load data from a raw CSV file hosted on GitHub Gist, computing aggregate statistics like average customers and employee counts. Custom CSS variables establish a dark theme with accent colors, while D3's SVG rendering generates the responsive bar chart with styled axes and gridlines.

Oct 5, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page displaying the text "Hello HTML!" in large, centered type. The code uses standard HTML elements, CSS styling via the `styles.css` file, and a simple JavaScript module that logs "hello world" to the browser console. It demonstrates a basic setup with no external libraries or data sources, serving as a starting point for further visualization development.

Oct 5, 2025

Loading thumbnail…

Fork of HTML Starter

This visualization presents a summary of a Texas coffee shop dataset, displaying key performance indicators for traffic, staffing, and revenue alongside a bar chart of total monthly revenue by city. The dark-themed interface uses D3.js v7 to load and parse CSV data from a GitHub Gist, calculating aggregates with d3.mean and d3.min. Cards display computed statistics, while an SVG bar chart renders the revenue comparison. The code demonstrates D3's data-loading capabilities, CSS styling for visual design, and programmatic selection and text assignment.

Oct 5, 2025