chris.shimotake@gmail.com

Fugitive Heist Viz

This interactive visualization combines a choropleth world map of country-origin data with a scatterplot of cat breeds by maximum life expectancy and weight. The map uses a D3 geoEqualEarth projection and a threshold color scale based on breed counts. The scatterplot supports drop-down menus to select alternative x and y attributes, while D3 SVG rendering enables zoomable, pannable map interactions with tooltips.

May 22, 2024

Fork of Cat Data Final Demo popup dropdown

This example visualizes data on cat breeds with two linked views. A world map, using a d3.geoEqualEarth projection and d3.geoPath, colors countries by the number of breeds they originate from, while a scatterplot of breed attributes (life expectancy and weight) uses d3.scaleThreshold for color encoding. Users can switch scatterplot axes via dropdown menus. The map supports zooming and panning, and the visualization includes tooltip elements for both the map and scatterplot. Cat breed data is loaded from CSV files.

May 22, 2024

Fork of Cat Data Final Demo

This visualization compares the geographic origins and physical attributes of cat breeds. A zoomable and pannable choropleth world map colors countries by the number of breeds they originate from, while a scatterplot plots each breed's maximum life expectancy against its maximum weight, with dropdowns to switch between attributes. Rendered using D3 v6 with `d3.geoPath` and `d3.geoEqualEarth` for the map and D3 scales and axes for the plot, it uses data from a Kaggle cat breeds dataset.

May 13, 2024

Fork of Fork of Cat Data draft 5 scatter tooltip, changeable axes

This example visualizes cat breed data with two linked views. A zoomable world map on the left uses a choropleth encoding to show the number of cat breeds per country, while a scatterplot on the right plots breeds by selected attributes like life expectancy and weight. The visualization uses `d3.geoEqualEarth` and `d3.geoPath` for the map projection, and allows users to change axes via dropdown controls. It loads the cat breed dataset from Kaggle, rendering with SVG and featuring animated transitions.

May 12, 2024

Fork of Fork of Cat Data draft 2 get the classes to work

This visualization combines a choropleth map and a scatter plot to explore cat breed data. The left map displays the geographic origin of breeds, using a color scale based on the count of breeds per country. The right scatter plot compares maximum life expectancy against minimum weight for each breed. The code uses D3.js v6, specifically `d3.geoEqualEarth` for map projection and `d3.geoPath` for rendering geographic paths. Both visualizations are rendered as SVGs, with tooltips providing additional detail on hover.

Cat Data draft 4.2 demo

A dual-panel D3.js (v6) visualization explores cat breed origins. The left panel displays a zoomable and pannable world map, colored by the number of breeds per country, using `d3.geoEqualEarth` and `d3.geoPath`. The right panel is a scatterplot of breeds by maximum life expectancy and weight. The view uses an SVG renderer and includes animation for user interaction. The dataset is derived from a Kaggle cat breeds list. Popup tooltips are currently non-functional; the code also plans to add jitter to mitigate overlapping scatterplot points.

Fork of Cat Data draft 4.4 dropdown experiments

This visualization combines a zoomable world map with a scatterplot to explore the origins and physical characteristics of cat breeds. The map colors countries by the number of breeds they originate from, while the scatterplot displays each breed’s max life expectancy and weight, with dropdown menus to switch the plotted axes. The map uses `d3.geoEqualEarth` and `d3.geoPath` for projection and rendering, and the scatterplot relies on D3 scales for color and position. The tooltip is currently non-functional, but the code prepares for popups showing breed names and countries. The data comes from the Kaggle cat breeds dataset.

Bootstrap test

This example demonstrates a static blog-style layout built with the Bootstrap 3 CSS framework, featuring a sidebar with navigation and search, a main content area with sample posts, labels, badges, and a comment form. The page is constructed using Bootstrap’s grid system, navigation components, and glyphicons, while a separate stylesheet defines custom styling for color fills on generic SVG shapes (red circles and blue rectangles). However, the visualization aspect is minimal, as the code primarily showcases HTML structure and Bootstrap components rather than any interactive data-driven graphics.

Fork of Fork of Fork of Cat Data draft 3 making legend

This visualization combines a geographic choropleth map with a scatter plot to explore cat breed origins and traits. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render a projection of world data, with a threshold color scale indicating the number of breeds per country. The scatter plot uses `max_life_expectancy` and `max_weight` as axes, with each breed represented by a circle. Animated SVG transitions update the visualizations in response to data changes, and a tooltip provides additional details. The code loads data from a CSV file containing cat breed information from Kaggle.

