Ali Shah Solanki

@AlishahSolanki·12 public vizzes

ICE8 - Social Network Graph

A social network graph displays individuals as orange circular nodes connected by blue directed links, with node labels and arrowheads indicating the direction of relationships. The visualization uses a force-directed layout via `d3.forceSimulation`, incorporating link distance, charge repulsion, collision detection, and center positioning. Nodes are rendered as SVG circles with drag interaction and hover highlighting, while links include marker-end arrows. The graph loads person-to-person friendship data from a JSON file, with all nodes initially assigned the same group value. The implementation relies on D3 v6 APIs including `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`.

Apr 9, 2023

Loading thumbnail…

ICE-8-Family-Tree

This visualization displays a family tree as an interactive node-link diagram. Built with D3 v3 and SVG, it uses a tree layout to show hierarchical relationships, with node colors indicating different family generations. The animation reveals children upon clicking a parent node, and the layout includes zoom and pan capabilities. Data is loaded from a JSON file, and links between nodes are labeled with their connection details.

Apr 9, 2023

Loading thumbnail…

ICE-8-US-Map

This interactive choropleth displays U.S. states as brown SVG paths, colored green on hover, using a geoAlbersUsa projection and d3.geoPath to render geographic features from a TopoJSON dataset loaded from us-atlas via d3.json. The code builds the map with D3 v5 and topojson’s feature method, and adds a title attribute for each state.

Apr 9, 2023

Loading thumbnail…

ICE-8-Ali-Shah

This example presents an interactive world map using a rotating orthographic globe, with the option to switch to a Mercator projection. Users can drag to rotate the globe and click on a country to change projections, such as zooming into the United States. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, rendering country boundaries and graticules via `d3.geoPath`. It leverages D3.js v6, including `d3.geoOrthographic`, `d3.geoMercator`, `d3.drag`, and `d3.zoom`, with SVG elements for crisp rendering.

Apr 9, 2023

Loading thumbnail…

ICE-7-Area Chart

This area chart displays the average life expectancy of males over a series of years, using a smooth, filled curve rendered as an orange SVG path. The visualization reads data from a CSV file hosted on a GitHub gist, processing the year as a date and the expectancy as a numeric value. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `area` with `curveBasis` to generate the smoothed area shape, alongside custom axis labels and a title.

Mar 26, 2023

Loading thumbnail…

ICE-7-Line Chart

This line chart visualizes the cost of living from 2000 to 2013, with the x-axis representing years and the y-axis showing cost values. The chart is rendered as an SVG using D3 v5, with the `scaleTime` and `scaleLinear` functions defining the axes, and the `line` generator creating the path. Data is loaded from a CSV file hosted on GitHub, and the chart includes axis labels, a title, and styled gridlines via the `axisLeft` and `axisBottom` components.

Mar 26, 2023

Loading thumbnail…

ICE-7-Pie Chart

This example visualizes alcohol consumption by country as a pie chart, showing the top ten countries by liters of alcohol consumed. Built with React and D3 v5, it uses `select`, `csv`, `pie`, and `arc` to generate SVG paths, with `scaleOrdinal` and `schemeCategory10` for colors. A legend, created with `legend.append("rect")` and `text`, displays each country’s name, a color swatch, and its consumption value from the provided CSV data source.

Mar 26, 2023

Loading thumbnail…

ICE-7-Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis, with each species distinguished by a unique shape and color. Built with the Towards Reusable Charts pattern, it uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to render SVG paths. Every two seconds, the plot cycles the x-axis through four measurement columns, animating the data points to new positions via a join update. The example also includes axes rendered with d3.axisLeft and d3.axisBottom.

Mar 26, 2023

Loading thumbnail…

ICE-7-Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting sepal length against petal width. It cycles through different data columns every two seconds, animating the points and axes to explore relationships between all four measurements. The implementation showcases D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` function, following the “Towards Reusable Charts” pattern. The visualization is rendered as SVG with an animated transition, using a palette of colored circles.

Mar 26, 2023

Loading thumbnail…

ICE - 6 Penguin Data set scatter Plot

This scatter plot visualizes the Penguin Data set, showing flipper length on the x-axis and body mass on the y-axis. Each SVG circle represents a penguin, colored by species (blue for Adelie, green for Gentoo, red for Chinstrap). The code uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` to render the marks. Data is loaded from a GitHub gist URL, with axes labeled using cursive fonts and the chart titled "Scatter Plot."

Mar 12, 2023

Loading thumbnail…

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

This example shows alcohol consumption by country using a horizontal bar chart, with the top 25 countries sorted by liters consumed. The visualization is built with React and D3, where the D3 scales `scaleBand` and `scaleLinear` map country names and consumption values to screen positions. SVG rectangles render the bars, while D3's `axisLeft` and `axisBottom` utilities generate tick lines and labels. Data is loaded from a CSV file fetched via D3's `csv` function, and the entire chart is rendered inside a single SVG element managed by React's declarative markup.

Mar 12, 2023

Loading thumbnail…

ICE-5

This example renders a styled HTML table displaying metadata about a user dataset, loaded from a remote CSV file via `d3.csv`. The page fetches the CSV from a GitHub Gist and calculates the file size in kilobytes, the number of rows, and the number of columns, presenting these statistics in a text message. The table itself is styled with translucent white backgrounds and hover effects using CSS, while the background uses a custom SVG. The visualization relies on D3.js version 7 for data loading and formatting.

Mar 5, 2023