A

Arun Pratap

@codedraco·42 public vizzes

Loading thumbnail…

Area Chart Group 2

This example shows crop production by year as an area chart with a superimposed line, using a yellow filled area and a thick black line. The x-axis uses a time scale for dates, while the y-axis uses a linear scale for production values, with grid lines and labeled axes. Built with React, the visualization leverages d3.csv for data loading, d3.line and d3.area with curveBasis for smooth paths, and d3.axisBottom and d3.axisLeft for ticks, rendering output as SVG.

Loading thumbnail…

Scatter Plot Arun

This scatter plot visualizes crop production against area for a dataset containing crop information, with each data point colored by crop type. The visualization uses D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to render SVG circles on a Cartesian coordinate system. The code loads CSV data from a Gist URL, parses it, and maps production values to the x-axis and area values to the y-axis, with fixed point radius. The chart includes rotated axis labels and custom styling for tick text.

Loading thumbnail…

Fork of ICE-7 Area Chart Arun

This area chart displays the production output from 2000 to 2013, using a smooth basis curve to connect the data points and a yellow fill beneath the line. The visualization loads CSV data from a GitHub source and uses d3's `csv` parsing, `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line` and `area` generators to render the SVG paths. Axis labels are styled using CSS classes, and tick marks use a custom formatting function.

Loading thumbnail…

Line Chart Group 2 Final