Cat Data draft 4 legend, zoom/pan, popuptooltip

This visualization combines a choropleth map with a scatter plot to explore cat breed data. The map uses a threshold color scale to show the number of breeds per country, while the scatter plot displays maximum life expectancy against weight, with points colored by country of origin. The d3.geoEqualEarth projection renders the map, and d3.scaleThreshold maps data counts to a color palette. Interactive tooltips appear on hover, and the chart supports zoom and pan controls. The d3.v6 library handles SVG rendering and chart animations, with data sourced from a Kaggle cat breeds dataset.

Fork of Cat Data draft 4.1 popuptooltip experiments

This visualization combines a choropleth map with a scatter plot to explore cat breed data. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by breed count, while the scatter plot shows each breed's max life expectancy against max weight. Hovering over a country or data point reveals a tooltip with breed details. The code uses D3 v6 with SVG rendering and animation, and pulls from a Kaggle cat breeds dataset.

Fork of Fork of Cat Data draft 4 dot boom

A synchronized choropleth map and scatter plot visualize cat breed origins, lifespan, and weight. The map uses a `d3.geoEqualEarth` projection and threshold color scale to show breed counts by country, while the scatter plot displays jittered life expectancy against weight, colored by origin country. Both views, rendered as SVG with animation, share a tooltip. Data comes from the Kaggle Cat Breeds Details dataset, processed via React and D3 v6.

Fork of GapMinder (CP341 Style)

This example shows a GapMinder-style visualization comparing GDP per capita and average lifespan across countries from 1800 to 2008. A scatter plot on the left displays country-level data points, while a line chart on the right traces each country’s lifespan trajectory over time, with a brushable slider and continent filter. Hovering over a point highlights its corresponding line and shows a tooltip with population, income, and life expectancy. The visualization uses D3 v6 with custom scales, SVG rendering, and animation transitions to update positions smoothly. Annotations display historical facts for specific years, such as the Spanish Flu pandemic.

May 8, 2024

pre-class choropleth fork 5/7

This example combines a choropleth map with an interactive scatter plot, visualizing country-level attributes such as life expectancy, birth rate, and urbanization rate. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render geographic features, with a linear color scale encoding the selected attribute. The scatter plot supports toggling between linear and log scales for both axes via `d3.scaleLog` and `d3.scaleLinear`, with smooth transitions. Country data is parsed and matched to map features using custom name normalization in `dataProcessing.js`, all rendered in SVG using D3 v6.

May 7, 2024

Fork of Fork of Fork of Cat Data draft 3 fixing map countries

This example combines a choropleth map and a scatter plot to visualize cat breed data from Kaggle, using two side-by-side SVG elements. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by breed count, while the scatter plot plots each breed by min weight against max life expectancy, with point size derived from a custom formula. Hovering over the map reveals a tooltip with the country’s cat breeds. The visualization is built with React, D3 v6, and animated transitions.

May 7, 2024

Fork of Fork of Cat Data draft 2 get the axes to work

This visualization combines a world choropleth map with a scatter plot to explore cat breed data from Kaggle. The map uses `d3.geoEqualEarth` projection with `d3.geoPath` to render geographic boundaries, colored by the count of breeds per country using a `scaleThreshold` color scale. The scatter plot displays maximum life expectancy against minimum weight, with scatter points sized by a computed attribute. Both SVG panels render in React, with an HTML tooltip for interactivity. The visualization is built with d3.v6 and includes animated transitions between views.

Fork of Fork of Cat Data draft 2 get the map to work

This example combines a choropleth world map with a scatter plot to visualize cat breed data. The map colors countries by the number of cat breeds originating there, while the scatter plot shows each breed’s max life expectancy and min weight. It uses d3.geoEqualEarth, d3.geoPath, d3.scaleThreshold, and d3.scaleOrdinal for rendering. The code loads data from CSV files and renders two SVG elements with animated transitions, using the d3.v6 library within a React framework.

Fork of Circles 5/6

This example demonstrates a single D3.js interface that controls three independent visualizations: a numeric input resizes a circle, a dropdown changes a second circle’s fill color via transition, and a range slider adjusts the radius of four circles rendered in an SVG. Built with D3 v6, the code uses `d3.select` to target HTML elements and SVG containers, appending circles with `.attr` and applying smooth color changes via `.transition().duration()`. The dropdown options are generated using `.join('option')`, while the slider updates circle radii through an `.on('change')` event listener.

