Pbarring

@Pbarring·12 public vizzes

ICE8_Q2_Family_Tree

This visualization displays a family tree as a horizontal dendrogram, with nodes labeled by name and connected by curved links. The layout is generated using D3’s `tree()` layout applied to a hierarchical JSON structure, while `linkHorizontal()` creates the paths. Rendering uses SVG within a zoomable group, enabled by `d3.zoom`, which applies pan-and-zoom transforms to the entire tree. Text size scales with node depth, and all data comes from `data.json`.

Apr 4, 2022

Loading thumbnail…

ICE_8 Q1 - US Map (Pdeep)

This example displays a choropleth-style map of the United States built with D3 v5 and TopoJSON. It renders the 50 states as light green SVG paths with thin black outlines over a sky-blue sphere background. The visualization uses `d3.geoAlbers` for the projection and `d3.geoPath` to generate the shapes. State boundaries come from the `us-atlas` TopoJSON file, with state features extracted via the TopoJSON `feature` API. No interaction or additional styling is applied beyond the static colored map.

Apr 2, 2022

Loading thumbnail…

ICE_8 Q1 - World Map (Pdeep)

This example displays a world map using the Natural Earth projection, with countries rendered as white filled paths against a dark background and a steel-blue sphere outline. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON using the `feature` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projection, appending SVG paths for each country and the sphere outline.

Apr 2, 2022

Loading thumbnail…

ICE7_Q3_Creating Line Chart with D3js

This example displays monthly gas prices for 2021 using an SVG line chart. The visualization uses D3 v5 to load CSV data and render a smooth curve, with labeled axes for months and price in dollars. It employs d3.scaleTime and d3.scaleLinear to map data values, d3.axisLeft and d3.axisBottom for gridlines and ticks, and d3.line with curveBasis for the curved path. The code also uses d3.csv for data parsing and d3.timeParse to convert month strings into date objects.

Mar 28, 2022

Loading thumbnail…

ICE7_Q4_Creating Area Chart with D3js

This example visualizes gas prices throughout 2021 using a smooth area chart rendered as SVG. The chart displays monthly price data from a CSV file, with the x-axis mapping time and the y-axis representing price in dollars. The code uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the filled curve, and `axisLeft`/`axisBottom` for labeled tick marks. The data is parsed from a Gist-hosted CSV using `d3.csv` and time-formatted with `timeParse`.

Mar 28, 2022

Loading thumbnail…

ICE7 - Q2 Pie Chart with D3

This example shows the average gas prices by month for the year 2021 as a simple pie chart, accompanied by a legend listing each month and its corresponding dollar value. The visualization uses D3 v5 to load data from a CSV file via `d3.csv` (wrapped in an async fetch), process it with `d3.pie`, and render SVG paths using `d3.arc`. A `d3.scaleOrdinal` assigns a distinct color to each slice, while `d3.format` displays the price values in the legend.

Mar 27, 2022

Loading thumbnail…

ICE-7 Reusable Scatter Plot (Pdeep)

This example demonstrates a reusable scatter plot of the Iris dataset, cycling through different attribute pairs every two seconds to compare petal and sepal measurements. The visualization colors each point by species—green for setosa, red for versicolor, and blue for virginica—using SVG circles rendered with D3’s scaleLinear, axisLeft, axisBottom, and data joins. The chart is driven by a custom scatterPlot function with configurable getter/setter methods, while index.js controls the animation interval and data parsing. The implementation follows the reusable chart pattern, loading CSV data via d3.csv and rendering to a full-window SVG.

Mar 24, 2022

Loading thumbnail…

ICE7_Reusable Scatter Plot

This reusable scatter plot displays the Iris Dataset, cycling through four variables (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, with `selectAll` and `join` for idempotent circle updates. The visualization animates via `setInterval`, calling the chart’s setter functions to update the x-value mapping. SVG rendering fills the browser window, with data loaded from a CSV gist.

Mar 23, 2022

Loading thumbnail…

ICE6_Q1_Rendering Marks and Channels with D3

This example displays monthly gas prices for 2021 as a bar chart, with months on the y-axis and price on the x-axis. It uses React hooks (useState, useEffect) to load and parse CSV data from a GitHub gist via d3.csv, then renders SVG rectangles scaled with d3.scaleBand and d3.scaleLinear. Axes are drawn manually using d3.ticks, with grid lines and tick labels positioned via SVG transforms.

Mar 6, 2022

Loading thumbnail…

ICE6_Q2 - Creating a Scatter Plot with D3

This example shows a scatter plot of the classic Iris dataset, mapping sepal length and width for individual flowers and coloring each point by species with green, red, and blue markers. The visualization uses D3 v6’s `scaleLinear` and `extent` to compute axes, then renders the data points as SVG circles with the `select` and `join` API. Axis labels are added via SVG `text` elements, and the plot includes axis ticks generated with `axisLeft` and `axisBottom` from the D3 module.

Mar 6, 2022

Loading thumbnail…

ICE5_Q2_Loading and Parsing Data With D3.js

This example demonstrates loading and parsing CSV data into a web page with D3.js v7, displaying a hard-coded SVG illustration of a graph or network structure alongside the parsed data in a preformatted element. The page uses D3’s asynchronous data-fetching methods (`d3.csv`) to handle external datasets, though the visible script is incomplete. It also incorporates basic CSS styling for headers and data output, with the SVG rendering static nodes and edges that hint at a force-directed layout without explicitly invoking `d3.forceSimulation`. The visualization highlights how D3 integrates with HTML, CSS, and SVG for simple data representation.

Feb 27, 2022

Loading thumbnail…

Question 4 - Making a face with D3 (Data Visualization)

This example creates a simple, stylized face using React and D3.js, rendered as SVG elements. The face consists of a brown circular head, two eyes defined as circles with thick white strokes, and a mouth drawn using D3’s `arc` generator. The code uses absolute positioning via a `<g>` transform to center the composition, and React’s JSX syntax to manage SVG markup, with all visual attributes (sizes, offsets, stroke widths) defined as constant JavaScript variables. The D3 arc API computes the mouth path, while React 17 handles the component rendering.

Feb 19, 2022