This example displays a line chart of crop production over time, using a dataset of yearly production values. It draws a single red line and labels the axes and title, with a y-axis label for production and an x-axis label for year. The chart is generated with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom`, and renders as an SVG. Production data is loaded from a GitHub gist CSV file, and the visualization is styled with custom CSS for fonts and axis appearance.

Loading thumbnail…

Line Chart Group 2

This example shows a line chart of crop production over time, with year on the x-axis and production values on the y-axis, titled “Production vs Year.” The data is loaded from a CSV file via `d3.csv` and parsed using `new Date()` for years and numeric conversion for production. The visualization uses D3 v5 with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render axes and the red path in an SVG. Grid lines are created via tick size extending across the chart, and axis labels are added as SVG text elements.

Loading thumbnail…

Fork of ICE-7 Line Charttt

This line chart displays mobile price trends over time, using month as the x-axis and cost as the y-axis. The visualization loads monthly crop data from a CSV file and renders it as a single black stroke path. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the axes and line geometry. Both axes include gridlines and labels, with the y-axis rotated vertically, all rendered as SVG elements within a 950x420 viewport.

Loading thumbnail…

Fork of ICE 7question 3 Line Chart Arun

This line chart visualizes automobile production in India from 1999 to 2012, using a time-scaled x-axis for years and a linear y-axis for production values. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to draw the path, with blue stroke styling and axis labels. Data is loaded from a CSV via d3.csv, with year values converted to Date objects and production parsed as numbers.

Loading thumbnail…

Fork of scatter Plot Arun

This fork of a scatter plot by codedraco visualizes penguin measurements, plotting bill depth against bill length while encoding species by color. The D3 v5 code loads CSV data via `d3.csv`, scales the x and y axes with `scaleLinear` and `extent`, and renders circles as SVG marks. Along with custom axes from `axisLeft` and `axisBottom`, the chart includes axis labels and a title, using the full browser window for its canvas.

Loading thumbnail…

Social Network Graph

This example visualizes a small social network as a node-link diagram. The network graph shows eight people (nodes) and their “Friend with” relationships (links), with the link thickness between "july" and "tanu" indicating a higher connection value. The layout is generated by a force simulation, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. The graph is rendered as SVG, with nodes as circles and links as lines with arrow markers, and users can drag nodes to explore the network.

Loading thumbnail…

D3 reusable Scatter Plot

This scatter plot visualizes a student dataset with marks, study time, and course count. Built with D3 v6, it uses a reusable chart pattern with scaleLinear, axisBottom, axisLeft, and SVG circles. The plot cycles its x-axis variable through three columns every five seconds, animating the data transition via setInterval. Data comes from a CSV loaded with d3.csv, and the chart updates in place when the x-value changes.

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot demonstrates a reusable D3.js chart that visualizes the Iris dataset, mapping petal and sepal measurements on the x and y axes. The code uses d3.csv to load data, d3.scaleLinear for axes, and d3.scaleOrdinal for coloring points by species. A timer cycles through different column combinations every two seconds, producing an animated exploration of the dataset's four numeric attributes. SVG circles are rendered with interactive axes and a legend, following the design principles of Towards Reusable Charts.

Loading thumbnail…

India Map

This interactive map of India renders each state as a filled SVG path, with state names overlayed at their geographic centroids. The visualization uses D3's `geoMercator` projection and `geoPath` to generate the map geometry from a GeoJSON file containing `IND_adm1` administrative boundaries. Each state is colored using D3's `scaleOrdinal` with `schemeCategory10` palette, and hovering turns a state white. The vector data is processed through the TopoJSON library's `feature` function, with the map positioned and scaled via explicit projection translations.

Loading thumbnail…

D3 map

This example visualizes a world map with photographs plotted at their geographic coordinates. Built with D3.js and TopoJSON, it loads a Natural Earth map and renders it as SVG paths using `geoNaturalEarth1` and `geoPath`. It fetches sample photo data (with latitude, longitude, and image URLs) from a SPARQL endpoint, then places clickable thumbnail images on the map, projecting coordinates with the same projection. The map supports zooming and panning via `d3.behavior.zoom`.

Loading thumbnail…

Bubble chart for spotify new collection

This bubble chart visualizes Spotify’s new collection, plotting each artist as a circle based on their average valence (x-axis) and average popularity (y-axis), with circle size representing the number of tracks. Hovering over a circle reveals a tooltip with the artist’s name and track count. The chart uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.schemeSet2 for color, and SVG circles with CSS hover strokes. Data is aggregated from a CSV file via d3.csv, and the visualization is rendered with d3.v4 and an animated tooltip.

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

Loading thumbnail…

scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species from the `penguin_data.csv` file. Each circle is colored by species, distinguishing Adelie, Gentoo, and Chinstrap penguins. The chart uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes and `d3.axisLeft`/`d3.axisBottom` for tick marks. The code also records bill dimensions as non-visual data attributes (`rx`, `ry`) on each circle, though these do not affect the plotted points. Axis labels and a title are included.

Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes monthly electricity consumption across multiple accounts, with each bar segmented by account and colored using a categorical scheme. The chart, rendered as an SVG, uses D3's scaleBand, scaleLinear, and scaleOrdinal APIs to map dates, energy values, and account colors, respectively. Interactive hover effects adjust bar opacity, and a tooltip displays each segment's energy value. Data is processed via d3.group and d3.stack to create the stacked series, with the final layout including axis labels and a title.

Loading thumbnail…

Stacked bar chart

This stacked bar chart displays monthly electricity consumption in kilowatt-hours, segmented by account number. It uses D3.js with the `d3-scale-chromatic` library for color mapping, rendering via SVG and canvas. Data is grouped by read date and stacked using `d3.stack()`, with axes scaled by `scaleBand` and `scaleLinear`. Mouseover interactions adjust bar opacity, and a title tooltip shows the segment’s kilowatt-hour value.

Loading thumbnail…

country and population

A horizontal bar chart displays population sizes for countries in Northern Africa, with Algeria, Morocco, and Egypt showing the largest values. The D3 v5 code loads data from a CSV file and applies a linear scale for the x-axis and a band scale for the y-axis. Bars are rendered as SVG rectangles, with axes added using `axisLeft` and `axisBottom`. The chart is styled with light green bars and no tooltips or interactivity.

Loading thumbnail…

Question7

This example shows a family tree for the Tomar family, with each person represented by a circle and connections drawn as animated paths. The tree uses a stratify layout via `d3.stratify()` and `d3.tree()` to position nodes, with circle color indicating the generation depth. Rendered as SVG, the code animates the links and nodes using D3 transitions. The dataset is hard-coded in the file, listing parent-child relationships.

Loading thumbnail…

Q7

The visualization displays a family tree using a structured diagram, where each node represents a family member and connections show parent-child relationships. The tree branches from a central root, with circles indicating individuals and labels showing their names. Built with D3 v6, the code uses `d3.stratify()` for hierarchical data processing and `d3.tree()` for layout. Nodes transition via `.transition()` with varying durations, and SVG paths animate from the parent position to the child position. The data is hardcoded, and links are rendered as blue strokes while circles use a salmon fill.

Loading thumbnail…

Activity 8_Task6_2

A force-directed network diagram displays ten people as green circular nodes connected by blue directed edges labeled with arrow markers. The graph, loaded from graph.json, shows friend relationships between individuals like Arun, MY3, DJ, and Sudha. Built with D3 v6, the visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes. Labels render as red text, nodes support drag interactions, and hovering highlights the selected person while edges indicate relationship direction through SVG markers.

Loading thumbnail…

Activity 8_Task6_1

This interactive tree diagram visualizes a hierarchical dataset of muscle car models, starting from the root "Muscle Cars" and branching through Ford and Dodge to specific models like Mustang, Charger, and Hellcat. Built with D3 v3 and rendered as SVG, it uses the `d3.layout.tree` API to position nodes and branches, with CSS styling controlling colors, strokes, and tooltips. The visualization supports animations, node clicking, zooming, and dragging, with JSON data loaded from Tree.json.

Loading thumbnail…

Activity 8_Task5_2

This example displays a choropleth-style map of India rendered as an SVG path using D3 v5. It loads world-atlas TopoJSON data, extracts the India geometry, and applies a Mercator projection with `d3.geoMercator` and `d3.geoPath`. The map is fitted to a 960x500 viewport using `fitSize`, and the resulting path is drawn onto an SVG element. The code demonstrates TopoJSON client usage and geographic path generation.

Loading thumbnail…

Activity 8_Task 2

This pie chart shows the count of students from each major at UNT, with each slice labeled with its student count in thousands and accompanied by a color-coded legend. The visualization uses D3 v5 to fetch CSV data from a GitHub gist and render the chart as SVG. The code employs d3.pie to compute the pie segments, d3.arc to generate the paths, and d3.scaleOrdinal to map colors to the categorical major data.

Loading thumbnail…

Activity 8_Task5_1

This example displays an interactive world map with countries rendered in light green against a skyblue ocean background. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from the world-atlas GeoJSON dataset. Hovering over individual countries changes their fill to maroon. The map supports zooming through D3’s `zoom` event and `event.transform`, updating the SVG’s transform attribute. The styling comes from an external CSS file, and the code imports `feature` from TopoJSON to convert the dataset.

Loading thumbnail…

Activity8_Task4

This visualization displays the cost of sales from 2000 to 2013 using an area chart with a smoothed basis curve line. The SVG chart uses D3 v5 scales (scaleTime, scaleLinear) and axes (axisLeft, axisBottom) to map the temporal and cost dimensions. Data is loaded from a CSV hosted on GitHub, with year values parsed as dates. The code demonstrates local ES6 module imports and D3's line and area generators with curveBasis to create the filled region and overlaid stroke.

Loading thumbnail…

Activity 8 Task 1

This interactive scatterplot animates through different pairings of measurements from the classic Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length while the y-axis is fixed to sepal length. Points are color-coded by species (setosa, versicolor, virginica) with a static legend and animated axis transitions. The visualization loads data via D3’s `csv` function and renders with SVG, using `scaleLinear`, `axisBottom`, and `axisLeft` APIs from D3. A `setInterval` callback updates the plot’s x-scale and redraws the chart, with custom styling from Google Fonts.

Loading thumbnail…

Activity 7 Task 5

This example shows the correlation between average horsepower, torque, and highway MPG across 31 car makes using a bubble chart. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car make, respectively. The visualization includes interactive tooltips on mouseover and a legend for both bubble size and color categories. Built with D3.v7 and SVG, it uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and loads data from a local CSV file.

Loading thumbnail…

Activity 7 Task 4

This example displays an interactive scatter plot of Fisher's Iris dataset, mapping sepal length and petal length while encoding species through distinct marker shapes. Built with D3.v7, it uses imports like `scaleLinear`, `scaleOrdinal`, and `symbol` to handle scaling and shape generation. The code fetches CSV data via URL, parses it with `csvParse`, and renders axes with `axisLeft` and `axisBottom`, including a custom shape legend to identify species.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width. Data points are colored by species, with grey for setosa, skyblue for versicolor, and red for virginica. The visualization uses D3 v6, loading data from a remote CSV file via the `csv` function and rendering circles as SVG marks. It employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and custom styling for text elements.

Loading thumbnail…

Activity 7 Task 2

A stacked horizontal bar chart displays the percentage distribution of movie ratings across six genres, using data from a CSV file. The visualization uses D3 v7's `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to render SVG rectangles, with a color scale distinguishing five rating categories. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. The chart includes labeled axes, a legend, and a title.