Fork of Cat Data draft 1 16:25 5/4

This example combines a choropleth map and a scatter plot to explore cat breed data, linking geographic origins to life expectancy and weight. The map uses `d3.geoEqualEarth` and `d3.geoPath` to render countries, colored by a linear scale based on data counts. The scatter plot plots `max_life_expectancy` against `min_weight`, with point size determined by a custom radius function. Both SVGs render with D3 v6, and a tooltip provides interactive details on hover.

Choropleth for countrycolor line 126

A dual-panel visualization shows the relationship between urbanization and socioeconomic indicators across countries. A choropleth map colors nations by urban population rate using a green-to-grey scale, while a scatter plot positions countries by GDP per capita against life expectancy, with point size encoding population and color distinguishing continents. The example uses D3 v6’s `d3.geoEqualEarth`, `d3.geoPath`, and `d3.scaleLinear` within a React context, rendering both SVG panels side-by-side with animated updates and a tooltip.

May 5, 2024

Fork of Fork of Choropleth 5/3

This interactive visualization pairs a choropleth map with a scatter plot to explore global health and economic indicators. The map colors countries by urban rate, while the scatter plot positions countries by life expectancy and GDP per capita, with point size encoding population and color encoding continent. The visualization uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.schemeCategory10. Hovering reveals a tooltip, and the code includes filtering for missing data values.

Fork of Cat Data draft 1 Scatterplot

This visualization combines a choropleth map and scatterplot to explore cat breed characteristics across countries. The map colors countries by origin, while the scatterplot plots maximum life expectancy against minimum weight for each breed. Built with D3.js v6, the code uses `d3.geoEqualEarth` and `d3.geoPath` for map rendering, `d3.scaleLog` for the y-axis, and SVG elements with tooltips. Data comes from CSV files containing breed attributes and geographic mappings.

Fork of Choropleth for Scatter Ref

This example combines a choropleth map with a scatter plot to explore country-level data. The map uses a green-to-grey color scale to show urbanization rates, while the scatter plot compares life expectancy against GDP per capita, with point size encoding population and color encoding continent. Built with React and D3 v6, the visualization renders as two separate SVG elements side by side. It uses d3.geoEqualEarth and d3.geoPath for the map, plus d3.scaleLinear and d3.scaleOrdinal for the visual channels, with a mouseover tooltip for interactivity.

Choropleth Scatterplot Ref

This example combines a choropleth map and scatterplot to compare country-level attributes, with the map color encoding urbanization rate (green to grey) while the scatterplot plots cat breed minimum weights against maximum life expectancies. The visualization uses two separate SVGs within a single container, employing `d3.geoEqualEarth` and `d3.geoPath` for the map projection, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for color encoding, and includes mouseover tooltips. Data comes from a CSV of cat breeds joined to country geometries, with the map colored by matching country names and the scatterplot sized by a fixed radius.

Fork of Cat Data draft 1 Scatterplot

This example combines a choropleth map and an animated scatterplot to explore cat breed data, linking geographic origin to life expectancy and weight. The map colors countries by average maximum lifespan using a linear scale, while the scatterplot plots each breed’s max life expectancy against minimum weight, with point size representing population. Built with React and D3 v6, it uses `d3.geoEqualEarth()` projections, `d3.geoPath`, linear and log scales, and SVG rendering. A tooltip provides additional detail on hover.

Checking for Ampersands

Two SVG canvases demonstrate D3 data joins and selections. One canvas shows circles appended with fixed attributes, while the other begins with hard-coded rectangles that are re-selected, recolored red, and repositioned. The example then binds a small array of country weight objects to empty selections, joining circles whose radius and x-position derive from data properties. D3’s `select`, `selectAll`, `data`, `join`, and `attr` methods handle the DOM updates, with data transformations like doubling weights performed in plain JavaScript before rendering.

Fork of Cat Data draft 1

This fork of Cat Data draft 1 presents a side-by-side visualization of feline characteristics, combining a geographic map with a scatter plot. The map uses a d3.geoEqualEarth projection and d3.geoPath to color countries by the urban rate of cat breeds originating there, while the scatter plot maps life expectancy against GDP per capita, with point size reflecting population and color indicating continent. Built with React and D3 v6, it renders as SVG and includes interactive tooltips for data inspection.

Type Table

