P

PY09052021

@PY09052021·23 public vizzes

Loading thumbnail…

ICE_8_USA_TopoJson_PY

This example visualizes fatal police shooting incidents across the United States as a scatter plot overlaid on a map of state boundaries. The map is rendered using `d3.geoPath` with the `geoAlbersUsa` projection, projecting TopoJSON state geometries converted via `feature` from the `us-atlas` dataset. Incident locations are plotted using longitude and latitude coordinates from a CSV of police shooting records, with each point positioned through the same projection. The visualization is built with React and D3 v5, using SVG for rendering and showing a stitched map of the contiguous states, Alaska, and Hawaii.

Loading thumbnail…

ICE-8_PY_Tree

This interactive tree diagram illustrates a Godfather family hierarchy, using color-coded nodes to represent generational levels from blue (root) to green and black. Built with D3 version 3.5, it employs `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Users can click nodes to collapse or expand branches, with smooth `transition` animations over 750 milliseconds. The SVG rendering includes custom styling for node circles and text labels.

Loading thumbnail…

ICE_8_PY_NetworkTree

This interactive network visualization displays a small social graph with eight named nodes and seven weighted links using a force-directed layout. The code employs D3 version 2’s `d3.layout.force` to simulate physical forces, positioning circles and text labels from a JSON file. Link stroke widths correspond to the `weight` property, while nodes render as gray SVG circles with draggable behavior. The example demonstrates basic D3 force layout techniques, including tick updates for continuous position adjustments and drag interactions.

Loading thumbnail…

ICE_8_Country_TopoJson_PY

This example displays a map of world countries using an equal-area conic projection. The visualization renders each country as a filled path using SVG, with data sourced from the World Atlas TopoJSON file. The code converts TopoJSON to GeoJSON using the `feature` method from topojson, then projects the coordinates with `d3.geoConicEqualArea` and `d3.geoPath`. The React component loads the data asynchronously through a custom `useData` hook.

Loading thumbnail…

ICE-8_PY_Topojson_World

This example demonstrates a minimal D3 version 7 setup that renders a simple text message, "Hello D3 version 7," in the center of the page using the `select` API. The `index.html` file includes the D3 library from a CDN and loads a bundled JavaScript file, while the `index.js` imports `select` from D3 and sets the body text. The page’s large font size and centered alignment make the output visually prominent, but no data visualization or TopoJSON map is shown despite the title. A video tutorial accompanies the demonstration.

Loading thumbnail…

ICE_7_PY_Scatter Plot

This animated scatter plot displays the classic Iris dataset, mapping petal width and sepal length to the x and y axes while coloring each point by species. The visualization cycles through four attribute combinations every two seconds using a `setInterval` callback, dynamically updating the axes and circles. Built with D3.js v6, it leverages the reusable `scatterPlot` module's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render SVG elements. The implementation reads CSV data and appends a categorical legend showing the three Iris species.

Loading thumbnail…

ICE-7_PY_AreaChart

This area chart visualizes insurance policy sales in dollars over the months of 2021 using a time-series dataset loaded from a remote CSV file. The chart displays a filled area with a green stroke, using D3 v4’s `d3.area()`, `d3.scaleTime()`, and `d3.scaleLinear()` for the x and y axes. The SVG rendering includes axis labels for months and sales, with data parsed via `d3.timeParse()` and fetched using `d3.csv()`.

Loading thumbnail…

ICE-7_PY_LineChart

This line chart, titled "ICE-7_PY_LineChart," displays the relationship between two variables, D1 (independent) and D2 (dependent), using a dataset that increases steadily from (1,1) to (100,140). The visualization is rendered as an SVG using D3 v4, with a monotone curve drawn through red circular markers. The chart explicitly calls the `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` APIs to position axes and construct the path. Data is hardcoded inline rather than loaded from an external file, with labels for the axes and a title added via SVG text elements.

Loading thumbnail…

ICE7_PY_PieChart

This pie chart displays the percentage contribution of five individual in-class exercises (ICE-1 through ICE-5) to a final student score. The code uses D3 v4’s `d3.pie` and `d3.arc` to compute and render the SVG arcs, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. A legend is drawn using appended circles and text labels, while each slice is labeled with its corresponding ICE name. The data is hardcoded as an array of objects, totaling 100 percent.

Loading thumbnail…

3d Bar Chart

This 3D bar chart visualizes the frequency of car brands from a TSV dataset. Each bar is drawn as a set of SVG polygons, with perspective projection applied to simulate depth. The chart uses D3 v3 with a custom `bar3d` generator to compute visible faces (front, top, left, right) based on a configurable camera position, and renders animated transitions when faces update. Hovering highlights the bars in red, and axes are included for reference.

Loading thumbnail…

ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the classic Iris dataset, encoding sepal length, petal length, and sepal width along three axes. Each point is colored by species, with a wireframe grid providing spatial reference. The visualization supports drag-based rotation to explore the data from any angle. Built with D3.js v4 and the d3-3d plugin, it projects 3D coordinates to SVG paths and circles, leveraging a drag behavior to update rotations and animate transitions. The Iris data is imported from an external CSV file.

Loading thumbnail…

ICE-BONUS Iteractive Bar Chart

This interactive bar chart displays monthly car sales data for 34 brands, letting users switch between months via a dropdown menu. Built with D3 v3, it renders SVG rectangles whose heights transition smoothly when the selected month changes, with hover highlighting in orange. The x-axis uses an ordinal scale for brand names, while the y-axis linear scale adjusts dynamically using d3.svg.axis and transition calls. Data comes from a local CSV file with twelve monthly columns per brand.

Loading thumbnail…

ICE-6_Scatterplot_PY

This scatterplot visualizes iris flower measurements, plotting petal length on the x-axis against sepal length on the y-axis using D3.js v6 and SVG rendering. The code loads CSV data from a GitHub repository, parses numeric values, and uses `scaleLinear` and `extent` for scaling. Circles are bound to the dataset with `selectAll` and `join`, while `axisBottom` and `axisLeft` generate labeled axes. The chart fills the browser window, with rotated axis titles for clarity.

Loading thumbnail…

ICE-6_PY_DATA_VIZ: Rendering Marks and Channel w/React

This example shows a horizontal bar chart comparing the horsepower of ten cars, using SVG marks and channels rendered through React components. It imports data from a CSV file with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map car names and horsepower values to screen positions. The code generates axis ticks and gridlines manually with JSX, while React’s useState and useEffect manage asynchronous data loading. D3 v5 and React 16.13.1 work together to produce the visualization.

Loading thumbnail…

Fork of Stylized Scatter Plot

A fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. The React application uses d3.csv for data loading and d3.scaleLinear with .nice() for axis scaling. SVG circles are rendered with tooltips via native <title> elements. The code leverages React hooks (useState, useEffect) for asynchronous data fetching and d3.format for axis tick labels.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup where a single text element is updated directly through the library. The code imports the `select` function from D3.js and uses it to target the `#message` div, setting its content to the string `'Hello VizHub!'` from a local ES6 module. The text is centered and displayed at a large font size using an external CSS file. The page loads D3 version 5.16.0 from a CDN and relies on a pre-built bundle for execution.

