pasyasahas

@pasyasahas·35 public vizzes

Assignment 2 USA map

This example displays a choropleth-style map of the United States rendered as SVG paths. The code uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to convert GeoJSON features into map outlines, with each state filled red and stroked blue. The geographic data comes from a remote US features JSON file fetched via `d3.json`. The visualization sets a fixed 700×700 canvas and demonstrates D3 map projection, path generation, and asynchronous data loading in a single page.

Jul 21, 2023

Loading thumbnail…

Assignment 2 World map

This example displays a world map drawn as SVG paths, with countries filled in light gray and outlined in red. It loads country boundary data from a remote GeoJSON file using `d3.json`, then applies the `d3.geoMercator` projection with `fitSize` to fit the map into an 800×600 viewport. The `d3.geoPath` generator creates the path data for each feature. The map is rendered on a light gray background, and the styling uses CSS to control fill and stroke colors.

Jul 21, 2023

Loading thumbnail…

Untitled

This example displays a map of the USA, projected using a Mercator projection, and rendered as a single grey SVG path. It loads world GeoJSON data from a GitHub repository, filters the features to include only the USA, and draws it with `d3.geoPath`. The code also includes an alternative, commented-out approach using `d3.geoAlbersUsa` to overlay a country on a world map. Additionally, it demonstrates the use of ES6 modules by exporting a message variable.

Jul 21, 2023

Loading thumbnail…

World Map with D3.js

This example displays a world map using D3.js, rendering country boundaries as SVG paths on a light gray background. It loads GeoJSON data from a remote GitHub repository and projects it usingd3.geoMercator with fitSize to match the 800x600 viewport. The code demonstrates thed3.json method for asynchronously fetching data andd3.geoPath to generate the path strings, styling each country with a default gray fill and white stroke.

Jul 21, 2023

Loading thumbnail…

Assignment 2 network graph

This D3.js network graph visualizes a force-directed layout of ten labeled nodes (A through J), each representing a person’s name, connected by ten undirected links. The simulation uses `d3.forceSimulation` with a link force (at a distance of 100), a many-body charge force for repulsion, and a center force to keep the graph balanced. Nodes are rendered as light-blue circles with text labels, and links as black lines, all drawn as SVG elements. The `render` function updates node and link positions on each simulation tick.

Jul 20, 2023

Loading thumbnail…

Assignment 2 Tree graph

This example shows a hierarchical tree graph with a root node labeled "Venkat" and four child branches, each splitting into two leaf nodes. Circles sized by the node's numeric `value` property sit at each point, while link and node colors derive from the `level` and `type` fields in the data. Built with D3 v5, the code uses `d3.tree()` and `d3.hierarchy()` to compute the layout, then renders SVG paths for curved links and circles with text labels. Colors come directly from the inline JavaScript data object, which is embedded in the source.

Jul 20, 2023

Loading thumbnail…

Tree Example

This example displays an animated, collapsible tree diagram representing a three-level family hierarchy, with nodes showing names and links connecting parents to children. Clicking a node toggles the visibility of its subtree, smoothly transitioning the layout as branches expand and collapse. Built with D3.js version 3.5.17, the visualization uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the node positions and draw curved link paths, while SVG transitions animate the changes over 750 milliseconds. The data is hardcoded as a nested JavaScript array in the HTML file.

Jul 16, 2023

Loading thumbnail…

Activity 8 Q6A

This example presents an interactive hierarchical tree visualization of muscle car models, using D3.js v3 to render SVG elements with click-to-expand/collapse functionality. The tree layout arranges nodes by type, with color-coded rectangles representing different model categories (Grey, Blue, Red, Orange) and arrowed links indicating parent-child relationships. The visualization includes zoom and drag behavior via `d3.behavior.zoom`, plus tooltips and drop-shadow filters defined in SVG defs. Data is loaded asynchronously from a JSON file and rendered within a 350-pixel-wide container with animated transitions between states.

