IshaChid76

@IshaChid76·15 public vizzes

Scatter Plot - Interactive Color Legend

A scatter plot without axes shows the relationship between total followers and total stream time for streamers, colored by language (English, Portuguese, Spanish, Korean). Hovering a color legend item highlights the corresponding streamer points and dims others. The visualization uses D3 v7 with `scaleLog`, `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to render circles and an interactive legend, loading data from a CSV file.

Apr 27, 2023

Loading thumbnail…

Fork of Twitch Dataset - Dropdown

This scatter plot visualizes Twitch streamer data, showing total followers against total stream time with points colored by language (English, Portuguese, Spanish, Korean). A dropdown menu allows switching the x-axis between followers and views gained, while a color legend enables filtering by language. Built with D3 v7, the visualization uses `scaleLog` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and includes interactive tooltips on hover.

Apr 13, 2023

Loading thumbnail…

Twitch Dataset - Mouseover

A scatter plot of the Twitch dataset plots total followers against total streaming time, with streamers colored by language (English, Portuguese, Spanish, and Korean). Mousing over a point reveals the channel name in a tooltip, while hovering a language label in the color legend dims points from other languages. The visualization uses d3.v7 with scaleLog and scaleOrdinal for axes and colors, and event handlers on circles and legend ticks to drive the interactions. Data comes from a local CSV file parsed with d3.csvParse.

Apr 13, 2023

Loading thumbnail…

Choropleth Rotating Globe

This visualization displays a rotating globe with countries colored according to GDP per capita data from the World Bank. The choropleth map uses a yellow-green-blue color scale to represent economic output, with gray for missing values. Built with D3, it combines `geoOrthographic` projection with `geoPath` to render country boundaries and graticule lines. The globe continuously rotates as the animation updates the rotation state, while `scaleQuantile` and `schemeYlGnBu` define the color encoding for the data values from the CSV dataset.

Mar 29, 2023

Loading thumbnail…

Scatter Plot with Menu

This scatter plot shows the relationship between total followers and total stream time for the top Twitch streamers, colored by language (English, Portuguese, Spanish, and Korean) via d3.scaleOrdinal and a d3 color legend. A d3 menu lets users switch between language filters, though the code only displays the English option. The visualization uses d3.scaleLog for the x-axis and d3.scaleLinear for the y-axis, with axes drawn using d3.axisLeft and d3.axisBottom. Data is loaded and parsed from a CSV file using d3.csvParse, with points rendered as semi-transparent circles.

Mar 24, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Twitch dataset, showing total followers against total stream time for streamers in English, Portuguese, Spanish, and Korean, with each language represented by a distinct color. The visualization uses D3.js with the `d3.scaleLog`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to map data, and draws circles with `d3.selectAll` and `join`. Axes are rendered using the `axes.js` module, while a custom `colorLegend.js` explains the color-coding.

Mar 23, 2023

Loading thumbnail…

World Map

This visualization presents a world map using the Natural Earth projection, displaying country boundaries as paths with graticule lines and an outline. It fetches geospatial data from the visionscarto-world-atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. The map is rendered with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`, with countries drawn as filled paths with white strokes. The visualization adapts to the full browser window size, using D3’s data join pattern to update the SVG elements.

Mar 13, 2023

Loading thumbnail…

Line Chart

This line chart visualizes January temperatures in the United States from 1895 to 2023, using data from NOAA’s Climate at a Glance dataset. It plots temperature in degrees Fahrenheit against time, revealing long-term trends and yearly fluctuations. The visualization is built with D3 v7, using `scaleTime` and `scaleLinear` for axes, `line` to generate the path, and `scaleLinear` for the y-axis, with data loaded via `csvParse`.

Feb 26, 2023

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes the relationship between total followers and total streaming time for Twitch streamers across four languages. The data is sourced from the Twitch dataset and displayed using D3 v7, with points colored by language—red for English, blue for Portuguese, green for Korean, and yellow for Spanish. The visualization uses `scaleLog` and `scaleLinear` for the axes and `scaleOrdinal` for color mapping, with axis labels added via custom `axes.js` code. The plot renders with an animation, though no axes were initially shown, and the chart is built using the `scatterPlot` function which applies the specified scales and color domains.

Feb 19, 2023

Loading thumbnail…

Loading twitch data

This example demonstrates the process of loading and parsing a Twitch streaming dataset for D3.js visualization. The visualization initially displays a raw JSON representation of the data, which is fetched from a local CSV file using the `fetch` API. The code parses the CSV string with `csvParse` and converts numeric columns to numbers. The data includes streamer metrics like watch time, peak viewers, and followers. The example uses `select`, `selectAll`, and `.join` from D3 v7 to render the data as a text preview, highlighting the loading workflow.

Feb 12, 2023

Loading thumbnail…

Income Inequality Pseudo-viz

The visualization displays the top 10 countries by income inequality, using Gini coefficients from OECD data, with bar lengths proportional to inequality values. It uses D3 v7’s data join and selection methods to render rectangles, with a placeholder for future color coding to distinguish G7 members. The current implementation manually embeds a small dataset in JavaScript rather than loading the full CSV, and only the `length` encoding is applied.

Feb 5, 2023

Loading thumbnail…

World University Rankings (2022-23)

This visualization displays the distribution of top-ranked universities across countries using data from the 2022-23 CWUR World University Rankings. The code loads a CSV file, parses numeric fields, and aggregates universities by location using d3.flatRollup to count institutions per country. Built with D3 v7, the visualization currently renders the raw JSON data as text, demonstrating the data transformation pipeline before any graphical chart is created.

Jan 30, 2023

Loading thumbnail…

Income Inequality

This visualization displays income inequality trends across countries using Gini coefficients, which range from 0 (perfect equality) to 1 (perfect inequality). The chart plots each country’s Gini index over time, allowing comparisons between nations and regions. The data is loaded from a CSV file and parsed using D3’s `csvParse` function, with numeric fields converted to numbers. The visualization dynamically updates its state through a custom `setState` function, re-rendering the display whenever new data is fetched or processed.

Jan 22, 2023

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the raw parsed data as a stringified JSON object in a `<pre>` element. The visualization uses a state management pattern with a `setState` function to handle asynchronous data loading, initially showing a "LOADING" placeholder. It fetches `data.csv`, parses it with `d3.csvParse`, and converts numeric columns to numbers before updating the display. The Iris flower dataset is used as the data source, with the rendering approach being a simple text-based output rather than a graphical chart.

Jan 22, 2023

Loading thumbnail…

Mouse Follower

A violet square with a dashed magenta border follows the mouse cursor across a full-screen SVG canvas. The visualization responds to every mouse movement event, continuously updating the square’s x and y coordinates to center it on the pointer. Built with D3 v7, it uses the `d3.select` and `svg.append` APIs to create and manipulate the rectangle, while the `svg.on('mousemove', ...)` handler updates the rect’s position attributes. The square measures 50 by 50 pixels and is positioned relative to the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

Jan 17, 2023