janisha30gowda@gmail.com

@Mahalakshmi3052002·31 public vizzes

Fork of ICE-8_Q1.2_India_CostIndex_Map

This choropleth map shows Indian states colored by their living cost index, with gray indicating missing data. Built with D3 v7, it loads GeoJSON boundaries via `d3.json` and renders paths with `d3.geoPath` using a Mercator projection fitted to the SVG. State names from the GeoJSON join with a hardcoded cost-index map, and a sequential YlGnBu color scale encodes values. Hovering displays a tooltip with the state name and index.

Nov 10, 2025

Loading thumbnail…

ICE-8_Q1.2_India_CostIndex_Map

This choropleth map visualizes living cost index values across Indian states, with darker blue-green hues representing higher costs and gray indicating missing data. The visualization joins a hardcoded cost dataset to GeoJSON features using the ST_NM property, then applies a d3.geoMercator projection fitted to the SVG canvas. Interactive tooltips display state names and index values on hover via d3.event handlers, while a sequential color scale (d3.scaleSequential with d3.interpolateYlGnBu) and attached legend provide the visual encoding. The GeoJSON source is a remote GitHub repository for India state boundaries.

Nov 10, 2025

Loading thumbnail…

Fork of ICE-8 — USA States Map (Cost Index)

This fork of ICE-8 displays a simplified map of India with states colored by living cost index using a sequential YlGnBu scale. D3 v7’s `d3.geoMercator` projection and `d3.geoPath` render the embedded GeoJSON polygons. Hovering shows a tooltip with the state name and index value, while unlinked areas appear gray. The linked `COST` dataset is joined via the `ST_NM` property.

Nov 10, 2025

Loading thumbnail…

ICE-8 — USA States Map (Cost Index)

A choropleth map of India displays state-level living cost indices, using a linked dataset and geographic features joined by the `ST_NM` property name key. The visualization encodes values through a `d3.scaleSequential` with the `d3.interpolateYlGnBu` color interpolator, while gray shades indicate missing data. Built with D3 v7, it renders as SVG using `d3.geoMercator` projection fitted to the viewport and `d3.geoPath` for drawing state boundaries. Interactive tooltips appear on mouseover, showing each state's index value.

Nov 10, 2025

Loading thumbnail…

ICE-8 — World Map (Population)

This choropleth map shows global population by country, with each nation colored on a blue sequential scale based on its total population. The visualization joins World Geojson map features with population data from a CSV file using their shared ISO-3 country codes, rendering countries with missing data in gray. Built with D3 v7, it uses d3.geoPath with an equirectangular projection and d3.scaleSequential for color encoding, while interactive tooltips reveal country names and formatted population values on hover.

Nov 7, 2025

Loading thumbnail…

ICE-8 — Social Network (Authors & Papers)

This force-directed network visualizes relationships between authors and papers, using circles for authors and diamonds for papers, with colors distinguishing the two groups. The graph employs d3.forceSimulation with link, charge, center, and collision forces to position nodes, while drag behavior allows interactive repositioning. Hovering reveals tooltips showing each node's ID and type, and a legend clarifies the shape encoding. The code uses D3 v7 with SVG rendering, constructing node symbols via d3.symbol and d3.symbolCircle/diamond, with hardcoded sample data.

Nov 6, 2025

Loading thumbnail…

ICE-8 — Family Tree (Enhanced Colors & Shapes)

This family tree visualization shows four generations of relatives, encoding generation through color and gender through geometric shape—circles for females and squares for males. The hierarchical layout uses d3.stratify and d3.tree to position connected nodes, with d3.linkHorizontal drawing the curved parent-child links. A legend clarifies the generation color mapping, while hover tooltips reveal each person’s full details. The SVG rendering includes d3.symbol for node shapes and d3.scaleOrdinal for both color and symbol assignments.

Nov 6, 2025

Loading thumbnail…

ICE-8 — Family Tree (Basic Hierarchy)

