pardha1411

@pardha1411·40 public vizzes

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, using D3 to display sepal and petal measurements colored by species. The view cycles through four attribute pairs on the x-axis every few seconds, updating axes via d3.axisBottom and d3.axisLeft while circles are redrawn using d3.scaleLinear and extent. A custom legend and labels are added as SVG text elements, with data loaded asynchronously via d3.csv from a remote gist.

Jul 22, 2023

Loading thumbnail…

assign2-5_pardha

A scatter plot shows credit card usage among bank customers, with age on the x-axis, total expenditure in dollars on the y-axis, and circle color indicating attrition status—black for existing customers and red for those who have churned. The visualization loads a CSV from a GitHub gist using `d3.csv`, parses numeric fields, and renders circles as SVG elements sized with a fixed radius and 35% fill opacity. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while scales are created using `d3.scaleLinear` with domains derived from `d3.min` and `d3.max`. The chart fills the browser window, drawing data marks via data joins on SVG circles.

Jul 22, 2023

Loading thumbnail…

assign2-5

This interactive scatterplot displays asylum case wait times (in days) versus entry dates, with a dropdown menu to filter by year. The x-axis dynamically switches between yearly and monthly tick formats based on selection. Using React with D3 v5 scales (scaleTime, scaleLinear), the visualization renders SVG circles with hover tooltips showing exact wait times. Data comes from a CSV of defensive asylum cases, processed with d3.csv and time formatting utilities.

Jul 22, 2023

Loading thumbnail…

assign2-q5

This visualization displays the classic Iris dataset as an animated scatterplot, mapping sepal length and width along the axes while encoding petal width through circle radius and species through color. The visualization uses D3 v6 with a reusable chart pattern, employing `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom`. Circles transition over two seconds to their final radius using `transition().duration(2000)`. Data loads from a remote CSV via `d3.csv`, and the SVG rendering fills the full browser window.

Jul 22, 2023

Loading thumbnail…

assign2-q7

This example shows a force-directed network of ten named nodes and nine weighted links, with node size fixed and link thickness scaled by the square root of each edge’s weight. It uses the D3 v4 `d3.layout.force` API (from the older v2 compatibility script) with gravity, charge, and distance parameters to position nodes, while SVG lines and circles render the graph. Node labels appear in blue text, and user interaction is supported via `force.drag`. The JSON data defines groups and link weights, which drive the visual encoding.

Jul 21, 2023

Loading thumbnail…

Social Network Graph

A social network graph visualizes connections between named individuals, with nodes colored by group and labels identifying each person. The force-directed layout is driven by d3.forceSimulation, combining d3.forceLink for edges, d3.forceManyBody for repulsion, and d3.forceCenter to keep components together. Node and link positions update on each simulation tick, rendering circles and lines in an SVG container using D3 v7.

Jul 21, 2023

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The code uses D3’s `tree` layout and `linkHorizontal` generator to draw the branching paths, with text labels positioned at each node. Data is loaded from a local JSON file via `d3.json`, and zooming is enabled through D3’s `zoom` behavior. The SVG is styled with a Playfair Display font, and node text size decreases with depth.

Jul 21, 2023

Loading thumbnail…

USA Map

This example displays a choropleth map of the United States, coloring each state according to a value from a local CSV file. The code loads GeoJSON geographic data and uses `d3.geoPath` for map rendering, while a linear color scale maps data values to a light-to-dark blue gradient. The map uses SVG paths with white strokes, and states without corresponding data appear gray. It demonstrates loading external data via `d3.csv` and `d3.json`.

Jul 21, 2023

Loading thumbnail…

asiign3-6(world-map)

A choropleth world map colors countries according to population using a blue quantized scale. The visualization loads GeoJSON country boundaries from Natural Earth and joins them with population data from a CSV file via a country-name match. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `d3.scaleQuantize` with `d3.schemeBlues[5]` for color encoding. Countries lacking matching data are rendered in black.

Jul 21, 2023

Loading thumbnail…

assign3-4

This bubble chart compares cereal manufacturers by plotting their products' ratings against sodium levels. Each bubble's position encodes the rating (x-axis) and sodium content (y-axis), while its radius represents calorie count through a linear scale, and its color indicates the manufacturer using a categorical ordinal scale with the `schemeSet1` palette. The visualization, built with D3 v7, uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with legends for both bubble size and manufacturer colors. Data comes from a local CSV file loaded via `d3.csv`.

