M

mboinapally17

@mboinapally17·16 public vizzes

Loading thumbnail…

Fork of ICE 7 Pie Chart

This example shows a pie chart of sales data for the top 10 products, with a legend displaying each product name and its corresponding sales value in units. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` for coloring segments, and renders via SVG. Data is loaded asynchronously from a CSV file using `d3.csv`, sorted by sales, and sliced to the top 10. Hovering over a slice logs the sales value to the console. The visualization is built within a React starter framework.

Loading thumbnail…

ICE8 - Fashion Tree

This interactive visualization displays a hierarchical fashion tree, mapping named nodes like Kotaiah, Raghu, and Annapurna with typed categories and directional links. Using d3.v3’s tree layout, the SVG renders collapsible nodes with colored rectangles that shift on click, while link paths support green arrows and selection highlighting. The code leverages d3.behavior.zoom for pan and zoom, foreignObject for wrapped text, and CSS tooltips for hover details, with data loaded from a local JSON file.

Loading thumbnail…

ICE8_Argentina_

This map of Argentina displays departmental boundaries and uses a green color scheme, with a dark blue sphere representing the ocean. The visualization uses D3’s `geoPath` and `geoTransverseMercator` projections to render the geographic data. It loads GeoJSON from a GitHub repository containing Argentina’s departments. Zooming is enabled via D3’s `zoom()` method, which applies a transform to the SVG group. Hovering over a department turns it maroon and shows a tooltip with the department and province name. The map is rendered as SVG.

Loading thumbnail…

Mexico map

This example displays a static map of Mexico’s state boundaries using a Mercator projection. The map renders each state as a gray path with black borders, overlaid with white graticule lines and a light teal outline. The visualization uses React to manage state and rendering, while D3’s `geoMercator`, `geoPath`, and `geoGraticule` handle the geographic projection and path generation. State boundaries are derived from a TopoJSON file accessed via a GitHub gist, converted to GeoJSON using the `topojson` library’s `feature` method.

Loading thumbnail…

ICE8 - Social Network Graph

This social network graph visualizes friendships among a group of people, with nodes representing individuals and lines representing their relationships. The graph uses a force-directed layout powered by `d3.forceSimulation`, with link forces, charge repulsion, and collision detection to position the nodes. Data is loaded from a JSON file containing node IDs and link relationships. The visualization is rendered as SVG, with violet circles for nodes, labels showing names, and directional arrow markers on the links. Hovering highlights a node by changing its stroke width and color.

Loading thumbnail…

WORLD MAP

This example displays a world map with countries rendered in tan against a blue sphere, highlighting each country in dark orange on hover. It uses D3 v5’s `d3.geoEquirectangular` projection and `d3.geoPath` to draw the map, with TopoJSON loading the country boundaries from a world-atlas dataset. The SVG paths are generated from GeoJSON features, and the styles are applied via CSS classes.

Loading thumbnail…

World Map ICE 8

This visualization displays a global world map using the equirectangular projection, with countries rendered as individual SVG paths filled in brown and outlined in black. The sphere background is shaded blue, and hovering over any country highlights it in a darker orange. It uses D3 v5’s `geoPath` and `geoEquirectangular` functions together with TopoJSON’s `feature` method to convert country boundaries from the world-atlas dataset. The map is drawn entirely with SVG elements, and interactivity is handled by CSS hover selectors.

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart shows world population from 1955 to 2020, using a smooth curve to emphasize the upward trend. A black line traces the population values over time, while a maroon-filled area beneath the curve highlights the magnitude of growth. The visualization uses D3 v5 with `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for labeled axes. The data is loaded from a CSV file, and the SVG rendering includes custom axis labels and tick styling.

Loading thumbnail…

ICE - 7 Pie Chart

This example shows base salaries across different U.S. government departments using an interactive pie chart with a legend. Each slice represents a department, colored by salary value, with salary amounts displayed in thousands next to colored legend markers. The visualization loads CSV data from a GitHub gist and uses d3.pie, d3.arc(), and d3.scaleOrdinal() to generate SVG paths and legends. The chart is built with React and D3 v5, rendering entirely as SVG elements.

Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes world population from 1950 to 2020. The chart uses D3 v5 with an SVG renderer, employing `d3.scaleTime` for the year axis and `d3.scaleLinear` for population values. A `d3.line` generator creates the red population trend path, with axes labeled via `d3.axisBottom` and `d3.axisLeft`. Data is loaded as CSV from a GitHub gist, with year values parsed as dates.

Loading thumbnail…

Reusable scatter plot with different symbols

A reusable scatter plot displays the Iris Dataset, mapping petal width against sepal length and encoding species with distinct D3 symbols via `d3.symbol` and `d3.scaleOrdinal`. The D3 v6 code constructs the visualization using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG `path` elements for marks. It follows the reusable chart pattern, exposing configurable width, height, margins, and accessor functions. The plot renders with a 100-pixel symbol size and includes a legend-less categorical differentiation of the three iris species.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This visualization displays the classic Iris dataset, mapping petal width against sepal length across three flower species. Built with D3 v6, it renders as an SVG scatter plot using distinct geometric symbols from `d3.symbol` and `d3.symbols` to differentiate species. The code employs `d3.scaleLinear` for axes, `d3.scaleOrdinal` for symbol mapping, and D3 selections with the `.join()` pattern to bind data to paths. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, with axes generated through `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

ICE-6

This example visualizes penguin body measurements from a Gist-hosted CSV file, plotting flipper length against body mass as colored circles for three species. The SVG scatter plot uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to screen positions, with circle radii fixed at 5 pixels. Each point is colored by species via a custom marker function, while culmen length and depth are stored as extra attributes but not visually encoded. The chart includes axes, rotated y-axis label, and a title, all rendered using D3 selections and SVG elements.

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis. Each circle is colored by penguin species (Adelie, Gentoo, or Chinstrap). The code uses d3.csv to load the data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to build the chart, then renders SVG circles with custom fill colors, along with labeled axes and a title.

Loading thumbnail…

ICE-6

This example visualizes the relationship between flipper length and body mass for three penguin species, with each species encoded by color. The scatter plot uses D3’s `scaleLinear` and `extent` to map data values to SVG circle positions, with axes generated via `axisLeft` and `axisBottom`. Data is loaded from a CSV using `d3.csv`, and the chart also encodes culmen length redundantly through circle `rx` and `ry` attributes, though the radius remains constant. The visualization fills the window using `window.innerWidth` and `window.innerHeight`, with custom font styling for axis labels.

Loading thumbnail…

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

This example displays a horizontal bar chart of the base salaries for the top 15 employee position titles from a CSV of U.S. salary data. The React component fetches the remote CSV with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map position titles and salaries to SVG rectangles. The chart uses d3.axisBottom for the x-axis ticks and d3.format for tick labels. Data loading is handled with a useEffect hook, and the SVG is rendered directly within the React return statement.