Jul 16, 2023

Loading thumbnail…

Assignment 2 - Bubble chart

This bubble chart visualizes the correlation between make cost, selling price, and profit percentage for various car brands, with each bubble’s size encoding profit percentage and its color distinguishing brand. Built with D3 v7, it reads data from a CSV file and renders an animated SVG scatterplot. Interactive tooltips display brand names on hover, while legends map bubble size to profit values and color to car makes.

Jul 16, 2023

Loading thumbnail…

Assignment 2 Reusable Scatter Plot

This example visualizes the Palmer Penguins dataset with a reusable scatter plot built using D3 v6. The plot cycles through four different x-axis variables—body mass, bill depth, flipper length, and bill length—at two-second intervals while keeping bill length on the y-axis. Circles are colored by penguin species (Adelie, Gentoo, Chinstrap) with a legend and animated transitions. The code demonstrates D3’s scaleLinear, axisBottom, and axisLeft APIs, along with ES6 module imports and setInterval-driven updates.

Jul 16, 2023

Loading thumbnail…

Assignment 2 - Scatter Plot with color

This scatter plot visualizes the Palmer Penguins dataset, mapping bill length to the x-axis and bill depth to the y-axis. Each dot is color-coded by penguin species (Adelie, Gentoo, Chinstrap) using a categorical palette, with a legend positioned on the right. The visualization loads data from a CSV URL and renders using SVG circles via D3 v6, employing `d3.csv`, `d3.scaleLinear`, `d3.extent`, and the `select` API to construct axes and marks.

Jul 16, 2023

Loading thumbnail…

Assignment 2 - Stacked Bar

A stacked bar chart displays crash ratings for 24 car makes across five rating levels, with each bar segmented by color to show the proportion of one-to-five-star ratings. Loading CSV data with values between zero and one, the visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` to map rating categories to colors. Hovering over a segment reveals a tooltip with the exact percentage and rating. The SVG renderer includes a legend, axis labels, and a title, styled with custom CSS.

Jul 16, 2023

Loading thumbnail…

Assignment 2 - Bar Chart

This interactive bar chart displays car sales data for 20 car models in 2022, with population as the quantitative x-axis and car model names on the y-axis. The visualization loads CSV data from a GitHub gist and uses React with D3 v5 scaleBand and scaleLinear to position rectangles rendered as SVG marks. Axes are constructed through custom React components that leverage D3’s tick functions, with formatted tick labels using d3.format, and hover tooltips display values via SVG title elements.

Jul 15, 2023

Loading thumbnail…

Activity 8 Q5A

This example renders an interactive world map using D3.js version 5 and TopoJSON. It displays countries as light green paths with indigo borders on a skyblue spherical backdrop, using the equirectangular projection and d3.geoPath. The map loads country boundaries from the world-atlas 110m TopoJSON dataset via a CDN. Users can pan and zoom the map through d3.zoom, while hovering over a country changes its fill to maroon via CSS. The code demonstrates importing specific D3 modules and the topojson feature method for GeoJSON conversion.

Jul 7, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates VizHub's modular workflow by rendering a centered greeting message. It shows how a project can load D3 from a CDN, import individual API functions like `select` via ES6 modules, and combine them with a local custom module. The code defines a string in `myMessage.js` and displays it inside the `#message` div using D3's `select` method, with styling applied through a linked CSS file.

Jul 7, 2023

Loading thumbnail…

Activity 8 Q5A

This example demonstrates the initial setup for a data visualization using D3.js for dynamic, SVG-based graphics within a 960-by-500 pixel canvas. It loads the D3 library and the TopoJSON package from a CDN, and the code imports the `select` function from D3 to manipulate DOM elements. The visualization is driven by a local ES6 module that provides a text message, showcasing D3's selection API and the integration of modular JavaScript with external libraries.

Jul 7, 2023

Loading thumbnail…

Activity 7 - Bar Chart