Jul 21, 2023

Loading thumbnail…

assign2-3

A scatter plot displays the relationship between flipper length and body mass for penguin species, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization uses D3 v5's `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data from a GitHub Gist and render circles in SVG. It also encodes bill length and depth as circle radii (`rx`, `ry`), though the plot uses a fixed radius for the circles.

Jul 21, 2023

Loading thumbnail…

assign2-3

This example demonstrates a minimal D3.js application that renders a text message to the page. It shows how to import functions from the D3 library and from local ES6 modules, using `d3.select` to target a div element and set its text content. The message originates from a separate JavaScript file, while CSS styles center the text and enlarge it to 12em. D3 v5 is loaded via UNPKG, and the code follows a modular structure with separate index and message modules.

Jul 21, 2023

Loading thumbnail…

asssign2-2

This stacked bar chart displays the total number of tourists per year, broken down by region. The visualization uses vega-lite-api to define the bar marks and encodings, with vega and vega-lite handling rendering. Data is loaded asynchronously via d3.csv from a GitHub gist, and the chart is configured with custom axis and label styling from a separate config file. Tooltips are enabled through vega-tooltip, and the layout auto-fits to the full browser window.

Jul 21, 2023

Loading thumbnail…

Stacked_Bar_chart

This example presents a stacked bar chart of randomly generated product sales data across six months. The chart visualizes sales for ten product categories, with each bar segmented by month using a categorical color scheme. Built with D3.js v7, the code generates data on the fly and renders the visualization as an SVG. The implementation uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for color assignment, along with D3's axis helpers for labeling.

Jul 21, 2023

Loading thumbnail…

diabaties and details

A bar chart displays regional diabetes-related sales data from a CSV file, with each region on the x-axis and sales values on the y-axis. The visualization shows the sales figures for ten regions, ordered as they appear in the data. The chart uses the D3.js library (v7) to create the SVG-based bar chart, employing d3.csv to load the data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the numerical y-axis, with axis labels and a title included.

Jul 21, 2023

Loading thumbnail…

Network Graph

This network graph visualizes friendships among ten people, with nodes connected by directed, arrowed links and labeled with names. The graph uses D3.js v6’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide` to position nodes and edges, while nodes are rendered as large SVG circles that can be dragged. Data comes from a JSON file containing node and link objects with relationship types. The visualization also sets a cyan background, uses light green for nodes, and highlights nodes on hover.

Jul 10, 2023

Loading thumbnail…

MuscleCars tree

This visualization displays a hierarchical tree of muscle car models organized by manufacturer, with root node "Muscle Cars" branching to Ford and Dodge, then down to specific models like Mustang and Charger. It uses D3.js v3 with the `d3.layout.tree` API to arrange nodes. The SVG rendering includes color-coded nodes by hierarchy depth, expandable/collapsible interactions on click, and zoom-and-drag behavior via `d3.behavior.zoom`. Data comes from the provided Tree.json file, with tooltips and animated transitions for node updates.

Jul 10, 2023

Loading thumbnail…

Activity 8 Country

This example displays a map of India created from world atlas TopoJSON data. It loads the country geometries from the `world-atlas` package and uses `topojson.feature` to extract India's boundary, projecting it with `d3.geoMercator` and drawing the path via `d3.geoPath`. The resulting SVG renders the country’s outline in a 960 by 500 viewport, demonstrating a straightforward geographic visualization with D3 v5.

Jul 10, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 version 5 with an equirectangular projection. The map renders country boundaries from a TopoJSON world-atlas dataset, filling landmasses in light green with indigo borders against a sky-blue ocean background. Users can pan and zoom the map through D3’s zoom behavior, which applies transformations to the SVG. Hovering over any country changes its fill color to maroon. The code leverages `d3.geoPath`, `d3.geoEquirectangular`, and the TopoJSON `feature` method to convert and render geographic data.

Jul 10, 2023

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, with a green filled area beneath a black curved line. Time is plotted on the x-axis and cost on the y-axis, with red tick labels and orange axis labels. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line, and d3.area with a curveBasis interpolation, rendering to SVG. Data is loaded from a CSV file via d3.csv and formatted using d3.format.

Jul 10, 2023

Loading thumbnail…

linechart

A line chart displays the cost of sales from 2000 to 2013, sourced from a local CSV file. The visualization uses D3 v7 to render an SVG, mapping years on the x-axis and cost values on the y-axis. The line, drawn with a stroke path, is created using `d3.line()`, with axes added via `d3.axisBottom` and `d3.axisLeft`. Axis labels are styled with red fill and large font.

Jul 10, 2023

Loading thumbnail…

Pie Chart

This pie chart displays the number of students per major at UNT, with each slice labeled by its count in thousands and a corresponding legend listing majors and values. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, while `scaleOrdinal` maps student counts to a fixed array of colors. Data is loaded asynchronously via `d3.csv` from a GitHub Gist, and the SVG rendering includes centroids for labels and a legend built with appended `rect` and `text` elements.

Jul 10, 2023

Loading thumbnail…

activity 8

This example demonstrates the basic capabilities of VizHub by displaying the text "Hello VizHub!" prominently in the center of the page. Using D3 v5 loaded via UNPKG, the code imports the `select` function to target the HTML element with the ID `message` and sets its text content. The message itself comes from a local ES6 module, `myMessage.js`, which exports the string constant, and the styling is handled by an external CSS file.

Jul 10, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris flower dataset, cycling through combinations of sepal and petal measurements on the x- and y-axes via a timed animation. The SVG renderer updates every few seconds, using D3 scales, axes, and data joins to redraw points colored by species. The code demonstrates a reusable scatterPlot module with configurable accessors, and includes a custom legend, axis labels, and a title.

Jul 5, 2023

Loading thumbnail…

Bubble chart task5

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across different car makes using a colorful scatterplot. Each circle’s position maps horsepower and torque on the axes, while its radius and color correspond to highway MPG and vehicle brand respectively. The visualization includes interactive tooltips, a legend for MPG scaling, and a color legend for manufacturers. Built with D3.js v7, the SVG-based chart loads CSV data and uses `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for colors, and `d3.axisBottom/Left` for tick rendering.