Loading thumbnail…

ICE5_SUBMISSION_PY_v2.0

This example demonstrates how to load and parse a winery dataset from a remote CSV file using d3.csv. It displays a summary message indicating the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code additionally renders a simple SVG scene featuring a yellow circle with a black stroke and a smaller plain circle, using static SVG elements defined in the HTML. The visualization relies on D3 v7 for data fetching and formatting, with the message output updated via the DOM API.

Loading thumbnail…

Fork of Fork of ICE5_SUBMISSION_PY

This example displays a hardcoded yellow circle with a black outline, alongside a smaller unstyled circle, rendered in SVG. The page loads a winery dataset from a GitHub gist using `d3.csv`, then reports the data size in kilobytes, row count, and column count, which is displayed in a red `<pre>` element. It demonstrates basic SVG drawing and asynchronous CSV data loading with D3 v7.

Loading thumbnail…

ICE5_SUBMISSION_PY_v1.0

This visualization demonstrates how to load and summarize a CSV dataset using D3.js. A red banner displays a text message reporting the file size in kilobytes, the total number of rows, and the number of columns, generated with `d3.csv` and `d3.csvFormat` from the D3 v7 library. The page also includes a static SVG containing a yellow circle with concentric rings, created through direct SVG markup. The winery dataset is fetched from a remote GitHub Gist URL, though no actual data values are visualized beyond the summary statistics.

Loading thumbnail…

Fork of ICE5_SUBMISSION_PY

This example demonstrates the initial steps of loading and parsing a CSV dataset with D3. It fetches a winery dataset from a GitHub gist using the `d3.csv` method and displays basic metadata about the file. The page shows the approximate file size in kilobytes, the total number of rows, and the number of columns in a plain text message. The visualization employs standard DOM manipulation with `document.getElementById` to update the page content, using D3 v7 and custom CSS styling for the header and message area.

Loading thumbnail…

ICE5_SUBMISSION_PY

This visualization demonstrates how to load and parse a remote CSV dataset using D3.js v7, displaying basic metadata about the wine dataset from a GitHub gist. The page uses `d3.csv` to fetch the data asynchronously, then calculates and displays the file size in kilobytes, total row count, and number of columns in a text element. The example uses `d3.csvFormat` to measure the data string length and updates the DOM via `document.getElementById`, with page styling applied through an external CSS file and inline HTML styles.

Loading thumbnail…

Data_Visualization_YellowFace_PY

A face built from D3-selected SVG shapes sits on a green circle with a blue stroke, while two black circles serve as eyes of different sizes. A D3 arc path creates the start of the mouth, showing only the first part of a curve toward a smile. The page uses D3 v7 to append a group element and construct the arc with inner and outer radii, plus start and end angles in radians. Static values hardcoded in the markup define the face, matching the README’s note that it is only half finished.

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

A stylized smiley face built with D3 v7 renders two static eyes and a mouth as SVG shapes on a green circle with a blue stroke. The code uses `d3.select` to access the SVG, `d3.append` to add elements, and `d3.arc` to generate the mouth path with specified inner and outer radii and start and end angles. The visualization demonstrates basic geometric composition and D3's path-generation API without interactive behavior.