This example shows a basic family tree hierarchy with four generations, from a great-grandparent root down to individual family members as leaf nodes. It uses d3.hierarchy to structure the nested data and d3.tree() to compute the layout, with d3.linkHorizontal generating the curved connecting paths. The SVG rendering positions nodes as circles with text labels, and each node includes a title tooltip indicating its depth type (root, internal, or leaf).

Nov 6, 2025

Loading thumbnail…

ICE-8 – World Map

This visualization displays a world map where each country is colored according to its population, using a sequential blue scale to encode population magnitude. Country areas without matching data appear gray. The map uses an equirectangular projection with `d3.geoPath`, drawing country boundaries from TopoJSON data from the world-atlas package. Population values from a CSV file are joined to country names, and the color scale uses `d3.scaleSequential` with `d3.interpolateBlues`. A continuous color legend is rendered using Canvas and `d3.axisBottom` for context.

Nov 6, 2025

Loading thumbnail…

ICE-8 – World Map

A checkpoint visualization confirms that JavaScript is running by rendering a plain gray rectangle alongside a text message. The `index.html` file contains embedded CSS and a script that dynamically creates a styled `<div>` element, setting its dimensions, background color, and margins before appending it to the document body. The script also logs a confirmation to the console, verifying execution. This minimal example serves as a functional test, not a data-driven graphic, and does not employ any external libraries or map-related APIs.

Nov 6, 2025

Loading thumbnail…

Reusable Area Chart – ICE7

This example visualizes the average yearly temperature in Dallas from 2015 to 2023, transforming a CSV file of monthly readings into a single trend line with a shaded area beneath it. The chart uses a monotone cubic interpolation curve to emphasize the gradual yearly shifts in climate data. The code relies on D3 v7 APIs such as `d3.scaleLinear`, `d3.area`, `d3.rollup`, `d3.curveMonotoneX`, and `d3.axisBottom` to construct the scalable vector graphic (SVG), which includes a steelblue fill, gridlines, and labeled axes for temperature and year.

Oct 26, 2025

Loading thumbnail…

between area chart and line chart on this dataset?

This visualization shows the average yearly temperature in Dallas from 2015 to 2023, using a smooth area chart to highlight the overall trend. Monthly temperature readings from the CSV file are aggregated into yearly averages, and the area fill is drawn beneath a monotone curve. The code uses D3 v7 with `d3.area()`, `d3.rollup()`, `d3.mean()`, and `d3.scaleLinear()` to compute and render the data, with grid lines from `d3.axisBottom()` and `d3.axisLeft()` for readability.

Oct 25, 2025

Loading thumbnail…

Reusable Line Chart - Dallas Temperature (ICE7)

This example displays the average yearly temperature in Dallas from 2015 to 2023, drawing a single smooth line that reveals the overall warming trend across nine years. The visualization is built with D3 v7, using `d3.csv` to load the monthly temperature data, `d3.rollup` to group records by year and calculate the mean, and `d3.line` with `curveMonotoneX` to render the SVG path. Gridlines are generated with `d3.axisBottom` and `d3.axisLeft`, and the chart is presented on a 900×500 SVG canvas with labeled axes and a bold title.

Oct 25, 2025

Loading thumbnail…

Reusable Line Chart – ICE7

This reusable line chart visualizes average monthly temperatures in Dallas from 2015 to 2023, with each year’s temperature trend shown as a smooth, monotone curve. The chart uses D3 v7’s `d3.line()` with `curveMonotoneX` to generate the SVG path, along with `scaleLinear` for both axes. Gridlines are added via custom axis ticks, and the y-axis uses a fixed domain of 500 million to 1.5 billion, reflecting the dataset’s population values. The code reads from a CSV file and renders the visualization as an SVG element with a white background and shadow styling.

Oct 24, 2025

Loading thumbnail…

Reusable Line Chart – ICE7

This example demonstrates a minimal D3.js starter template that renders a simple text message on a webpage. It uses d3.select to target the body element and sets its content to “Hello D3.” The visualization is built with D3 v7, loaded via an import map for ES module support, and styled through inline CSS. It shows the basic setup for initializing a D3 project with a JavaScript module file.

Oct 24, 2025

Loading thumbnail…

