skambhore04

Stacked bar chartIPL

This stacked bar chart displays IPL match data, with the y-axis showing dates and the x-axis representing a quantitative value. The chart splits the data into positive and negative stacked segments, using a Tableau10 color scheme to distinguish categories. It uses D3 v5 with `d3.stack`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization, rendering as SVG from a CSV file.

Apr 5, 2022

Family Tree Shahaji Raje -By Sushil

A family tree for Shahaji Raje and his descendants is shown as an animated, collapsible SVG diagram. The visualization uses D3.js version 3.5 to render a hierarchical tree layout, with nodes representing family members and links indicating parent-child relationships. Each node is a circle colored by a `type` property and labeled with the person’s name. Users can click nodes to collapse or expand branches, with transitions animating node positions over 750 milliseconds. The code defines the tree data inline as a JavaScript array and uses `d3.layout.tree` and `d3.svg.diagonal` for layout and path generation.

Apr 5, 2022

USA Map By Sushil

This example displays a choropleth-style map of the United States using SVG. It shows state boundaries rendered as red strokes on a blank canvas, with states that change to blue on hover. The visualization loads TopoJSON data from `https://d3js.org/us-10m.v1.json` and converts it to GeoJSON features using `topojson.feature`. It draws the map with `d3.geoPath` and applies a mesh via `topojson.mesh` to outline borders. The styling uses CSS for hover effects and stroke widths.

World Map with D3JS and TOPOJSON-SK

This example displays a world map composed of individual country regions. It renders an orthographic projection of the globe using the `d3.geoOrthographic` and `d3.geoPath` APIs from D3 v5, with country boundaries generated from TopoJSON data via the `topojson.feature` function. The map loads geographic coordinates from the world-atlas TopoJSON source, and SVG paths are styled with green fills and blue strokes on a light blue background.

Untitled

This example shows a force-directed network tree built with the D3.js library (v2), rendered as SVG. It displays nodes labeled with Indian cricket player names, connected by weighted links. The code uses `d3.layout.force()` to simulate physical forces, with circle and text elements for each node, and line elements for links whose stroke-width reflects link weight. Data is loaded from a JSON file, and the force simulation updates node positions and link coordinates on each tick.

Fork of Fork of USA Map with D3JS and TOPOJSON-SK

An orthographic world map displays country polygons as solid green paths with blue strokes against a light blue background. The visualization loads TopoJSON data from the world-atlas package using d3.json, converts it to GeoJSON with topojson.feature, and renders it as SVG paths via d3.geoPath with a d3.geoOrthographic projection. The map responds to no user interaction, showing a static single view of the globe.

Fork of USA Map with D3JS and TOPOJSON-SK

This example displays a map of world countries as an orthographic projection, rendered in green with blue outlines on a light blue background. It loads geographic data from the world-atlas TopoJSON file using `d3.json` and converts it to GeoJSON with the `feature` function from TopoJSON. The map is drawn as SVG paths using `d3.geoPath` with a `geoOrthographic` projection, creating a spherical globe-like view of the landmasses.

World Map with D3JS and TOPOJSON-SK

This example displays a world map using an orthographic projection, rendering the landmasses as individual SVG paths. The visualization loads country boundary data from the `world-atlas` package via `d3.json` and processes it with the `topojson` library’s `feature` function. The map is drawn by projecting geographic coordinates onto a two-dimensional plane using `d3.geoOrthographic` and converting them to SVG path data with `d3.geoPath`. The code relies on the D3.js v5 API, specifically `d3.json`, `d3.geoPath`, and `d3.geoOrthographic`.

D3 tutorial

This example displays a placeholder page with the text “World Map!” centered in a large font. The code uses D3.js v3 and the `d3.json` method to fetch world atlas TopoJSON data from the world-atlas package, logging the loaded data to the console. The visualization does not yet render any map or geographic paths; it only prepares the data loading pipeline for future mapping with D3.

Create a family tree

This example builds a family tree visualization from a small dataset of parent-child relationships, using D3.js v5 and React. The tree structure is created with `d3.stratify()` and `d3.tree()`, which arranges nodes hierarchically, and the SVG rendering places circles for each family member connected by links. The data includes historical figures like ShahajiRaje and ShivajiRaje, with the resulting diagram displayed on a light gray background.