Loading thumbnail…

Activity 7 Task 1

This bar chart displays the population of twenty countries for the year 2020, with countries listed on the vertical axis and population values on the horizontal axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering orange rectangles as marks via SVG. Data is loaded from a remote CSV file using D3’s `csv` function, and axis ticks are customized with a format that converts values to billions. The chart includes blue tick lines and a labeled x-axis for population.

Loading thumbnail…

Activity 6 Task 2 and 3

This example displays the first ten rows of a CSV dataset loaded from a GitHub gist, outputting them as formatted JSON text on a black background. It demonstrates loading D3 v5 via UNPKG and using `d3.csv` to fetch and parse the remote data. The visualization also showcases ES6 module imports from local files and the use of `d3.select` to append DOM elements dynamically.

Loading thumbnail…

Activity 6_5_Histogram_Vizualization

This example visualizes the relationship between age and average body mass index (BMI) using a histogram. The d3.bin generator groups the data by age, and rectangles display the average BMI for each bin. The visualization uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft for labeling. Data comes from a CSV file loaded via d3.csv, and the chart is rendered as SVG with custom styling for tick marks and rectangle fills.

Loading thumbnail…

Activity6_4_Transforming the Data

This example demonstrates data transformation by loading the classic Iris flower dataset from a CSV file and computing the average sepal length for each species using D3’s `flatRollup` and `sum` functions. The results are displayed as a formatted JSON summary in a `<pre>` element. The visualization fetches the local CSV with `fetch`, parses it via `csvParse`, and converts numeric fields to numbers. The code also shows state management patterns, including a loading state and conditional rendering, relying on D3 v7’s selection and join methods.