Reusable Pie Chart – ICE7

This example shows a reusable pie chart that visualizes the average sepal length for three flower types—Rose, Tulip, and Lily—from a CSV dataset. The chart groups the raw data using `d3.rollup` to compute means, then renders slices with `d3.pie` and `d3.arc` within an SVG. A color scale from `d3.scaleOrdinal` maps categories to colors, and a legend is added for identification. The implementation follows a modular function structure, loading D3 v7 via an ES module import.

Oct 24, 2025

Loading thumbnail…

Reusable Fork of Scatter Plot - ICE7

This example visualizes the relationship between petal width and sepal length for three flower species (Rose, Tulip, and Lily) using an SVG scatter plot rendered with D3 v7. The code loads data from a CSV file, scales the axes linearly, and maps flower type to a categorical color scale (steelblue, tomato, black). It includes axis labels, a chart title, and a legend, with points drawn as semi-transparent circles. The scatter plot shows clear clustering by species, with lilies having the largest dimensions.

Oct 24, 2025

Loading thumbnail…

Fork of reusable Fork of Scatter Plot - ICE7

This scatter plot visualizes the relationship between vehicle weight and horsepower using a synthetic dataset of 100 cars. The chart uses D3.js v7 with a reusable `scatterPlot()` function component, rendered as an SVG. The x-axis represents weight in pounds, while the y-axis shows horsepower, with each car plotted as a semi-transparent steel-blue circle. The code demonstrates D3's modular design by using method chaining with `.data()`, `.x()`, `.y()`, and label setters, along with `d3.scaleLinear()` for axis scaling and `d3.axisBottom()` and `d3.axisLeft()` for tick marks.

Oct 24, 2025

Loading thumbnail…

reusable Fork of Scatter Plot - ICE7

