Skip to main content
Log in
C

charanchand9

@charanchand9·32 public vizzes

Loading thumbnail…

Charan network

A cousin network diagram shows ten family members as yellow nodes connected by red, arrowed lines, with thicker lines indicating stronger relationships. The visualization uses D3.js version 6 with `d3.forceSimulation` to apply link, many-body, collision, and center forces for layout. Rendered as SVG, nodes are draggable circles with labels, and hovering highlights connections. The data comes from a JSON file defining person nodes and "cousin of" links with weighted values.

Jul 10, 2022
Loading thumbnail…

Charan network

A cousin network diagram shows ten family members as yellow nodes connected by red, arrowed lines, with thicker lines indicating stronger relationships. The visualization uses D3.js version 6 with `d3.forceSimulation` to apply link, many-body, collision, and center forces for layout. Rendered as SVG, nodes are draggable circles with labels, and hovering highlights connections. The data comes from a JSON file defining person nodes and "cousin of" links with weighted values.

Jul 10, 2022
Loading thumbnail…

charan car estimation

This example visualizes a hierarchical car estimation tree, showing categories like 2-seater, 5-seater, and 8-seater with associated price nodes ($28k, $40k, $60k) branching from a root "cars" label. The code uses d3.stratify and d3.tree to compute the layout, then renders SVG circles with animated link paths that draw from parent to child. Node colors depend on depth via a custom setGeneration function, with transitions controlling the radius growth and text labels displayed inside each circle.

Jul 10, 2022
Loading thumbnail…

Charan Fork of India Map