Loading thumbnail…

Activity 67

A simple D3 example demonstrates how to load external libraries and local ES6 modules within a basic HTML page. It uses `import { select } from 'd3'` to select the `#message` div and sets its text content to a string imported from a separate `myMessage.js` module. The page loads D3 v5 from a CDN and renders the message "Hello VizHub!" in large, centered text, showcasing modular code organization and D3's selection API.

Loading thumbnail…

Assignment1_Task_10

This example loads a CSV dataset from a GitHub gist and displays the first ten rows as JSON text in the browser. It uses D3 v5’s `csv` method to fetch and parse the data, then appends `pre` elements to the body to show the parsed structure. The code also imports a local ES6 module and demonstrates how D3 utilities like `csvFormat` can be used to measure data size.

Loading thumbnail…

Assignment_1_task10

This example loads a tabular dataset from a gist using d3.csv and displays the first ten rows as JSON in the browser. It uses D3 v5's select, csv, and csvFormat APIs to fetch and format the data, and appends the output to the page as pre elements. The visualization is minimal, focusing on demonstrating data loading and inspection rather than chart rendering, with the SVG element in index.html serving as a static placeholder.

Loading thumbnail…

5 BuddhaS

Five small triangular sprites form a wandering, chaotic constellation against a black field. The visualization generates thousands of overlapping polygons by mapping a fixed numeric array through nested iterations, with each point’s position, color, and rotation determined by repeated `Math.random()` calls. Built with React and rendered as SVG, the code composes a complex geometric pattern alongside a single pre-defined Buddha-like path, combining procedural randomness with a static silhouette. The result is a dense, colorful scatter that contrasts organic form with algorithmic noise.

Loading thumbnail…

5 Buddhas

Five Buddhas generates a dense field of randomly placed, rotating SVG polygons on a black background. Each polygon is filled with an arbitrary RGB color and positioned using repeated calls to `Math.random`, creating a chaotic, generative mosaic. The visualization is built with React, rendering SVG elements directly through JSX. A large, hand-coded Buddha path is included and transformed via SVG group translation and scaling, contrasting the abstract geometric noise with a detailed figurative shape.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense field of semi-transparent SVG circles scatters randomly across a black background, overlapping a large white line-art Buddha silhouette. The circles, generated with random positions and RGB colors, are layered through triple-nested React map functions. The Buddha path, rendered as an SVG path with a thick stroke, sits beneath the colorful scatter, creating a vibrant, chaotic contrast. The visualization uses React and ReactDOM to render the SVG output.