Karnisrikanth

@Karnisrikanth·23 public vizzes

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical dataset of individuals, with nodes color-coded by their type and labeled with names. Clicking nodes toggles their child branches, while tooltips appear on hover. Built with D3.js v3, it uses a collapsible tree layout with SVG rendering, zoom and drag behavior, and animated transitions between states. Data is loaded from an external JSON file, and custom styles define node shapes, link colors, and tooltip backgrounds.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of Social Network Graph-ICE-8

This interactive social network graph visualizes friendships among a group of individuals, such as Virat Kholi, Dhoni, and Warner, using a force-directed layout. Nodes represent people and links represent their connections, with node size and hover effects highlighting individual nodes. The visualization uses D3.js v6 with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` to position the elements, and renders the result as an SVG. The `data.json` file provides the source data for the network structure.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This map shows the United States with each state rendered in orange, outlined with dark gray strokes. The visualization uses the D3.js library (v4) with `d3.geoPath` and the `d3.geoAlbersUsa` projection to display the country. GeoJSON data is loaded from a remote URL via `d3.json`, and the TopoJSON client library is used to convert the geographic features into SVG paths. The map is centered and scaled using the projection’s `.scale` and `.translate` methods.

Apr 13, 2023

Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a map of the USA using an Albers projection from D3’s geoAlbers API, with graticule lines drawn via geoGraticule. The landmasses are filled white against a teal sphere, while internal borders appear as blue strokes via topojson’s mesh. React manages the component state, loading TopoJSON data from a gist, and D3’s geoPath renders the SVG paths. The visualization also defines a graticule for reference, though it is not currently rendered in the final output.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of ICE-8 Family Tree

This example shows an interactive family tree diagram for the Kohli family, with nodes representing individuals and links showing parent-child relationships. Users can click on nodes to collapse or expand branches, with animated transitions smoothly repositioning elements. The visualization uses the D3.js library's tree layout and diagonal path generator to structure the SVG rendering, while custom CSS styles green node circles and connecting lines. The tree data is hardcoded in a JavaScript array, and the collapse/expand behavior leverages D3's standard enter-update-exit pattern with transition methods.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE 8 - Country Map

This example displays a static map of countries filled in red with dark outlines, rendered as SVG paths on a light green background. It uses D3 v4’s `d3.geoPath` with an AlbersUSA projection to draw geographic boundaries, and `topojson.feature` to extract country polygons from a remote TopoJSON source. The map is centered and scaled within a fixed viewport, with no interactive or animated behavior.

Apr 10, 2023

Loading thumbnail…

Fork of World Map IC8

This visualization displays a world map with countries colored by their political status, using light gray for sovereign states and overseas territories, light gray for Antarctica and disputed areas, and white as a default. The map is rendered using D3 v5 with a natural Earth projection and SVG paths generated by `d3.geoPath`, while country boundaries are loaded from a TopoJSON file and converted to GeoJSON via the `topojson.feature` method. A blue sphere backdrop and a black stroke on each country, along with a hover effect that turns countries blue, complete the presentation.

Apr 10, 2023

Loading thumbnail…

Fork of ICE8 - World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them with the `feature` method from TopoJSON. The visualization uses `d3.geoPath` with `d3.geoNaturalEarth1` to draw the sphere outline and country paths, with styling applied through CSS classes.

Apr 10, 2023

Loading thumbnail…

Fork of 2015 Internet Users World Map

This world map visualizes Internet users per 100 people in 2015, using a green color scale to represent percentage ranges from 0–20% to 80–100%, with gray for missing data. Hovering over a country reveals its name and exact percentage via a tooltip, while d3.zoom enables panning and zooming to inspect regions. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, and d3.scaleOrdinal for the legend. Data comes from the Internet Users Dataset on Kaggle.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of World Map IC8

This example presents a world map rendered as an SVG using a Natural Earth projection. It displays country boundaries as red paths with a subtle maroon stroke, set against a yellow sphere backdrop. The visualization loads GeoJSON data from a remote gist, processes it with `topojson.feature`, and draws the map using `d3.geoPath` and `d3.geoNaturalEarth1`. The code leverages d3.v5’s `json` method for data fetching and `select` for DOM manipulation.

Apr 4, 2023

Loading thumbnail…

Fork of Fork of Reusable_D3_Scatter_Plot.

This example shows an interactive scatter plot of the Iris dataset, cycling through four different x-axis variables (petal width, sepal width, petal length, sepal length) on a timer using `setInterval`. The plot uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader, with circles colored by species (setosa, versicolor, virginica) via an inline switch. SVG circles are drawn with static positions, while a reusable `scatterPlot()` module updates axes and point placement, rendering in a React-free HTML page with custom CSS styling.

Mar 26, 2023

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It animates through all four numeric measurements by updating the x-axis every ten seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. The plot uses D3 v6's `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG symbols, with distinct shapes and colors for each species. Data is loaded from a CSV file via `d3.csv`, and the visualization updates dynamically by re-calling the scatter plot function with new x-value mappings.