This example visualizes a table of DPC website publication data, displaying monthly price changes across twelve time periods. Rows are sorted alphabetically by website name, while columns represent recent months in descending order. Cell background colors encode the magnitude of change, using a quartile-based color scale that ranges from red for low values through yellow to green for high values. The visualization uses D3.js, loading CSV data via `d3.csv`, grouping with `d3.group`, and building the HTML table dynamically with D3 selections. A custom menu component enables frequency selection.

Cat Data

This example shows a dual-view visualization of cat breeds, combining a choropleth map of countries by urbanization rate with a scatter plot of life expectancy against GDP per capita, colored by continent and sized by population. The map uses `d3.geoPath` with a `d3.geoEqualEarth` projection, while the scatter plot uses `d3.scaleLinear` and `d3.scaleLog`. Hovering over data points triggers a tooltip, and animated transitions update both views. The code loads data from a CSV and renders with SVG, handling missing values gracefully.

Fork of Choropleth 5/3

A linked choropleth map and scatter plot explore global development metrics across countries. The map colors nations by urban population rate, while the scatter plot plots life expectancy against GDP per capita, sized by population and colored by continent. Hovering reveals a tooltip. The code uses D3 v6 APIs including `d3.geoEqualEarth` and `d3.geoPath` for map projection, `d3.scaleLinear` for continuous color and position scales, and `d3.scaleOrdinal` for categorical continent colors, with SVG rendering and CSS-based tooltips.

Fork of Choropleth 5/3

This fork of a choropleth map and scatter plot visualizes country-level data, encoding attributes like urbanization rate, life expectancy, GDP per capita, and population. The map uses a green-to-grey color scale via `d3.scaleLinear`, while the scatter plot uses `d3.scaleOrdinal` with the Category 10 scheme for continents. Both SVG elements are rendered side-by-side within a React application, using `d3.geoEqualEarth` for the map projection and `d3.geoPath` to draw country boundaries. A tooltip div appears on hover, and the layout includes adjustable linear scales for the plot axes.

Fork of Interactive Stacked Bar Chart

This interactive stacked bar chart visualizes the estimated religious breakdown of the 20 most populous countries in 2010, with data from the Pew Research Center. Hovering over the color legend highlights the corresponding religion across all countries, dimming other segments and applying a stroke to emphasize the selected category. The visualization uses D3's `scaleOrdinal`, `scaleLinear`, `scaleBand`, `stack`, and `flatRollup` to process and render the data. Interactive behavior is implemented through mouseenter and mouseleave events that update the hovered color value in the state.

May 2, 2024

Fork of Chloropleth

This fork of a choropleth visualization displays global country data using two side-by-side SVG panels. The left panel renders a world map with an equal Earth projection, coloring countries by their birth rate through a linear blue-to-red scale via `d3.geoPath` and `d3.scaleLinear`. The right panel is a scatterplot intended to show relationships between variables like fertility rate and life expectancy, though its rendering code is commented out. The example demonstrates D3 v6’s map projection and spatial path generation within a React framework.

May 2, 2024

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths using a linked-view design, combining a bubble map with a date histogram. The map projects city coordinates using a transverse Mercator projection onto country boundaries and graticules, while the histogram shows the temporal distribution of casualties. Users can brush over the time axis to filter the map's bubbles, which scale in radius based on the square root of the death count. The visualization uses `d3.geoPath`, `d3.scaleSqrt`, and `d3.brushX` within a React framework, pulling data from a CSV of missing migrants and TopoJSON country boundaries.

Fork of Circles

This example demonstrates mapping U.S. states from TopoJSON data, coloring California red and other states blue. It uses `d3.json` to fetch the data, `topojson.feature` to convert it to GeoJSON, and `d3.geoPath` to render the shapes as SVG paths. The code also includes ES6 module imports from local files and from D3, and appends SVG title elements with click handlers.

Map

A map-style scatterplot displays colored circles of varying sizes positioned over an SVG canvas, with click interactions that alert the name of each data point. Built with D3 v5, the visualization uses `selectAll` and data joins to bind an array of coordinate objects to circle elements. Local ES6 modules and D3 imports are demonstrated alongside styling via external CSS.

Data Joins

This example demonstrates D3 data joins by binding a dataset of country-weight pairs to SVG elements across two canvases. It starts by selecting and restyling existing rectangles with D3’s `select` and `attr`, then appends circles manually before using `data()` and `join()` to automatically create new circles mapped from the array’s `size` and `weight` values. The code also shows data transformation with `forEach`, grouping countries into weight arrays, and renders everything as SVG in a React setup using D3 v7.

