Hema1430

Area Chart

This example shows the monthly expenditure of internet users over time, with a line tracing the trend and a light green area filling the space beneath it. The chart uses an SVG rendering with D3 v5, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` and `d3.area` with `d3.curveBasis` to generate the smoothed paths. Data is loaded from a CSV file, parsed with `d3.csv` and `d3.timeParse`.

Apr 30, 2023

Fork of Project DV

This interactive bar chart visualizes the investment of money across different ages, drawing data from a CSV file loaded via `d3.csv`. The React application uses D3's `scaleBand` and `scaleLinear` to construct the chart, which plots the number of pregnancies against country values. Rendered as an SVG, the visualization displays bars in a horizontal layout, with axes generated through D3's axis functions. The code filters the dataset to the first 50 records, mapping the 'Pregnancies' field as the cost metric, and uses D3 v5 within a React framework to manage the dynamic state.

Apr 29, 2023

Social Network graph-DV-ICE_8

A social network graph displays nine people as pink circles connected by black lines, with each node labeled by name and grouped by color-coded community. The network uses a force-directed layout provided by d3.layout.force, which positions nodes based on gravitational attraction, charge repulsion, and link distances. Links vary in stroke width according to each connection’s weight value from the loaded JSON data. Nodes are draggable via force.drag, and the visualization renders in SVG within a 900x600 canvas, updating positions on each tick event. The data comes from graph.json, specifying names, groups, and friend relationships.

Apr 13, 2023

Fork of Tree - dv - ice_8

This interactive tree map displays a hierarchical classification of different vehicle types, from the root "VEHICLE" down to specific models like the Lamborghini Diablo and Ferrari Testarossa. The static dataset builds a two-level branching structure separating two-wheelers from four-wheelers, with each node color-coded by its fill property. Rendered as an animated SVG using D3.js version 3.5.17, the visualization employs the `d3.layout.tree()` and `d3.svg.diagonal()` APIs to position nodes and draw connecting links, while node transitions are handled through the `.transition().duration()` method.

Apr 13, 2023

Australia Map

This map of Australia displays its electoral regions as white-filled SVG paths with grey borders and labeled with region names. Built with React and D3 v5, it uses `d3.geoMercator` for projection, `d3.geoPath` to generate paths from TopoJSON data, and `topojson.feature` to extract geometries. State labels are positioned using `pathGenerator.centroid`. The TopoJSON source provides the 2021 electoral boundary shapes.

Apr 13, 2023

DV-Assignment-8-world map

This example displays a world map rendered with an Eckert III projection using D3’s `geoNaturalEarth1` and `geoPath`. It visualizes land polygons, country borders via topojson mesh, graticules, and a sphere outline, all styled with CSS and dynamically loaded from the world-atlas TopoJSON dataset. The React component fetches data using `useData` with `json`, then passes the processed geoJSON features to SVG marks for rendering.

Apr 10, 2023

ICE8 - World Map - DV

This visualization displays an interactive world map using the Natural Earth projection. It renders a blue sphere and draws country boundaries as white-stroked paths. The example uses the D3 library (v5) with topojson to process GeoJSON data from the world-atlas package, employing the d3.geoPath function and the geoNaturalEarth1 projection to generate the SVG output. The map is created by fetching countries-110m.json and iterating through the topojson features.

Apr 10, 2023

Fork of Fork of 3D Scatter Plot-BICE

This example shows a 3D scatter plot of the Berrylily dataset, plotting measurements of calyx length, calyx width, curlicue length, and curlicue width as markers. It uses two traces: one scatter2d trace for curlicue length and one scatter3d trace for curlicue width, styled with distinct marker colors and opacity. The code loads the data from a GitHub-hosted CSV file using d3.csv, then builds the plot with Plotly’s `newPlot` API. The visualization compares the two complementary dimensions across the flower measurements in a single interactive chart.

Apr 5, 2023

3D Scatter Plot - Bonus - ICE

This 3D scatter plot visualizes a berry lily dataset, displaying relationships between measurements like calyx length, width, and curlicue dimensions. The visualization uses Plotly.js to render two traces: one appears as a 2D scatter with the calyx length and width, while the other is a 3D scatter incorporating curlicue width. Markers are styled with distinct purple colors, sizes, and opacity. Data is loaded asynchronously using D3.js's `d3.csv` function from a remote GitHub gist containing the mobile dataset.

Apr 5, 2023

3D Bar chart - Bonus_ICE

This example presents a 3D multi-series bar chart visualizing attrition across departments for three years (2016–2018). It renders the categorical data as extruded bars in a spatial scene, with axes and grid lines for depth perception. The visualization leverages the `d3-x3d` library, which bridges D3.js v5 with X3DOM for WebGL-based 3D output. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed into key-value pairs, then bound to the chart via `chartHolder.datum(data).call(myChart)`. The demo also includes sample random data generation for initial display before the real dataset loads.

Apr 5, 2023

Fork of Reusable_D3_Scatter_Plot_DV

This interactive scatter plot visualizes the Iris dataset, animating through different feature combinations on the x-axis while the y-axis remains sepal length. The SVG rendering uses D3.js scaleLinear, axisLeft, and axisBottom to construct the plot, with a legend distinguishing three species by color. A setInterval loop cycles through four measurement columns, and the reusability of the scatterPlot component is demonstrated by calling plot.xValue with each new dimension, updating the visualization dynamically.

Fork of Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, encoding petal and sepal measurements for three species of iris flowers. The visualization cycles through different x-axis variables every few seconds using `setInterval`, animating transitions between petal width, sepal width, petal length, and sepal length. The plot uses D3 version 6.7.0 with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while SVG circles represent individual data points colored by species. A custom legend and axis labels are dynamically appended to the SVG, with the overall rendering built through a reusable `scatterPlot` function.

Fork of Piechart ICE - 7 - DV

This pie chart visualizes the number of movies available in different countries, using a dataset from a raw GitHub CSV file. Each slice represents a country, colored via d3.scaleOrdinal, with labels displaying movie counts positioned using d3.arc.centroid. A legend lists countries and their values. The visualization is built with D3 v5 and rendered as SVG elements.

Fork of Piechart ICE7

This pie chart visualizes the number of vehicles seized in different U.S. states, with each state represented by a distinct color and labeled with its value in thousands. The visualization is built using the D3.js library, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the chart and its legend. Data is loaded asynchronously from a raw CSV file hosted on GitHub, which is parsed using `d3.csv`. The chart is rendered as an SVG, with each arc segment and legend entry colored according to the state’s data value, and the total number of vehicles is aggregated for reference.

Fork of ICE-7 Line Chat - DV

This line chart visualizes monthly expenditures, plotting time on the x-axis against the expenditure amount on the y-axis. The data is loaded from an external CSV file. Using D3 v5, the code constructs the visualization with `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for the ticks, and a `line` generator to draw the path. The chart displays a single red line against a minimal grid, with both axes labeled and styled via CSS.

