ajayrao0

@ajayrao0·14 public vizzes

ICE 8 Graph Example

This example presents a force-directed graph visualizing a social network of named individuals. The graph uses nodes and weighted links to show connections, with each person’s name displayed beside a colored circle. The visualization is built using D3 version 2’s `d3.layout.force()` API to simulate the physics of repulsion and attraction. The code loads node and link data from an external `graph.json` file, renders the network as SVG, and includes interactive dragging of nodes via `force.drag`. Node fill colors reflect per-node values from the dataset.

Apr 5, 2022

Loading thumbnail…

ICE 8 Indian map

This interactive map of India renders both state and district boundaries using a spherical Mercator projection, centered on the country with color-coded districts from a categorical palette. Hovering over a district turns it yellow and reveals its name and state via a tooltip. Built with React and D3, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.scaleOrdinal` to generate SVG paths from TopoJSON sources, while `d3.zoom` enables pan and zoom interactions.

Apr 5, 2022

Loading thumbnail…

Ice 8 World Map

This visualization presents a world map using the Natural Earth projection, with countries filled in gray and outlined in red, set against a turquoise sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using topojson.feature. The map is rendered as SVG paths via d3.geoPath with a d3.geoNaturalEarth1 projection, with country borders drawn as separate path elements.

Apr 5, 2022

Loading thumbnail…

Tree Example

This example shows an interactive family tree using a hierarchical node-link diagram, with each person represented as a colored circle and labeled with their name. The tree is built from a static JavaScript array and rendered with SVG, where nodes collapse and expand on click, and transitions animate position changes over 750 milliseconds. Using D3.js version 3’s `d3.layout.tree` and `d3.svg.diagonal`, the code computes the layout and draws curved links, while node fill and stroke colors encode the person’s type and level fields.

Apr 5, 2022

Loading thumbnail…

ICE - 7 Ajay Polsani Q1

This animated scatter plot cycles through the Iris dataset’s four numeric attributes on the x-axis every two seconds, while the y-axis remains fixed to sepal length. Colored circles encode species (orange, indigo, and lawngreen), with axes redrawn dynamically via d3’s axisBottom and axisLeft. Using d3.csv to load the data, scaleLinear for mapping, and a custom scatterPlot function, the visualization updates labels and transitions seamlessly between petal width, sepal width, petal length, and sepal length. Rendering is done with SVG and setInterval-driven animation.

Mar 29, 2022

Loading thumbnail…

ICE-7 Q4 Ajay Polsani

This example shows bike sales trends from 2010 to 2019 using a combined line and area chart rendered in SVG. The visualization plots yearly sales on the y-axis against time on the x-axis, with axis labels and tick formatting applied. It uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.line with d3.curveBasis for the line path, while d3.area fills the region beneath it. The axes are generated with d3.axisBottom and d3.axisLeft, and the data is sourced from a GitHub Gist URL.

Mar 29, 2022

Loading thumbnail…

ICE 7-Q3 Ajay Polsani

This visualization displays bike sales in India from 2009 to 2019 using a line chart rendered with React and D3 v7. The line chart plots years on the x-axis using d3.scaleTime and sales numbers on the y-axis using d3.scaleLinear, with data loaded from a CSV file via d3.csv. The rendered SVG includes custom axes, a smoothed curve created with d3.line and curveBasis, and axis labels showing "Year" and "Number of Sales."

Mar 29, 2022

Loading thumbnail…

ICE-7 Q2 Pie Chart Ajay Polsani

A pie chart displays the top eight bike sales from 2014, with each slice labeled with its sales value in thousands and a legend mapping colors to bike names. The visualization is built with D3 v5 and rendered as an SVG, using the `pie`, `arc`, `scaleOrdinal`, and `select` APIs to generate the slices, centroids, and color scale. The data is loaded from a CSV hosted on GitHub, and the chart also formats numeric labels using `format('.4~g')`.

Mar 29, 2022

Loading thumbnail…

Top 15 Sales in the year 2019

This visualization is a scatter plot of the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). The code uses D3 v6 with an SVG rendering approach, employing `d3.csv` to load the data, `d3.scaleLinear` and `d3.extent` to map values to pixel coordinates, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Each circle’s fill color is assigned via a switch statement, while the chart fills the browser window.

Mar 8, 2022

Loading thumbnail…

Top 15 bike sales in 2019

This horizontal bar chart ranks the top 15 bike models by sales in rupees for 2019, using data loaded from a CSV file via `d3.csv`. It shows the sales value for each bike with red bars, and includes axis labels and a chart title. The visualization is rendered in SVG using D3 v5, with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and customized `axisBottom` and `axisLeft` components, the former formatting tick labels with `format('.3s')`.

Mar 8, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example displays summary statistics about a CSV file loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count in a styled `<pre>` element. It uses D3.js v7’s `d3.csv` to fetch and parse the remote data, then `d3.csvFormat` to measure its string length. The page also includes custom CSS for visual formatting of the heading and message container.

Feb 25, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse CSV data using D3.js. It displays a headline and a message stating the data size in kilobytes, the number of rows, and the number of columns from a remote CSV file. The example uses D3.js v7's `d3.csv` function to fetch and parse the data, then `d3.csvFormat` to calculate its length. The data source is a GitHub Gist, and the page also includes an SVG image.

Feb 22, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js v7. It fetches a remote CSV file via `d3.csv`, then computes and displays basic metadata about the dataset, including its size in kilobytes, row count, and column count. The results appear in an HTML `<pre>` element styled with CSS. The page also includes an inline SVG illustration and a heading, showing a minimal integration of D3 with a plain HTML document. The rendering approach is simple DOM manipulation using `document.getElementById` to update text content.

Feb 22, 2022

Loading thumbnail…

Fork of 04 - let's make a face - dataviz 2018

A stylized smiley face, drawn with gray, red, and green shapes, shows animated eyebrows that repeatedly raise and lower via chained D3 transitions. The face, eyes, and mouth are built with SVG circles and an arc path, positioned with manual coordinate math. Using D3 v7, the code selects the `svg` element and applies `transition.duration` with `.on('end')` callbacks to loop the eyebrow animation indefinitely. The brows are rectangles inside a grouped `<g>` element, and the mouth is generated with `d3.arc` using explicit radius and angle values.

Feb 18, 2022