This fork displays a choropleth-style map of India, rendered as a single SVG path per state with a uniform salmon fill (#ffa789). The geographic data originates from a GitHub-hosted TopoJSON file, which is converted to GeoJSON features using `topojson.feature`. React renders each state path, while D3’s `geoMercator` projection and `geoPath` API handle the map’s projection and geometry. The visualization adapts to the browser window’s dimensions, centering the map on coordinates 80°E, 19.7°N, and shows a loading message until the data is fetched.

Jul 10, 2022
Loading thumbnail…

Charan: Fork of India Map

This fork of the India Map renders two hierarchical boundary layers—states and districts—as an SVG using React. It fetches TopoJSON data from two remote sources and draws the geometries with `d3.geoPath` and a Mercator projection, colored by district using `d3.scaleOrdinal`. The visualization supports interactive zoom and pan via `d3.zoom`, and hovering over a district displays its name and state in a tooltip.

Jul 10, 2022
Loading thumbnail…

Fork of charan ICE-8 Q1

This visualization displays a world map with countries rendered as spring green SVG paths. The map uses a natural Earth projection, and the code fetches geographic data from a GitHub gist URL, then processes it with topojson and d3.geoPath to generate the country shapes. The `d3.geoNaturalEarth1` projection and `d3.geoPath` API handle the map projection, while the countries are colored via a CSS class.

Jul 7, 2022
Loading thumbnail…

Charan Bonus Ice q1

This example presents a bar chart of sales data, using a drop-shadow filter and ordinal scales to map categories to the x-axis and a linear scale for the y-axis. The chart is built with D3 v2, rendering to SVG with animation support, and includes custom tick formatting for captions. Data transformation occurs in a `TransformChartData` function before the bars are constructed via the `BuildBar` method, which appends the SVG to a container using jQuery selection.

Jul 6, 2022
Loading thumbnail…

Charan Bonus Ice q1

This example presents a bar chart of sales data, using a drop-shadow filter and ordinal scales to map categories to the x-axis and a linear scale for the y-axis. The chart is built with D3 v2, rendering to SVG with animation support, and includes custom tick formatting for captions. Data transformation occurs in a `TransformChartData` function before the bars are constructed via the `BuildBar` method, which appends the SVG to a container using jQuery selection.

Jul 6, 2022
Loading thumbnail…

Bonus Ice q1

This example shows a bar chart of sales data with gradient green bars and drop-shadow effects. The visualization uses D3 v2 to render SVG elements, with axes labeled via `d3.svg.axis` and scales defined by `d3.scale.ordinal` and `d3.scale.linear`. The chart applies an SVG filter for the shadow effect and supports interactive level-based data transformations.

Jul 6, 2022
Loading thumbnail…

Charan Bonus ICE Q2

This visualization displays a 3D scatter plot of cricketer statistics, plotting three quantitative attributes: score on the x-axis, match on the y-axis, and balls on the z-axis. Each data point is rendered as a purple circle with a fixed size and opacity, derived from a CSV file loaded via `d3.csv`. The chart is built using the Plotly JavaScript library, specifically the `Plotly.newPlot` method, with a `scatter3d` trace type. Axis titles and their font colors are configured within the layout's scene object, while the plot area itself uses minimal margins.

Jul 6, 2022
Loading thumbnail…

Charan Bonus ICE Q2

This visualization displays a 3D scatter plot of cricketer statistics, plotting three quantitative attributes: score on the x-axis, match on the y-axis, and balls on the z-axis. Each data point is rendered as a purple circle with a fixed size and opacity, derived from a CSV file loaded via `d3.csv`. The chart is built using the Plotly JavaScript library, specifically the `Plotly.newPlot` method, with a `scatter3d` trace type. Axis titles and their font colors are configured within the layout's scene object, while the plot area itself uses minimal margins.

Jul 6, 2022
Loading thumbnail…

Charan Fork of ICE - 7 Pie Chart

This visualization shows the top 10 most populated US states in a pie chart with a legend displaying each state’s name and population value. The chart is rendered in SVG using D3.js v5, with data loaded from a CSV file via `d3.csv`. The pie layout uses `d3.pie` and `d3.arc` to generate segments, while `d3.scaleOrdinal` assigns colors to each slice. Labels are positioned using the arc’s centroid method, and the legend is built with SVG rectangles and text elements.

Jul 3, 2022
Loading thumbnail…

Charan Fork of ICE - 7 Pie Chart

This example visualizes the top 10 most populated U.S. states as a pie chart, with each slice labeled with its population in thousands and accompanied by a legend showing state names and values. The chart is rendered as an SVG using D3 v5, with data fetched from a CSV hosted on GitHub. It employs D3’s `pie`, `arc`, and `scaleOrdinal` APIs to generate slices and assign colors, and uses `arc.centroid` to position population labels within each segment. The legend is built with appended `rect` and `text` elements.

Jul 3, 2022
Loading thumbnail…

Charan Fork of student Strength Area Chart ICE-7 Q4

This area chart visualizes the number of students per year, with time on the x-axis and student count on the y-axis. The chart uses a green filled area with a smooth curve (d3.area with curveBasis) and employs d3.scaleTime, d3.scaleLinear, axisBottom, and axisLeft. Data is loaded via d3.csv from a GitHub Gist, with years parsed using d3.timeParse. SVG rendering is used, with styled axes and a custom title.

Jul 3, 2022
Loading thumbnail…

Fork of student Strength Area Chart

This area chart visualizes the number of students over a series of years, with the y-axis labeled "No.Of Students" and the x-axis representing time. The chart uses a green filled area beneath a smooth curve to emphasize the trend. Built with D3 v6, the visualization employs `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and the `area` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV file, with year strings parsed via `d3.timeParse` and student counts converted to numbers before rendering as an SVG.

Jul 3, 2022
Loading thumbnail…

Charan Fork of line chart ICE-7 Q3

This line chart displays student enrollment data from 2014 to 2022, with years on the x-axis and student counts on the y-axis. The visualization uses D3 v5 modules including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator to create the SVG path. Data is loaded from a CSV file hosted on GitHub Gist, with dates parsed using `d3.timeParse`. The chart features gridlines, rotated axis labels, and a red line stroke for the data series.

Jul 3, 2022
Loading thumbnail…

Charan Fork of line chart section 3

This fork demonstrates the change in the number of students from 2014 to 2022, rendered as an SVG line chart using D3 v5. The x-axis is scaled with `scaleTime` against parsed year values, while the y-axis uses `scaleLinear` to map the student counts. The data is loaded from a CSV file provided via a GitHub gist URL. The line path is drawn with the `line` generator, and custom axis labels are positioned with the `axisLeft` and `axisBottom` functions, with grid lines created via tick sizing.

Jul 3, 2022
Loading thumbnail…

Fork of Fork of Fork of line chart section 3

This example visualizes student enrollment data from 2014 to 2022 as a single red line chart. The x-axis maps years using a time scale, while the y-axis maps student counts with a linear scale. The code imports D3 v5 modules like `csv`, `scaleLinear`, `scaleTime`, `axisBottom`, and `line` to load the data, create axes with gridlines, and draw the path. The data is fetched from a GitHub Gist and rendered as an SVG.

Jul 3, 2022
Loading thumbnail…

Charan Fork of ICE - 7 Pie Chart

This visualization shows the top 10 most populated US states in a pie chart with a legend displaying each state’s name and population value. The chart is rendered in SVG using D3.js v5, with data loaded from a CSV file via `d3.csv`. The pie layout uses `d3.pie` and `d3.arc` to generate segments, while `d3.scaleOrdinal` assigns colors to each slice. Labels are positioned using the arc’s centroid method, and the legend is built with SVG rectangles and text elements.

Jul 3, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This visualization displays the count of students from each major at the University of North Texas as a pie chart with a legend. The D3.js code uses `d3.csv` to load data from a GitHub Gist, then applies `d3.pie` and `d3.arc` to generate the chart's segments. Each slice is labeled with a formatted value (e.g., "1.5K") positioned using the arc's centroid. A separate legend lists each major with its corresponding color and student count, using `d3.scaleOrdinal` for color assignment.

Jul 3, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart

This pie chart shows the distribution of students across majors at the University of North Texas, with each slice labeled with the student count in thousands and a corresponding legend listing major names and values. The visualization uses d3.pie and d3.arc to generate the chart and its segments, with d3.scaleOrdinal assigning colors to each major. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering includes custom text positioning using arc.centroid for labels. The chart is fixed at 980x550 pixels.

Jul 3, 2022
Loading thumbnail…

Fork of ICE 7 - Pie Chart

This example displays a pie chart showing the top 10 countries by deaths in 2020 due to air pollution, with each slice labeled with the death count in thousands and accompanied by a legend listing country names and values. The visualization uses D3.js v5 to load CSV data from a GitHub gist, compute pie arc geometries with `d3.pie()` and `d3.arc()`, and render the chart as SVG paths and text elements. Color encoding is applied via `scaleOrdinal`, and the legend is constructed dynamically using D3 data joins.

Jul 3, 2022
Loading thumbnail…

Fork of ICE 7 - Pie Chart

This visualization presents a pie chart ranking the top 10 countries by deaths attributed to air pollution in 2020, with each slice labeled in thousands and a matching legend that pairs country names with their death counts. Using D3 v5, the code fetches CSV data via `d3.csv`, computes a pie layout with `d3.pie()`, and draws arcs with `d3.arc()`. Slice colors come from a `d3.scaleOrdinal` palette, and text labels are positioned using the arc generator’s `centroid` method. The SVG rendering includes custom legend groups and formatted tick labels via `d3.format`.

Jul 3, 2022
Loading thumbnail…

Charan ICE-7 Q1 Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays cricket player statistics, plotting balls faced, match count, age, and score as points on a dual-axis chart. The visualization cycles through these four data columns every two seconds, updating the x-axis scale and circle positions smoothly. Built with D3.js v6, it uses an asynchronous CSV loader, the reusable chart pattern with a `scatterPlot` factory function, and linear scales with SVG circle and axis rendering. The Iris-inspired design rotates through dimensions from the cricket dataset, creating a dynamic exploration of player performance metrics.

Jul 3, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 chart animates cycles through four columns of a cricket dataset, plotting balls, match, age, and score against the x-axis while score remains on the y-axis. Using the `scaleLinear` API for axes and `selection.join` for idempotent circle updates, the scatter plot updates every two seconds via `setInterval`, re-computing domains from the new data extent. It renders as an SVG with large Share Tech font labels, drawing from a CSV loaded with `d3.csv`.

Jul 3, 2022
Loading thumbnail…

Fork of Fork of Charan - Scatter Plot using Iris dataset

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width as x and y coordinates while encoding sepal length and width as elliptical radii. The visualization uses SVG circles with D3.js v6 scales, axes, and data joins to render the graph, with each species (setosa, versicolor, virginica) assigned a distinct color. The code loads CSV data, parses numeric fields, and positions marks using linear scales, while custom axis labels highlight the mapped variables.

Jun 26, 2022
Loading thumbnail…

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

This visualization displays the top 10 cricketers by score using a horizontal bar chart, with the title and data loaded from a CSV file via `d3.csv`. React manages the component state and renders SVG marks, while D3 v5 provides the scales: `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The x-axis ticks are drawn explicitly using `xScale.ticks()`, but no y-axis line or tick marks are rendered, only text labels. The bar widths encode score values, and the chart lacks axis titles or a legend, making it a minimal representation of the underlying data.

Jun 26, 2022
Loading thumbnail…

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

This example displays the top 10 cricketers by score as horizontal bars, using React to render SVG elements and D3 v5 scales (d3.scaleBand, d3.scaleLinear) to position the bars and axes. It loads a CSV dataset of cricket statistics via d3.csv, slicing the first 10 rows, and draws tick marks and labels for both the x and y axes. The chart, titled “10 Most Popular players,” uses blue gridlines, a left margin for player names, and no other visual encodings beyond bar length.

Jun 26, 2022
Loading thumbnail…

Fork of Charan - Scatter Plot using Iris dataset

This interactive scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while encoding species with distinct colors (aqua, pink, red) and using sepal dimensions to modulate marker size via the `rx` and `ry` attributes. Built with React and D3 v6, the example fetches CSV data from a remote gist, uses `scaleLinear` and `extent` to compute scales, and renders circles with SVG, adding styled axis labels and ticks via `axisBottom` and `axisLeft`.

Jun 26, 2022
Loading thumbnail…

Charan - Scatter Plot using Iris dataset

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, while coloring each point by iris species (setosa, versicolor, or virginica) with distinct colors (aqua, pink, and red). The visualization is rendered as an SVG using D3 v6, with axes labeled “Petal-length” and “Sepal-length.” It loads data via `d3.csv`, scales the coordinates with `scaleLinear` and `extent`, and draws the points with SVG `circle` elements, incorporating the raw sepal dimensions as unused `rx` and `ry` attributes. The chart fills the browser window, using margins for axis labels.

Jun 26, 2022
Loading thumbnail…

Charan ICE-5

This example displays a yellow header reading "ICE 5" alongside a turquoise stat box and two side-by-side house images. It loads a CSV dataset from a GitHub gist using d3.csv, then dynamically computes and displays the file size in kilobytes, row count, and column count inside a pre element. The page uses D3 v7 for data fetching and formatting via d3.csvFormat, while a separate ES6 module file, myMessage.js, exports an unused message string. Styling is handled through an external CSS file with large centered typography.

Jun 22, 2022
Loading thumbnail…

charan

A stylized Danny Phantom face is drawn as a circular SVG portrait, constructed entirely from primitive shapes such as circles, rectangles, polygons, and a path. The face centers on a large skin-toned circle with brown features, including oversized eyes with blue irises and pupils, angular eyebrows, a small nose, and a curved mouth. The rendering uses React components and ReactDOM to manage the SVG elements, while the D3.js arc API generates the mouth’s path geometry. The code defines all coordinates and dimensions relative to the window size, positioning the head prominently on a blank canvas.

Jun 19, 2022