This example shows a reusable scatter plot of the cars dataset, mapping Horsepower against Weight for 100 cars. It uses a custom `scatterPlot()` function built with D3 v7 that configures linear scales, axes, and circle elements via method chaining. The SVG chart is rendered with `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to compute domains, while `d3.select().call()` applies the chart to the selection. Data is loaded from an external CSV file and converted to numeric values before plotting.

Oct 24, 2025

Loading thumbnail…

Scatter Plot Reusable - ICE7

This reusable scatter plot shows the relationship between car weight and horsepower across 100 vehicles from a synthetic cars.csv dataset. The chart renders SVG circles positioned by D3 linear scales, with axes labeled to clarify the correlation. The code uses a reusable chart function pattern with getter-setter methods, D3 v7’s data join for circles, and d3.axisBottom/d3.axisLeft for the axes. The tooltip-free visualization primarily demonstrates how to build a modular, configurable scatter plot component.

Oct 24, 2025

Loading thumbnail…

Reusable Scatter Plot - ICE7

The ICE7 reusable scatter plot displays data points as a two-dimensional distribution, with the underlying dataset sourced from the v3 project. It is built using the `d3` library, specifically calling `select` from D3 to target the body element and render text. The visualization demonstrates a minimal D3 approach, where the primary action is appending a static text string, "Hello D3," to the page, rather than plotting actual points. The code reveals a straightforward, non-interactive example that relies solely on D3's core selection API for its output.

Oct 23, 2025

Loading thumbnail…

Reusable Scatter Plot - ICE7

This example demonstrates a minimal D3.js starter template that displays the text "Hello D3" centered on the page at a large font size. The visualization uses the `select` function from the d3 module to target the body element and set its text content. The code imports d3 v7 as an ES module and runs entirely within the browser without any external data sources or complex rendering logic.

Oct 23, 2025

Loading thumbnail…

ICE-6 Multi-Series and Combined Chart

This example presents two D3.js v7 charts built with SVG, using data from a city_temps.csv file. The first is a multi-series line chart for Dallas showing monthly Temperature, Rainfall, and Humidity trends with distinct colored lines and a legend. The second is a combined chart overlaying steelblue bars for rainfall with a tomato-colored line for temperature, using a band scale for months and a linear scale for values. Both charts utilize d3.csv, d3.line, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and D3 selections to render the visualizations.

Oct 20, 2025

Loading thumbnail…

ICE-6 Bar Chart

This bar chart visualizes the average annual temperature across several U.S. cities, derived from monthly city_temperature.csv data. Each bar represents one city, with heights mapped to the mean of its recorded monthly temperatures. Built with D3 v7, the SVG chart uses d3.rollup and d3.mean to aggregate monthly values per city, d3.scaleBand and d3.scaleLinear for positioning, and includes interactive hover tooltips that display the exact average temperature while highlighting the bar. Axis labels and rotated city names aid readability.

Oct 20, 2025

Loading thumbnail…

ICE-6 Scatter Plot.

This scatter plot visualizes the sepal length and sepal width measurements from the Iris dataset. Each data point is represented as a purple circle, plotted using D3 v7's `scaleLinear` and `extent` functions to map the numeric values to the SVG canvas. The chart includes labeled x and y axes, created with `axisBottom` and `axisLeft`, and is rendered as an SVG. The data is loaded from a local `iris.csv` file using D3's `csv` method.

Oct 17, 2025

Loading thumbnail…

Bar Chart ICE-6

This bar chart example displays the text "Hello D3" in the center of the page using a large, bold font size. The visualization demonstrates the basic setup of a D3.js project in a modular JavaScript environment, loading v7 of the library through an import map. The code uses the `select` function from d3 to target the body element and the `text` method to insert the greeting message. The HTML structure includes a minimal stylesheet that centers the content and sets the font size, creating a clean, simple starting point for more complex charts.

Oct 17, 2025

Loading thumbnail…

ICE-6 Multi-Series Chart

Two SVG charts display monthly weather data for multiple U.S. cities from `city_temps.csv`. The multi-series line chart draws separate lines for temperature, rainfall, and humidity per city using `d3.line`, `d3.scaleLinear`, and `d3.scaleOrdinal`. A combined chart juxtaposes Dallas rainfall as bars with a temperature line on the same axes, using `d3.scaleBand` and `d3.axisBottom`. Both charts use SVG rendering with D3 v7 selection and data-binding APIs.

Oct 16, 2025

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the classic Iris dataset, using purple semi-transparent points. The visualization is built with D3.js v7, loading data from a remote CSV via `d3.csv` and rendering to an SVG canvas. The code utilizes `d3.scaleLinear` with `d3.extent` for axis scaling, positions circles with `cx` and `cy` attributes, and adds labeled axes and a title through `d3.axisBottom` and `d3.axisLeft`.

Oct 16, 2025

Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart of average temperatures by city, rendered as an SVG with a steelblue fill for each bar and an orange hover highlight. It loads data from a CSV file and uses D3 v3’s `scaleBand` and `scaleLinear` to position bars, while `axisBottom` and `axisLeft` add labeled axes with a thinned tick list. The chart is built on an 800×500 canvas with margins, a title, and sans-serif styling from a separate CSS file. The code imports the D3 library via a module script and includes a minimal `index.js` that writes a placeholder text.

Oct 16, 2025

Loading thumbnail…

ICE-5 Campus Food Trucks

This D3.js example displays a summary of a campus food truck dataset loaded from a remote CSV file. The page shows the row and column count, along with an approximate file size of 1 KB, in a styled summary area adjacent to a simple illustrative SVG containing a labeled rectangle. The project uses the `d3.csv` method to asynchronously fetch and parse the data, then directly updates the HTML `innerHTML` property to present the calculated findings. Static SVG elements are defined directly in the HTML markup, while styling is handled through internal CSS rules.

Oct 3, 2025

Loading thumbnail…

ICE-5 Campus Food Trucks

This example visualizes campus food truck data by showing a bar chart of cuisine counts alongside summary statistics and a full data table. It loads a CSV file from a GitHub gist using D3.js’s `d3.csv` method with `d3.autoType` for type inference. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` to map cuisine categories to rectangular bars, with counts labeled above each bar. Summary values are calculated via `d3.mean`, and the table is populated using D3’s data join pattern.

Oct 2, 2025