J

Jacob Chlebowski

@jacobchlebowski·28 public vizzes

Loading thumbnail…

Data Visualization Project Week 15

This interactive D3.js scatterplot visualizes Pokémon base stats, mapping speed on the x-axis against the balance between attack and defense on the y-axis. Circle size encodes HP, while color represents type, with filters allowing viewers to isolate specific Pokémon types. Hovering over the legend reveals type counts, and clicking a point displays detailed stats. The visualization uses d3.scaleLinear, axisBottom, axisLeft, and handles filtering via data binding with selection.join() on the Pokémon Base Stats Dataset from Kaggle.

Loading thumbnail…

Data Visualization Project Week 14

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting Speed against the Attack minus Defense balance for each creature. Circle size encodes HP, and color encodes primary type, with filter buttons and a legend enabling type-based exploration. The visualization uses D3 scales and axes to render the SVG chart, while click events display detailed Pokémon information in a side panel. Hovering over legend items reveals the count of each Pokémon type.

Loading thumbnail…

Data Visualization Project Week 13

This scatterplot from Jacob Chlebowski’s dataset visualizes Pokémon attributes, plotting Speed on the x-axis against a balance metric (Attack minus Defense) on the y-axis. Circle size encodes HP, and hue encodes Pokémon type, with controls to filter by type and tooltips to display detailed Pokémon stats. Built with D3.js, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, custom `hue` logic for point styling, and event handlers for clicks and hovers. Data comes from a Pokémon Base Stats Dataset rendered in SVG.

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting speed on the x-axis and offensive balance (attack minus defense) on the y-axis. Circle size encodes HP, while color represents Pokémon type. Users can filter by type using buttons, hover over the legend to see type counts, and click individual points to view detailed Pokémon attributes. Built with D3.js, the visualization uses scaleLinear for axes, selection joins for circle rendering, and event listeners to update the display.

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats, plotting speed on the x-axis against the balance of attack versus defense on the y-axis. Circle size encodes HP, while color indicates Pokémon type from the Kaggle dataset. Users can click individual points to view detailed stats and filter by type using buttons. The visualization is built with D3.js, utilizing `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `join` for data binding.

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting speed against the balance between attack and defense. Circle size encodes HP, while color maps to Pokémon type. Users can filter by type using buttons and click individual points to view detailed stats. Built with D3.js, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft`, with custom overlap-based opacity adjustments to manage point density. A legend and a details panel complement the interactive filtering and selection features.

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting speed against the balance between attack and defense. Circle size encodes HP, while color maps to Pokémon type. Users can filter by type using buttons and click individual points to view detailed stats. Built with D3.js, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft`, with custom overlap-based opacity adjustments to manage point density. A legend and a details panel complement the interactive filtering and selection features.

Loading thumbnail…

Data Visualization Project Week 12

This interactive scatterplot visualizes Pokémon base stats, plotting speed against the balance between attack and defense, while encoding HP through circle radius and Pokémon type through color. Users can click individual points to reveal detailed stat information and filter the dataset by type. The visualization uses D3.js v7 APIs including `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with custom overlap detection adjusting circle opacity to reveal densely clustered regions. The dataset is drawn from the Pokémon Base Stats Dataset sourced from Kaggle.

Loading thumbnail…

Data Visualization Project Week 11

An interactive scatterplot visualizes Pokémon base statistics, mapping speed on the x-axis and the offensive-defensive balance (attack minus defense) on the y-axis. The visualization uses D3.js to render circles sized by HP and colored by Pokémon type, with filter buttons to isolate specific types. Overlapping circles are made more transparent, and clicking a point displays that Pokémon's detailed stats. The plot includes a legend and uses `scaleLinear` for axes and `scaleOrdinal` for type colors.

Loading thumbnail…

Data Visualization Project Week 10

This interactive scatterplot visualizes Pokémon base stats from the Kaggle dataset, using d3.scaleLinear for the x-axis (Speed) and y-axis (Attack minus Defense) to balance offensive and defensive attributes. Circle size encodes HP, while color encodes primary type. Users click the filter buttons to isolate specific types, triggering a custom `updateScatterPlot` function that removes and redraws axes and circles via `createAxes` and the `hue` function, which also includes a click handler displaying Pokémon details in an alert.

Loading thumbnail…

Data Visualization Project Week 9