This example shows a horizontal bar chart comparing population figures for 20 countries in 2010, with each bar representing a country’s population sorted alphabetically. It uses React to render SVG elements with D3 scales (scaleBand for the y-axis and scaleLinear for the x-axis), along with the csv loader from D3 v5 to fetch data from a GitHub-hosted CSV file. Custom axis components render tick marks and labels, while formatted tick values convert large numbers into abbreviated units like “B” for billions.

Jul 6, 2023

Loading thumbnail…

Activity 8 Q6B

This example shows a social network graph of people connected by friendship links, with each node labeled by name and laid out in a force-directed arrangement. The graph is rendered as an SVG using D3 v6, with green circles representing individuals and blue directed edges with arrow markers indicating relationships. The layout is computed with `d3.forceSimulation`, using link, charge, collision, and center forces to position nodes, while drag interaction is enabled via `d3.drag`. Node colors are assigned with a simple color scale, and data is loaded from a local `graph.json` file.

Jul 5, 2023

Loading thumbnail…

Activity 8 Q5B

This example displays a choropleth map of India using a Mercator projection, rendered as SVG. It loads country boundary data from the world-atlas TopoJSON file and extracts the India geometry with a topojson-client feature lookup. The code applies a d3.geoMercator projection with fitSize to scale the map to 960 by 500 pixels and draws it using d3.geoPath. The visualization focuses solely on outlining India’s shape without additional styling or data overlays.

Jul 5, 2023

Loading thumbnail…

Activity 8 Q5A

Jul 5, 2023

Loading thumbnail…

Activity 8 Q4

This visualization displays the cost of sales from 2000 to 2013 as an area chart with a smooth curved line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map dates and cost values, with a line generator and area generator using `curveBasis`. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes styled axes, tick marks, and green shading under the line. The chart highlights yearly cost trends with clear labels for both axes.

Jul 5, 2023

Loading thumbnail…

Activity 8 Q3

A line chart displays the cost of sales from 2000 to 2013, sourced from a CSV file with `year` and `cost` columns. The visualization uses D3.v7 to render an SVG, mapping years to a band scale on the x-axis and costs to a linear scale on the y-axis. The chart applies a light green stroke, red axis labels, and custom font styling, with the `d3.line()` generator constructing the path and `d3.axisBottom`/`d3.axisLeft` adding ticks.

Jul 5, 2023

Loading thumbnail…

Activity 8 Q2

A pie chart displays the count of students from each major at UNT, with values labeled in thousands and a color-coded legend. Using D3 v5, the code fetches CSV data from a GitHub gist, applies `d3.pie` and `d3.arc` to generate SVG path segments, and uses `d3.scaleOrdinal` for section colors. Labels are positioned via the arc centroid, and legends annotate majors with corresponding student counts.

Jul 5, 2023

Loading thumbnail…

Activity 8 Q1

This example showcases an animated scatterplot of Fisher’s Iris dataset, cycling through different pairings of sepal and petal measurements. The visualization displays colored circles representing three species, with a manual legend showing color mappings. The code uses D3 v6 via UNPKG, loading data with `d3.csv`, and building scales and axes with `scaleLinear` and `axisBottom`. A `setInterval` updates the x-axis variable every few seconds. The SVG rendering includes custom labels and styling, demonstrating local ES6 module imports for the scatterplot function.

Jul 5, 2023

Loading thumbnail…

Activity 7 - Scatter Plot with color

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis while coloring each point by iris species (sky blue for setosa, light green for versicolor, orange for virginica). It uses D3.js v6 with dynamic SVG rendering across the full viewport, loading data via `d3.csv` from a GitHub raw URL. The code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and custom circle attributes for highlighting sepal dimensions, with axis labels and styling applied through CSS classes.

Jun 28, 2023

Loading thumbnail…

Activity 7 - Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble sized by MPG and colored by make. It uses D3 v7 to load CSV data, create SVG scales for position, size, and color, and render circles. Hovering shows a tooltip with the car make. The chart includes legends for both MPG size and make color.