Cars Scatterplot

This scatterplot visualizes the relationship between the number of collected volumes and approximate sales for best-selling manga series. Each circle represents a manga title, with the x-axis showing collected volumes and the y-axis showing sales in millions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the data and render axes. The SVG circles are styled with red fill and partial opacity, and the chart includes labeled axes and a title. Data comes from the provided CSV file.

Scatterplot

This scatterplot visualization displays the top 10 most populous countries, with each data point representing a country's total population. The chart uses a linear scale for the population values on the x-axis and a categorical point scale for the country names on the y-axis. Built with d3.v5, the code employs `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` from the d3 library to construct the chart. Population data comes from the United Nations World Population Prospects 2017, loaded via d3's `csv` function, and is rendered as SVG circles.

Fork of Fork of Making a Bar Chart

This bar chart visualizes the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses a linear scale for the population axis and a band scale for the country labels, with the D3 `axisLeft` and `axisBottom` APIs rendering the axes. The code imports specific D3 v5 functions such as `scaleLinear`, `scaleBand`, and `axisBottom`, and applies a custom tick formatter to display values in billions and trillions. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual figures.

Fork of Fork of Fork of Scatterplot for peng bird dataset

This example displays a scatterplot of country-level data from the World Data 2023 CSV, mapping birth rate against calling code, with circle radius representing infant mortality. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. SVG circles are generated with d3.selectAll and joined data, filled with a single teal color. The chart includes mouseenter event handlers that log the data point to the console, though no tooltip or interactivity is visible in the rendered output.

Ben Fork of Scatterplot for peng bird dataset

This example shows a scatterplot of the world-data-2023 dataset, where each circle represents a country, with horizontal position mapped to birth rate and vertical position to calling code. Circle radius encodes infant mortality rate. The visualization uses d3.csv to load the data and d3.scaleLinear with d3.axisBottom and d3.axisLeft to render the axes. Points are drawn as SVG circles with a mouseenter event logging data to the console. The chart is built with d3.v6 and rendered using SVG.

Fork of Fork of Circles with D3

This example shows a collection of semi-transparent, colored circles rendered on a mint-green background using D3.js. The visualization uses D3's method-chaining and general update pattern to bind circle data—including coordinates, radius, and fill color—to SVG elements. The code demonstrates D3's `select`, `selectAll`, and `join` functions to create the SVG container, while a tooltip element changes its text on mouseover. Interactive behavior includes console logging of a circle's name on click, illustrating D3 event handling.

Fork of Fork of Circles with D3

Fork of Fork of Circles with D3

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes and data binding using D3.js. It appends two circles and three rectangles to an SVG container, with the rectangle heights determined by values from a hardcoded array. The code uses `d3.select` to access the SVG element and `append` functions to create visual elements. Interactive behavior is added by attaching `onclick` handlers to the rectangles via the browser's `querySelectorAll` and `setAttribute` methods.

Fork of Circles

Seven colored circles of varying sizes and positions render as an SVG. The visualization uses D3 v5’s `select`, `selectAll`, and `join` to bind an array of circle objects, setting each circle’s `cx`, `cy`, `r`, `fill`, and a uniform opacity via `.attr`. Clicking any circle triggers an `alert` displaying the circle’s `name`, if defined, using a D3 event listener.

Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the distribution of manga demographics (such as Shōnen, Seinen, and Shōjo) across publication start years, using data from a custom CSV file. Hovering over the color legend highlights the corresponding demographic segments within the bars. The visualization is built with D3.js, employing `flatRollup` and `stack` to aggregate and stack the data, while a `scaleOrdinal` with `schemeCategory10` assigns colors. The `colorLegend` component manages the interactive highlighting, adjusting opacity and stroke width for the selected category.

Apr 29, 2024

Fork of ICE -6 Scatterplot

This scatter plot visualizes the relationship between study hours and total marks for students, where each point represents an individual's performance. The visualization uses the Plotly.js library via its `Plotly.newPlot` API to render an interactive chart, fetching its data asynchronously from a remote CSV file hosted on GitHub Gists. The plot shows study hours on the x-axis and total marks on the y-axis, with green markers sized at 8 pixels, and includes customized axis ranges and tick intervals for clearer data presentation.

Apr 29, 2024