This scatterplot visualizes Pokémon base stats, plotting Speed on the x-axis against an offensive/defensive balance (Attack minus Defense) on the y-axis. Circle size encodes HP, while color indicates Pokémon type, and overlapping circles are made more transparent. The visualization uses D3 scales, axes, and selections to render the chart, with data from a Pokémon Base Stats CSV. The code employs `d3.scaleLinear`, `axisBottom`, `axisLeft`, and `selection.join` to manage dynamic circle elements.

Loading thumbnail…

Fork of Week 2: speed only

This scatter plot matrix visualizes Pokémon base stats across four quadrants, focusing on speed and offensiveness (Attack and Sp. Atk). It summarizes all Pokémon in the dataset while enabling lookup of high-speed entries (150+) and identification of individual points. The visualization uses a scrollable container and parses CSV data with string-to-number conversion, rendering type counts as JSON text. Data comes from the Pokémon Base Stats Dataset on Kaggle, with the main script exporting computed stats without external libraries.

Loading thumbnail…

Week 9 Make a Map

This example presents an orthographic projection of the world map, tilted to match Earth's 23.5-degree axial tilt, with a continuous rotation animation and a day/night visual effect via the light and dark shading. The map is rendered using the d3-geo projection and geoPath, with country boundaries drawn from the visionscarto world-atlas topoJSON data. Static elements like graticule lines and the outline are drawn once, while the rotating countries update at a fixed speed using d3's timer. The code leverages the d3-geo library's geoOrthographic projection and geoGraticule for the spatial framework, and topojson-client to parse the world atlas data.

Loading thumbnail…

Week 9 Make a Map

This interactive map displays a rotating orthographic view of Earth, tilted at 23.5 degrees to simulate the planet’s axial tilt. The globe continuously spins, and a day/night effect is implied through the graticule and shaded country polygons. The visualization uses the `d3.geoOrthographic` projection for the sphere, `d3.geoPath` and `d3.geoGraticule` for rendering outlines, and `d3.timer` for the rotation animation. Geographic data comes from the `visionscarto-world-atlas` TopoJSON file, processed with `topojson-client`. D3.js and topojson-client are the core libraries.

Loading thumbnail…

Week 9 Make a Map

This example shows an animated orthographic world map that rotates continuously while simulating day and night shading. The globe is tilted at Earth's 23.5-degree axial angle, with a dark-to-light sequential color scale marking the sunlit and shadowed hemispheres. Using d3.geoOrthographic and d3.geoPath, it renders country boundaries from the visionscarto world-atlas TopoJSON source, with d3.geoGraticule adding latitude and longitude lines. A d3.timer drives the rotation and shading updates, while a d3.scaleSequential with interpolateHcl creates the dusk-like color gradient.

Loading thumbnail…

Week 9 Simple World Map

This example displays a basic world map using an equal-area natural Earth projection. It fetches country boundary data from the visionscarto world-atlas TopoJSON and converts it to GeoJSON features with `topojson.feature`. The map renders countries as white-outlined paths via `d3.geoPath`, adds a light gray graticule, and draws a black outline around the projection using `d3.geoGraticule`.

Loading thumbnail…

Week 4: Pokemon Simple Scatter Plot

This scatter plot maps Pokémon Attack and Speed stats from the Kaggle Base Stats Dataset as circles, with click interactions revealing each creature’s name via alert. Built with d3 scaleLinear, axisLeft, extent, xAxis, and yAxis, it renders axes, labels, and a gray inner rectangle. The viz.js component handles data binding and scales, while index.js configures dimensions and margins. Circle radius and opacity are derived from the plot width and a fixed ratio.

Loading thumbnail…

Week 5: Pseudo-Visualization Pokemon Scatterplot

This D3.js scatterplot visualizes Pokémon base stats from a Kaggle dataset, plotting each creature's speed on the X-axis against an offensive-defensive balance score on the Y-axis, with circle radius encoding HP and color encoding elemental type (water, fire, grass, or other). The visualization centers both axes at the canvas midpoint, using `scaleLinear` for coordinate mapping and a custom overlap-detection algorithm in `hue-and-size.js` that adjusts point opacity based on colliding circles. Axes are rendered via `axisBottom` and `axisLeft`, while an SVG background rect and bold directional labels ("Fast," "Slow," "Offensive," "Defensive") orient the viewer.

Loading thumbnail…

Fork of Week 2: Pokemon Data Extremes

This example presents text-based extremes for the Pokémon dataset, listing the lowest and highest values for Speed, Attack, Defense, and HP. It identifies the Pokémon with the minimum and maximum stat values. The tool parses CSV data and calculates extremes using JavaScript's `reduce` method, then displays results in a formatted HTML container. The visualization is a simple textual output rather than a graphical chart, with data sourced from the Pokémon Base Stats Dataset.