Jun 28, 2023

Loading thumbnail…

Activity 7 - Scatter Plot with Shape

This scatter plot displays the relationship between sepal length and petal length in the Iris dataset, with species encoded through distinct point shapes. The visualization uses D3 v7 to load data from a GitHub-hosted CSV file and applies d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill for shape mapping, and a custom shape legend. Points are rendered as SVG paths using d3.symbol, while axes and labels are generated via custom axis functions.

Jun 28, 2023

Loading thumbnail…

Activity 7 - Stacked Bar

This stacked bar chart visualizes the distribution of movie ratings across six genres, with each genre’s bar segmented by five rating intervals from “below 5.0” to “above 8.5.” The chart uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal` to generate and color the segments, while `d3.scaleBand` positions genres on the y-axis. Interactive tooltips display exact percentages on mouseover. Data is loaded from a local CSV file using `d3.csv`.

Jun 28, 2023

Loading thumbnail…

Assignment1_10Q

This example loads a CSV file of supermarket sales data from a GitHub gist. It displays the first ten rows of the dataset as pretty-printed JSON in the page. The visualization uses D3 version 5 to fetch and parse the data with the `csv` function, and relies on the `select` and `append` APIs to add text elements to the body. The final output is rendered as SVG in the HTML.

Jun 25, 2023

Loading thumbnail…

Activity6

This example uses the D3.js v5 library to load, parse, and display a summary of the Iris dataset. The visualization fetches a CSV file, converts it to an array of objects, and uses a `flatRollup` operation with a `sum` reduction to compute the average sepal length per species, presenting the result as formatted JSON text in a `<pre>` element. The SVG and WebGL rendering in the index.html file is generated by external tools, not by the JavaScript code itself.

Jun 24, 2023

Loading thumbnail…

Activity6_3

This example shows the relationship between age and average body mass index (BMI) in a bar chart, using data loaded from a CSV file. It calculates BMI from height and weight fields, then uses `d3.bin` to group ages into bins and plots the mean BMI for each bin. The chart is rendered with SVG in D3 v7, with linear scales for both axes, custom tick formatting, and styled bars and labels.

Jun 14, 2023

Loading thumbnail…

Activity6_2

This example demonstrates how to load and summarize the classic Iris dataset using D3 v7 within VizHub. It fetches `data.csv` asynchronously, parses it with `d3.csvParse`, and converts numeric columns to numbers. The visualization then uses `d3.flatRollup` and `d3.sum` to compute the average sepal length per species, displaying the resulting summary as formatted JSON text in a `pre` element. The file also includes local ES6 modules and a custom state management pattern to handle loading and rendering.

Jun 14, 2023

Loading thumbnail…

Fork of Hello VizHub

Jun 12, 2023

Loading thumbnail…

5 Budhas

A grid of randomly generated triangles serves as the backdrop for a single, large Buddha-like figure drawn as a single SVG path. The chaotic, semi-transparent polygons are colored with extreme RGB values, while the central path is a complex, continuous line tracing a seated figure. The visualization is built with React and renders entirely through SVG elements, using the `map` function to generate the background triangles and a hardcoded `d` attribute string for the figure’s silhouette. The code relies on React’s `ReactDOM` and vanilla JavaScript’s `Math.random` for the background’s stochastic placement and color, with no external data source indicated.

Jun 7, 2023

Loading thumbnail…

5_Budhas

Rendered in SVG through React 16.10, this piece layers a large field of rotated, randomly colored polygons with a hand-crafted Buddha path. The polygon grid uses a triple-nested `A.map` over an array of 20 values (0–20), each instance computing random coordinates, fill colors via `rgb()` with randomized channel values, and a 45-degree rotation transform. The central Buddha figure is a static SVG `<path>` element, explicitly scaled and translated via a `<g>` transform. The black background and oversized title text in red complete the composition.

Jun 7, 2023