Mar 31, 2022

World Map-Sushil

This example displays a world map with country boundaries rendered as SVG paths, using a natural Earth projection and a light, polished color scheme. The visualization shows landmasses in teal, graticules in gray, and interior country borders, all set against a light sphere background. The code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 v5, with TopoJSON data from the World Atlas repository. It loads the topology via `json`, converts it using `feature` and `mesh`, and renders the map through React components.

Mar 31, 2022

ICE-LineChart-Part3

This example shows a line chart with circular markers representing a dataset, using a monotone curve to connect the points on a linear x and y scale. The visualization includes axes via `d3.axisBottom` and `d3.axisLeft`, along with custom labels and a title, all rendered as SVG within a React framework. The chart is built with D3 v4, using `d3.line` and `d3.curveMonotoneX` to generate the path, and appends circles with the D3 data join for the dots.

ICE-7-AreaChart-Part3

This chart visualizes insurance product sales over the months of 2021 as a filled area plot, with the x-axis representing time and the y-axis showing sales in dollars. The SVG rendering is built using D3 v4 within a React framework, fetching CSV data from a GitHub gist and parsing dates with `d3.timeParse`. The visualization employs `d3.scaleTime` for the temporal axis, `d3.scaleLinear` for the value axis, and `d3.area` to generate the shaded path, styled with custom margins and axis labels.

ICE7-PieChart-Part2

This example visualizes product revenue shares as a pie chart, with five cosmetic product categories (e.g., Eyeshadows, Mascara) and their corresponding percentages. A legend with colored dots and labels identifies each category, while the chart’s slices are labeled directly with product names. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG rendering within a React framework. The data is hardcoded in the script, with all values summing to 100 percent.

Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species, with each species distinguished by a color-coded legend. The visualization cycles through different column pairings every two seconds using `setInterval`, updating the x-axis scale and circle positions. Built with D3 v6, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG circles and axes. Data is loaded from a CSV file using `d3.csv`, with species colors mapped via `d3.scaleOrdinal` and a custom `scatterPlot` function managing the reusable chart logic.

Reusable Scatterplot Example

This reusable scatterplot demonstrates the Iris Dataset by plotting flower measurements as animated, circular marks. The visualization cycles through different feature combinations every two seconds, rotating the x-axis between petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Built with D3.js, the code uses a custom `scatterPlot` function that leverages `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) to render SVG elements. The example also shows a reusable chart API pattern, where configuration methods like `.data()`, `.xValue()`, and `.margin()` are chained to create an independent, customizable plotting component.

Mar 22, 2022

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Mar 10, 2022

ICE-6_ Plot-Scatterplot

This visualization shows the relationship between sepal length and petal length in the Iris dataset, with each flower represented as a semi-transparent red circle. The code uses d3.csv to load the data, determines the plot dimensions from the browser window, and maps values using d3.scaleLinear with d3.extent for domain ranges. Axes are rendered with d3.axisLeft and d3.axisBottom, while d3.selectAll and the join method create the SVG circles. The axis and label text styling comes from the linked stylesheet, which also sets the circle opacity.

Mar 7, 2022

ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where bar length represents dollar amounts. The data is loaded from a CSV file using D3’s `csv` function. The visualization customizes D3 axes: the y-axis removes domain and tick lines, while the x-axis uses a custom tick formatter that converts values from gigabytes to billions. The chart is rendered as SVG, with bars styled via CSS and axes created using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`.

Fork of Making a Bar Chart

This bar chart displays the top ten products by revenue, with each bar’s length proportional to dollar sales, as sourced from a CSV file. It demonstrates customized D3 axes, including a formatted tick label that abbreviates large numbers and removes unnecessary domain lines. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom`/`axisLeft` to render SVG elements. The chart’s title and axis label are added via SVG text.

Fork of Fork of Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart uses a linear scale for the population axis and a band scale for countries, with bars rendered as SVG rectangles. It customizes the D3 axes, including a formatted tick label that converts large numbers to abbreviated units and removes default axis lines. The code loads data from a CSV file and relies on d3.csv, scaleLinear, scaleBand, axisBottom, axisLeft, and format.

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. Using D3 v5, the visualization employs `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render formatted axes with a custom tick format that converts large numbers to abbreviated units. The SVG rendering includes gridlines, a title, and an axis label, with horizontal bars styled in steel blue.

