sreesushmav

@sreesushmav·12 public vizzes

ICE-8 INDIA MAP

This example visualizes the states of India as colored polygons, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator for projection and d3.geoPath to render the TopoJSON geometry into SVG paths. The map displays state borders with black strokes and positions name labels at each state’s centroid. Data comes from a remote TopoJSON file of Indian administrative boundaries, processed via the topojson library’s `feature` method.

Apr 12, 2023

Loading thumbnail…

ICE-8 Family Tree

A family tree visualization displays multiple generations of relatives, with nodes colored by generation depth and animated links forming parent-child connections. The example uses D3 v6 with the `d3.stratify()` and `d3.tree()` layout APIs to structure hierarchical data, rendering SVG circles and text labels. Node and link transitions animate over 1.5 seconds, while distinct fill colors—from light blue to dark teal—differentiate each generation level. The data is defined inline as an array of parent-child relationships.

Apr 10, 2023

Loading thumbnail…

ICE-8 World Map

This interactive world map visualizes country boundaries as vector paths, with pink landmasses set against a blue ocean background. Hovering over a country highlights it in red. Built with D3 version 5, the visualization uses `d3.geoPath` and `d3.geoEquirectangular` for map projection and rendering. Country geometries come from the world-atlas dataset in TopoJSON format, which is converted to GeoJSON features using the `topojson` package’s `feature` method, then drawn as SVG paths.

Apr 10, 2023

Loading thumbnail…

ICE 8 example for social Network graphic

This network graphic visualizes social connections from `graphFile.json` using force-directed layout. D3 v4’s `d3.layout.force` positions six nodes with weighted links, rendered as blue SVG lines. Circles with red fills and black strokes represent people; labels display names. The `force.drag` API enables interactive node repositioning, while the `force.on("tick")` handler updates link coordinates and node transforms during simulation.

Apr 10, 2023

Loading thumbnail…

ICE-7 PIE CHART

This pie chart visualizes the population distribution of Texas by six age groups, from children to senior citizens, using a legend to identify each category. It employs D3 v6’s `d3.pie` and `d3.arc` generators to compute and render the SVG arc paths, with each slice filled by a distinct color from a predefined list. The chart loads data from a CSV file via `d3.csv` and displays percentages as proportional segments, with the legend positioned alongside the chart for clear labeling.

Mar 26, 2023

Loading thumbnail…

Area chart-ICE-7

This area chart visualizes India’s population from 1980 to 2020, with data points from a CSV file and a smoothed curve using `d3.area` and `d3.curveBasis`. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, rendered as SVG. Axis labels and tick formatting employ `d3.axisBottom`, `d3.axisLeft`, and `d3.format`. The line and area are styled with CSS classes, highlighting population growth over four decades.

Mar 26, 2023

Loading thumbnail…

D3.js Line Chart

This line chart visualizes the population of India from 1950 to 2020, using a steelblue stroke to trace the upward trend over time. The chart loads data from a local CSV file using `d3.csv`, maps the years to a `d3.scaleBand` on the x-axis and population values to a `d3.scaleLinear` on the y-axis, and renders the line as an SVG path with `d3.line`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels for "Year" and "Population".

Mar 25, 2023

Loading thumbnail…

ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. The chart cycles through different attribute combinations every ten seconds, dynamically updating both axes and the data point positions. Built with a reusable D3 module, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for coloring points by species, with symbols varied by species type. The implementation loads data via `csv` from a GitHub gist and renders animated SVG elements.

Mar 25, 2023

Loading thumbnail…

ICE 6: Scatterplot

This scatterplot visualizes penguin measurements from a CSV dataset, plotting flipper length against body mass while coloring each point by species (yellow, green, or red). The code uses d3.csv to load and parse the data, then d3.scaleLinear and d3.extent to map values to screen coordinates, with d3.axisLeft and d3.axisBottom for labeled axes. Circles are rendered via SVG selections and data joins, with custom attributes for culmen dimensions. The chart also includes axis labels and a title, all styled with cursive fonts.

Mar 12, 2023

Loading thumbnail…

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

This interactive bar chart visualizes Uber pickups across New York City, displaying the top 15 dispatching base numbers by trip count. The visualization uses React for component management and D3 v5 for data loading, scales, and axes. Data is fetched via `d3.csv` from a GitHub gist URL, with a horizontal bar layout using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Each bar is rendered as an SVG `<rect>` element, with gridlines and tick labels generated manually through SVG `<g>` and `<text>` elements. The chart features a green background and purple gridlines.

Mar 12, 2023

Loading thumbnail…

Bar Chart

This example shows a bar chart that visualizes numeric values associated with categorical labels from a CSV file. The chart is rendered on an HTML canvas using the Chart.js library, with data fetched from a remote GitHub gist. The code parses the CSV rows, extracts the label and value columns, and configures a bar chart with blue semi-transparent bars and an axis that begins at zero. No other interaction or animation is present.

Mar 12, 2023

Loading thumbnail…

Fork of ICE-5

This web page summarizes the Forest Cover Type Dataset from Roosevelt National Forest in Colorado. It displays the dataset's number of rows, number of columns, file size in bytes, and column names in a styled list. The page uses D3.js v7 to load the CSV data via `d3.csv` and dynamically appends list items using `d3.select` and `.append`. The dataset is accessed from a GitHub Gist URL, with the page styled using custom CSS for the background image and layout.

Mar 4, 2023