Loading thumbnail…

Axis Labels

This example demonstrates how to add clear, readable labels to the X and Y axes of a D3 chart. A gray rectangular plotting area is drawn, with linear scales mapping 0–100 values to pixel coordinates. The X-axis label is positioned below the axis at the horizontal center, while the Y-axis label is rotated 90 degrees and centered vertically. The code uses d3.select, scaleLinear, axisBottom, and axisLeft to construct the visualization, with text elements styled via font-family attributes.

Loading thumbnail…

Week 2: Pokemon Base Stats Dataset

Using a scrollable preformatted text block, this example displays the complete Pokémon Base Stats dataset as a raw JSON file. The interactive element is a simple font-size control. The code parses string values for eleven numeric columns, including Speed, Attack, and Defense, into numbers, and then uses `JSON.stringify` to render the entire array of 144 Pokémon records for inspection. It relies on the custom CSV-to-JavaScript data import functionality and standard document object model (DOM) methods for styling and display.

Loading thumbnail…

Week 3: Pollution in World Cities

This animated bubble chart visualizes real-time Air Quality Index (AQI) data for five major world cities, sourced from IQAir’s dynamic ranking. Circles radiate outward with staggered transitions, sized proportionally to each city’s AQI, with labels displaying city name and index value. Colored fills distinguish pollution levels, from hazardous Kinshasa in dark red to cleaner Yangon in white. Built with D3.js (v7), the visualization uses `transition` delays and easing to animate enter and update states, while hardcoded coordinates position cities horizontally. The code prepares for future features like city lookup by name or AQI, image annotations, and pairwise comparisons.

Loading thumbnail…

Week 2: Cost of Living by Country Dataset

This example displays the Cost of Living by Country dataset as a scrollable JSON text view, showing all country records with attributes like Cost of Living Index and Rent Index. The code parses string values into numbers and renders the full dataset in a <pre> element styled with a font size of 19 pixels. It uses standard browser DOM APIs, including `container.innerHTML` and `style.overflowY`, to present the raw data from the CSV file imported via an ES module.

Loading thumbnail…

Circles with D3

A winter-themed D3 visualization renders a snowman, a house, and falling snow on a dark canvas. The example demonstrates the D3 General Update Pattern using `selectAll`, `data`, and `join` to bind arrays of objects to SVG `circle` and `rect` elements. It sets attributes like `cx`, `cy`, `r`, and `fill` dynamically, with a fixed opacity for all shapes. The code uses D3 v7 and randomly generates 200 snow particles using `Math.random()` within the data array.

Loading thumbnail…

Week 2: Global Population Growth 2024 Dataset

This example displays the Global Population Growth 2024 dataset as raw JSON text within a scrollable container, allowing viewers to inspect the simulated city and country records. The data, sourced from Kaggle, includes population figures for 2023 and 2024 along with growth rates. The visualization uses a plain HTML `<pre>` element to render the parsed data, converted from CSV via JavaScript’s `import` statement after numeric string parsing. The code sets a fixed font size and enables vertical scrolling to accommodate the full dataset, with no additional charting libraries involved.

Loading thumbnail…

Week 2: Global Salaries for Data Science Dataset

This example displays the raw contents of the Global Salaries for Data Science dataset as a scrollable JSON object in the browser. Each row from the CSV file is parsed and rendered inside an HTML `<pre>` element, with the font size set to 19 pixels. The code uses the `data.csv` import and the `JSON.stringify` method to format the data with indentation. The visualization serves as a simple data browser, allowing inspection of individual salary records without any aggregation or charting.

Loading thumbnail…

Week 2: Global Salaries for Data Science Dataset

This example displays the raw contents of a Pokémon Base Stats dataset as a JSON-formatted text listing in the browser. It parses the CSV data using a custom import and converts numeric fields with unary plus operators. A scrollable container is created with inline CSS, and the JSON string is rendered inside a `<pre>` element, with font size controlled by a variable. The visualization simply outputs the structured data without any graphical encoding.

Loading thumbnail…

Week 2: Global Salaries for Data Science Dataset

This example displays the raw contents of a Pokémon Base Stats dataset as a JSON-formatted text listing in the browser. It parses the CSV data using a custom import and converts numeric fields with unary plus operators. A scrollable container is created with inline CSS, and the JSON string is rendered inside a `<pre>` element, with font size controlled by a variable. The visualization simply outputs the structured data without any graphical encoding.