Top 10 Cosmetic Products by Revenue

A horizontal bar chart ranks the top ten cosmetic products by revenue, from Eyeshadows at the top to Powder at the bottom. Each bar’s length encodes the dollar value, with the x-axis labeled “Reveune in Dollars.” Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and formats tick labels with `d3.format`. Data comes from a CSV file, rendered as SVG rects with a steelblue fill, and includes a title and gridlines via `tickSize`.

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, using revenue data in dollars as a proxy. The visualization uses D3 v5 with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG, with customized axis formatting and removal of default tick lines.

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

A bar chart displays the top 20 cosmetic products by revenue, using horizontal bars to compare product ratings against their identifiers. The visualization splits responsibilities between React state management and D3 scales, with `scaleBand` mapping ratings to the y-axis and `scaleLinear` mapping anime IDs to bar widths. SVG rendering handles all marks and channels, while custom axis ticks are generated manually through React components rather than D3 axis helpers. Data loads asynchronously from a CSV file via `d3.csv`.

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

This visualization displays the top 20 countries by COVID-19 case counts (from the "1/28/20" column of a CSV dataset) as a horizontal bar chart. Using React components with D3.js, it renders SVG rectangles whose widths are scaled by `d3.scaleLinear` against the maximum population value and positions the bars along a categorical `d3.scaleBand` axis for country names. D3’s `csv` loader fetches remote data, while axis ticks and labels are generated manually with `xScale.ticks()`. The chart is drawn within a 960×500 SVG canvas, with margins and inner plot dimensions defined by constants.

ICE5- Sushilkumar

This example demonstrates how to load a CSV file from a remote URL and parse it using D3.js. The visualization displays the parsed dataset's metadata, including the total file size in kilobytes, the number of rows, and the number of columns, in a styled HTML page. It uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to calculate the data size, and DOM manipulation to update a `<pre>` element with the results. The page also includes a static SVG polygon, rendered with CSS-styled text and a custom background color.

Feb 25, 2022

Fork of ICE5_SUBMISSION_PY_v2.0

This visualization displays basic data-loading information from a CSV file, showing the file size in kilobytes, row count, and column count. The code uses D3 v7's `d3.csv` to fetch data from a remote GitHub gist URL and `d3.csvFormat` to calculate its size, then updates an HTML `<pre>` element with the results. Alongside this, the page renders static SVG circles using D3's SVG creation capabilities. The simple layout includes a title, a red message area, and decorative yellow and black circles on a powder-blue background.

Feb 25, 2022

Fork of Let's make a face with D3.js!

This example uses D3.js to construct a simple, animated smiley face in an SVG canvas. It demonstrates fundamental DOM manipulation by appending and positioning geometric elements—a green circle for the head, two eye circles, rectangular eyebrows, and a mouth created with a path. The animation runs a continuous two-second cycle that moves the eyebrow group vertically, creating a subtle bobbing effect. The code relies on D3's `select`, `append`, and `transition` APIs to manage the structure and its temporal behavior.

Feb 18, 2022

Fork of Let's Make a Face Part I

This fork of “Let's Make a Face Part I” displays a yellow smiley-face outline with two dark eye circles on a blank canvas. It uses an HTML5 `<svg>` element with hard-coded coordinate values, drawing the face via three `<circle>` shapes. The main circle is filled yellow with a black stroke, while the two eye circles use default black fills, positioned symmetrically around the center. No JavaScript libraries are involved; the rendering is purely declarative SVG.

Feb 18, 2022

Fork of Smiley Face Part I

This example displays a partially drawn smiley face on a yellow circle, featuring two black eyes and an open mouth arc. The face is rendered as an SVG using React, with the mouth path generated by D3's `arc()` generator, which defines inner and outer radii along with start and end angles. The circle and eye elements are positioned using absolute coordinates relative to the center. The visualization relies on D3 v7 and React 17, rendering everything client-side into a 960 by 500 pixel canvas.

Feb 18, 2022

Fork of Let's Make a Face Part I

Feb 17, 2022