Jul 5, 2023

Loading thumbnail…

act7_tsk5

This example displays the text “Hello VizHub!” centered on the page in a large font. It demonstrates loading D3.js from a CDN, importing the `select` function from D3, and importing a local ES6 module. The code uses `d3.select` to target the `#message` div and set its text content, with styling applied via CSS. The visual output is static and relies on the imported `message` string.

Jul 5, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The chart distinguishes the three iris species by drawing each data point with a unique symbol, using the `symbolsFill` scale and the d3 `symbol()` generator to assign different glyph shapes. A legend on the right side, built with `d3.scaleOrdinal`, identifies the species associated with each shape. The plot reads data from a remote CSV file, parsing it with `d3.csvParse` and rendering the visualization using d3's join-based API for efficient updates.

Jul 3, 2023

Loading thumbnail…

Fork of Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length and width for individual flowers. Each point is colored by species, with skyblue for setosa, lightgreen for versicolor, and orange for virginica. The code loads CSV data via `d3.csv` and scales axes with `d3.scaleLinear`, using features such as `d3.extent` for domain calculation. It generates SVG circles and appends axes using `d3.axisLeft` and `d3.axisBottom`, along with custom text labels for axis annotations.

Jul 3, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb rating levels across six movie genres, with each genre’s stacked bar totaling 100%. The chart uses D3 v7’s `d3.stack()` to create stacked segments, a linear scale for percentages, and a band scale for genres. Hovering over any segment displays a tooltip with the exact percentage for that rating level. Data is loaded from a local CSV file, and the visualization is rendered as SVG with a legend and axis labels.

Jul 3, 2023

Loading thumbnail…

Activity 7

A horizontal bar chart displays the population estimates for ten countries in 2010, with bars extending from a shared baseline. The visualization uses React with D3.js utility functions, including `d3.csv` for data loading, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. SVG rendering constructs axes via custom `AxisBottom` and `AxisLeft` components, while hover tooltips are implemented through SVG `<title>` elements. The chart labels the x-axis and formats tick marks using `d3.format`.

Jul 3, 2023

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of population data for 20 countries in 2020, with bars arranged by country and length proportional to population. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes rendered via custom `AxisBottom` and `AxisLeft` components that use D3’s `format` function to abbreviate large numbers. The data is loaded asynchronously from a CSV file using D3’s `csv` method, and interactive tooltips display the formatted population value on hover.