Mar 26, 2023

Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, encoding species with distinct colors and shapes while mapping petal width and sepal length to the x and y axes. It cycles through four quantitative columns every ten seconds, updating the x-axis domain and point positions with animation. The visualization uses the D3 v6 module API, including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` for shape encoding, with SVG rendering driven by a `setInterval` loop that re-invokes the chart function.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example renders the classic Iris dataset as a reusable scatter plot in D3 v6. It uses d3.scaleLinear and d3.axisBottom/axisLeft to map petal width against sepal length, with d3.scaleOrdinal assigning distinct colors and SVG symbol shapes by species. The chart updates every 10 seconds, cycling through different x-axis columns via setInterval, demonstrating dynamic axis transitions. Data is loaded asynchronously from a CSV URL using d3.csv.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example shows the Iris Dataset as a scatter plot of petal width against sepal length, with each of the three species distinguished by color and a unique symbol shape. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for mapping species to colors and shapes from d3.symbol, and d3.axisBottom and d3.axisLeft for ticks. Every ten seconds, the x-axis variable cycles through four measurements, animating the plot via a setInterval that updates the scatter plot’s xValue accessor and re-renders the SVG.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the number of books sold over time, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for the axes. The line and filled area beneath it are rendered using `d3.line` and `d3.area` with `d3.curveBasis`, and the SVG output is generated using React and D3 v5.

Mar 25, 2023

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 Area Chart visualizes total car sales in India from 2009 to 2019 as a combined line and area chart rendered in SVG. Using d3.csv, it loads the data and applies scaleTime and scaleLinear to map dates and sales values, while d3.line and d3.area with curveBasis generate the smooth path and filled region. The code uses axisBottom and axisLeft for axes, formats tick labels with d3.format, and styles the chart via external CSS. Data is sourced from a GitHub gist CSV file.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This line chart shows book sales per year, with a green line tracing the trend over time. The chart includes labeled axes, gridlines, and a title, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` APIs. Data is loaded from a CSV file via `d3.csv`, with year values parsed as dates. The SVG is rendered with margins and axis labels, and gridlines are created by setting negative tick sizes on the axes.

Mar 25, 2023

Loading thumbnail…

Fork of line chart ice7

A line chart displays Total_Sales across US states from 2012 to 2022. The visualization uses d3.scaleTime and d3.scaleLinear to map state dates and sales values to SVG coordinates, with axes generated via d3.axisBottom and d3.axisLeft. A d3.line generator creates the path, which is styled with a teal stroke. Data loads from a CSV file using d3.csv, then parses the state column into Date objects for the time scale.

Mar 25, 2023

Loading thumbnail…

Fork of ic7

This visualization shows the highest nuclear energy consumption from 2010 to 2020 as a line chart, with a green title and red axis labels and blue gridlines. It uses d3.line, d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render an SVG path, parsing data from a CSV file with d3.csv and d3.timeParse. The line’s stroke is brown, and axis labels are formatted with d3.format.

Mar 25, 2023

Loading thumbnail…

Fork of Pie Chart

This example displays the total sales figures for the top 10 US states as a pie chart, with each segment sized proportionally to its sales value. The visualization includes a legend showing state names and formatted dollar amounts, and hovering over a segment logs that state’s sales to the console. Built with D3 v5 and React, it uses `d3.csv` to load data from a GitHub gist, `d3.pie` to compute angles, `d3.arc` to generate SVG paths, and `d3.scaleOrdinal` with `schemeCategory10` for colors. The data is sorted descending before rendering.

Mar 25, 2023

Loading thumbnail…

Fork of Ic7 scattered plot

This scatter plot visualizes the Iris dataset, encoding sepal length on the y-axis and petal width on the x-axis, with species represented by distinct D3 symbol shapes. The chart animates every 15 seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length as the x-axis variable via a `setInterval` callback that updates the chart’s accessor function. Built with reusable chart patterns from `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol`, the SVG rendering animates smoothly. The code imports from D3 v6 and uses a CSV fetched from a GitHub Gist.

Mar 25, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows the basic cost of Netflix subscriptions across different countries, rendered as a collection of marks positioned on a page. The visualization uses React components to manage the DOM elements, while D3 v5 handles data manipulation and scale construction. The code relies on React’s `createElement` and `useState` for rendering and state, alongside D3’s `scaleBand` and `scaleLinear` to map country names and prices to screen coordinates. Data is embedded directly in the JavaScript, and each country is represented as a colored bar, with the title displayed prominently above the chart.

Mar 7, 2023