Mar 29, 2023

ICE-6

This visualization presents a scatter plot of mobile device data, mapping each product’s rating on the x-axis against its review count on the y-axis. Data points are colored by species, using blue, yellow, and green markers, with point radii adjusted based on star ratings. The example loads a CSV from a GitHub gist, parses numeric fields, and renders SVG circles using D3 v6 scales (scaleLinear, extent), axes (axisLeft, axisBottom), and data joins. The page fills the viewport, includes styled axis labels, and uses a React-free, plain JavaScript approach within an HTML file.

Fork of Assignment ICE-6 Bar Graph

This bar chart visualizes investment amounts across different age groups using a horizontal layout. The visualization loads CSV data from a GitHub gist, processes it with React hooks, and renders bars with D3.js v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG elements are generated directly in JSX, with gridlines and tick labels manually created via D3 array methods. The chart displays the first 50 records, showing each avenue of investment against its corresponding age value.

Assignment ICE-6 Bar Graph

This bar chart visualizes the investment of money across different ages, comparing values for twelve countries using a horizontal layout. It loads CSV data from a GitHub gist and renders an SVG with React, using D3 v5 scales (`scaleBand` for the y-axis, `scaleLinear` for the x-axis). The code draws gridlines, tick labels, and rectangles for each bar, with axis positioning handled through SVG transforms and D3’s axis utilities.

Data Visualization ICE-6 Bar Graph

This bar chart displays the cost per month for basic mobile plans across different countries, using a horizontal layout. The visualization loads data from a CSV file, filters it to the first 12 entries, and maps country names to a d3.scaleBand y-axis and costs to a d3.scaleLinear x-axis. Rendered as SVG within a React component, it uses d3.csv for data loading, with d3.max computing the domain and custom SVG elements for ticks and gridlines.

ICE-6

This bar chart visualizes the cost per month of investments across countries using a horizontal bar chart layout, plotting countries on the y-axis and their associated costs on the x-axis. The visualization employs React for the user interface and d3.v5's scaleBand, scaleLinear, max, and csv functions to load and process the financial data from a CSV file. The chart is rendered as an SVG, with red gridlines extending from each x-axis tick to enhance readability.