Jul 3, 2023

Loading thumbnail…

Ques10

This example demonstrates how to load and display a sample of CSV data in a web page. It shows the first 10 rows of a used bike prices dataset, formatted as a readable JSON string. The code imports `select`, `csv`, and `csvFormat` from D3 v5, which is loaded via UNPKG. The page uses a Vue framework with an SVG-based viewport, and the data is fetched from a GitHub gist URL.

Jun 30, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive scatter plot displays Iris flower measurements, mapping sepal length along the x-axis and petal length along the y-axis, with species distinguished by different symbol shapes. The visualization uses d3.scaleOrdinal with symbolsFill to assign distinct shapes to each species, rendered via d3.symbol and path elements. A custom legend shows the shape-to-species mapping, while axes are generated using d3.axisLeft and d3.axisBottom. Data is loaded asynchronously from a CSV file using d3.csvParse and fetched from a GitHub repository, with numeric fields coerced before rendering.

Jun 28, 2023

Loading thumbnail…

IMDb Movie ratings

A stacked horizontal bar chart displays the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating bracket from below 5.0 to above 8.5. The chart uses d3.stack and d3.scaleBand to group and position the bars, while d3.scaleOrdinal assigns categorical colors to the rating categories. Interactive mouse events highlight individual segments and show a tooltip with the exact percentage for that rating bracket within the chosen genre. The data is loaded from a local CSV file and rendered as SVG.

Jun 28, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows how IMDb movie ratings are distributed across six genres, with each bar segment representing the proportion of films falling into rating brackets from “below 5.0” to “above 8.5.” Using d3.csv to load the data, d3.stack and d3.scaleBand create the stacked layout, while d3.scaleOrdinal maps colors to rating categories. Hovering over a segment triggers mouseover and mousemove events that display a tooltip with the exact percentage for that genre and rating range. The chart renders as inline SVG with axes, a legend, and a title.

Jun 28, 2023

Loading thumbnail…

BMI by Age

This visualization presents a histogram of average Body Mass Index (BMI) across age groups, using data from the CDC dataset. The x-axis shows age with 14 ticks, while the y-axis displays the average BMI value, calculated using the formula weight/height² x 703. The chart uses d3.bin to group the data into age bins and displays each bin as an orange rectangle, with the height representing the average BMI within that age range. The visualization uses d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft for the tick marks, with custom styling applied through CSS.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example showcases the capabilities of VizHub by loading D3 via UNPKG and using ES6 modules. It demonstrates data transformation with D3's `csvParse`, `flatRollup`, and `sum` functions on the classic Iris dataset. The visualization aggregates the data by species, calculating the average sepal length for each, and renders the resulting summary as formatted JSON text in a `pre` element. The code illustrates a pattern for fetching and parsing local CSV data asynchronously.

Jun 14, 2023

Loading thumbnail…

Transforming Data

This example demonstrates data transformation using the Iris dataset. It loads a CSV file and computes the average sepal length for each species, displaying the resulting summary as JSON text in a `<pre>` element. The visualization uses D3 v7 APIs including `csvParse` for data loading, `flatRollup` for grouping and aggregation, and `sum` for calculating totals. The implementation follows a state-based pattern with a `setState` function to manage the asynchronous data fetching and rendering lifecycle.

Jun 14, 2023

Loading thumbnail…

Activity 6

This example demonstrates how to load a CSV dataset from a remote URL and display its first ten rows as formatted JSON text on a web page. It uses D3 v5's `csv` function to fetch and parse the data, `select` to target the HTML body, and `append` to create `<pre>` elements for output. The code also imports and exports an ES6 module message, showcasing modular JavaScript integration within a Vue-based project. The rendering relies on SVG and WebGL for the background, while the core functionality is driven by D3's CSV data handling.

Jun 14, 2023

Loading thumbnail…

5budhas

A dense field of small, randomly colored and rotated polygons fills a black SVG canvas, generated procedurally by nested array mappings in React. The polygons are drawn using SVG `<polygon>` elements with computed points and fill colors based on `Math.random()`, and each is transformed with a 45-degree rotation. A single large, ornate Buddha-shaped path is overlaid near the top-left, rendered via a `<path>` element with explicit coordinates and a translation transform. The visualization uses React and ReactDOM to render the SVG structure directly.

Jun 12, 2023