wenleicao

Mass Crime Map with circle size corresponding to crime total count

This map shows the total crime count for each township in Massachusetts, with circle size proportionally scaled to the crime total using d3.scaleSqrt. The visualization combines town boundary paths rendered via d3.geoPath with a d3.geoAlbers projection, overlaid with crime data points positioned by longitude and latitude. Tooltips display city name, county name, and formatted crime counts. The crime data originates from FBI 2016 statistics, while geographic boundaries come from MassGIS shapefiles converted to Topojson. The visualization is built with React, D3 v5, and SVG rendering.

Oct 27, 2019

Mass Crime Map with circle size corresponding to crime/population ratio

This map of Massachusetts towns shows crime rates as circles overlaid on geographic boundaries, with circle size scaled to each town's crime-to-population ratio. Using React and D3 v5, the visualization projects GeoJSON features onto an SVG canvas via d3.geoPath with a geoAlbers projection, while d3.scaleSqrt maps crime rates to circle radii. Crime data comes from the FBI’s 2016 table, and geographical boundaries derive from MassGIS shapefiles converted to TopoJSON. Hovering reveals city, county, and exact crime rate in the tooltip.

Oct 27, 2019

Massachusetts safe town/city selector by county and community

This interactive visualization helps users select safe towns and cities across Massachusetts by filtering crime data by county or community type. The map displays the top five lowest crime-rate areas for any chosen selection, with circle size proportional to crime ratio and hover tooltips revealing additional details. Built with React and D3, the visualization uses d3.geoPath with a geoAlbers projection to render Massachusetts county boundaries from TopoJSON data, while d3.scaleSqrt sizes the crime-rate circles over the state map. Crime statistics come from a 2016 Massachusetts crime dataset.

Oct 27, 2019

Massachusetts Chrolopleth map with interactive legend

This interactive choropleth map of Massachusetts displays county boundaries, with each town colored according to its county. A legend on the right uses an ordinal color scale and responds to mouse hover, dimming non-matching map regions and highlighting the selected county. Built with React and D3 v5, it uses `d3.geoAlbers` and `d3.geoPath` to project and render TopoJSON features converted from Massachusetts town boundary shapefiles via mapshaper. County assignments come from a CSV mapping file, and the legend uses `d3.scaleOrdinal` for color encoding.

Oct 23, 2019

Massachusetts Chrolopleth map with interactive legend

This choropleth map shows Massachusetts town boundaries colored by county, with an interactive legend that highlights matching regions on hover. The visualization uses React with d3.v5, including `d3.geoAlbers` for projection and `d3.geoPath` for rendering SVG paths from TopoJSON data. A CSV file maps towns to counties, and the legend employs `d3.scaleOrdinal` with a custom `ColorLegend` component. Hovering a legend value dims non-matching towns via reduced opacity while brightening the selected county.

Oct 22, 2019

Massachusetts Chrolopleth map with interactive legend

A choropleth map of Massachusetts displays town boundaries colored by county, with an interactive legend that highlights towns in the selected county on mouse hover. Built with React and D3 v5, it uses `d3.geoAlbers` projection with custom rotation and scale via `d3.geoPath` for rendering SVG paths. The legend, implemented with HTML circles and text, updates a hovered value state to filter which towns receive the highlight. Town-county mappings come from a CSV, with geoJSON spatial data from a gist.

Oct 22, 2019

Massachusetts Chrolopleth map

This choropleth map of Massachusetts displays town boundaries and highlights the town of Worcester in red, with the state’s counties distinguished by a categorical color scale. The visualization uses a React-based SVG renderer with D3’s `geoAlbers` projection, `geoPath`, and `scaleOrdinal` for color mapping. Town-to-county associations come from a CSV file loaded via `d3.csv`, while geographic boundaries are derived from a TopoJSON file parsed using `topojson.feature`. The map shows only one town colored, leaving remaining towns white.

Oct 21, 2019

Massachusetts Chrolopleth map add legend

This choropleth map displays Massachusetts towns colored by county, with a color legend positioned on the left side of the canvas. The map uses a geoAlbers projection centered on the state and renders each town as an SVG path with a stroke. County assignments come from a CSV file that maps towns to counties, while the geographic boundaries come from a TopoJSON file. The ordinal color scale assigns distinct colors to each county, and the legend lists its domain values vertically. The visualization is built with React and D3 v5, using d3.geoPath for geometry and d3.scaleOrdinal for coloring.

Oct 19, 2019

Map with Selectable Countries

This interactive map colors countries by economic classification using a spectral color scale. Users can click a country to highlight it while dimming all others, with the legend providing a color-coded key that is also clickable for filtering. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering, TopoJSON data from the World Atlas, and an SVG canvas. Zoom and pan functionality is implemented via D3's `zoom` event, with country coordinates sourced from TSV data.

Oct 18, 2019

Massachusetts Chrolopleth map

This choropleth map displays the counties of Massachusetts, with each town colored according to its assigned county via a categorical color scale. A conic conformal projection (d3.geoConicConformal) is used to render the state’s boundaries, while d3.geoPath draws the polygons from a TopoJSON source. Town-to-county mappings are loaded from a CSV file, and the color scale is a d3.scaleOrdinal. The visualization is built with React, using d3.v5 for geographic and data processing, and outputs as SVG paths.

Oct 17, 2019

Mass Map 3 add points

This visualization shows a map of Massachusetts with individual crime locations overlaid as small circular points. The map uses the `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON data. Crime data is loaded from a CSV using `d3.csv`, with each record plotted via `projection([d.lon, d.lat])` into SVG circle elements. The React component structure manages loading states and renders the map with `d3`-powered geographic utilities, displaying points with a distinct fill color against the state's geometry.

Oct 15, 2019

Mass Map Chrolopleth map

This example displays a purple choropleth map of Massachusetts, enlarged to emphasize the state's geometry. The map is rendered using SVG paths, with the projection configured through D3’s `geoAlbers` and `geoPath` functions, which use specific center, rotation, and parallels to zoom in on the region. The geographic data is loaded from a remote JSON file, and the map is built within a React application.

Oct 15, 2019

Mass Map Chrolopleth map

This example displays a choropleth map of Massachusetts, with each county rendered as a purple SVG path. The map uses a custom `d3.geoAlbers` projection, centered and rotated to focus on the state, with a high scale factor for magnification. County boundaries are drawn from TopoJSON data using `d3.geoPath` and `topojson.feature`. The visualization is built with React, which loads the geographic data asynchronously and passes it to SVG path elements.

Oct 15, 2019

Massachusetts safe town/city selector by county and community

This interactive map of Massachusetts filters towns and cities by county and community type, displaying the five lowest crime rates as purple circles over an SVG geographic projection. Users select from dropdown menus, which update the map through React state. The visualization uses D3 v5’s `geoAlbers` projection, `geoPath`, and `scaleSqrt` for circle sizing, with crime data from a 2016 Massachusetts dataset and geographic outlines from TopoJSON.

Oct 13, 2019

Massachussetts Top 10 Crime City filter works

This interactive bar chart shows the top 10 cities in Massachusetts by crime rate, with a dropdown menu filtering results by community type (All, City, Rural, or Suburb). The visualization uses React to manage state and render the dropdown, while d3.scaleBand and d3.scaleLinear handle the axes and bar positioning. Crime data comes from a CSV file loaded via d3.csv, with each bar displaying a tooltip showing the exact crime ratio. The y-axis labels are formatted as percentages using d3.format, and the SVG rendering includes gridlines and axis ticks styled with CSS classes.

Oct 12, 2019

Mass Crime Map with circle size corresponding to crime/population ratio

This example displays a choropleth-style map of Massachusetts where each circle’s radius encodes the crime-to-population ratio, allowing quick comparison of crime rates across counties. The map uses a `geoAlbers` projection with `geoPath` to render the state boundary, while circles are positioned via `projection` and sized with `scaleSqrt`. Data comes from a CSV file and a TopoJSON file, loaded using `d3.csv` and `d3.json`. The visualization is built with React and D3 v5, rendering in SVG.

Oct 12, 2019

Massachussetts Top 10 Crime City filter works before adjust axis

This interactive visualization displays the top 10 cities in Massachusetts by crime rate, filtered by community type (city, rural, or suburb) through a dropdown menu. Built with React and D3 v5, it renders an SVG bar chart using `scaleBand` and `scaleLinear` to map city names and crime ratios. The bars show tooltips with formatted percentage values, and the y-axis uses `d3.format` for readability. Data comes from a 2016 Massachusetts crime dataset loaded via `d3.csv`. The author notes unresolved issues with axis alignment and label rotation.

Massachussetts Top 10 Crime City filter works

A dropdown menu filters a bar chart of the top 10 cities in Massachusetts by crime rate, comparing All, City, Rural, and Suburb community types. The bars display the crime ratio as a percentage, with hover tooltips showing exact values. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `csv` to load and visualize 2016 crime data, with SVG rendering for the chart and axes.

Massachussetts Top 10 Crime City filter works

This interactive bar chart displays the crime rates of Massachusetts cities, filterable by community type (All, City, Rural, Suburb) via a dropdown menu. Built with React and D3 v5, it renders an SVG visualization where each bar shows the crime rate as a percentage. The chart loads data from a CSV file containing 2016 crime statistics, using D3's `csv`, `scaleBand`, `scaleLinear`, and `format` functions for data processing and axis scaling. The top 10 cities are displayed by default, with tooltips revealing precise percentage values.

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Oct 10, 2019

Mass Crime Map with circle size corresponding to crime total count

A choropleth map of Massachusetts overlays crime data as scaled circles, with each circle's radius proportional to the total crime count per location. The visualization uses a React component with D3 v5’s `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON, while circles are positioned via the same projection and sized with a `scaleSqrt` function. Crime statistics are loaded from a CSV file, and the SVG rendering is handled through D3 selections within the React framework.

Oct 6, 2019

Mass Map 3 add points

Oct 6, 2019

Massachusetts City Population by Crime Rate (Final Project)

This scatter plot compares Massachusetts city populations and crime rates, with each circle representing a city colored by county. The visualization reveals that cities with similar population ranges, such as New Bedford and Fall River, exhibit higher burglary rates compared to peers. Built with the vega-lite-api, it uses d3.csv to load crime data from a gist, applies a logarithmic population scale, and includes tooltips for county, city, population, and crime rate details. The config.js file customizes axis styling and typography for improved readability.

Mass Map 2

This map displays Massachusetts school districts as geographic regions, using an equal Earth projection to draw each district boundary. The visualization loads TopoJSON data from a GitHub source, then converts it to GeoJSON using the `feature` function before rendering paths with `d3.geoPath`. The map is built with React components and D3 v5, with SVG paths styled using teal strokes and fills from the associated CSS file.

Massachusetts Crime Proportion by Community (final project)

This visualization shows the proportion of different crime types across Massachusetts communities, using a stacked, normalized bar chart to compare relative shares. Rural areas exhibit more burglary, while cities show higher rates of robbery, motor vehicle theft, and violent crime. Built with vega-lite-api on d3.v5, it loads CSV data from a GitHub gist, aggregates crime counts by community and type, and renders horizontal bars with tableau20 color coding. The config adjusts font sizes and axis styling, while vega-tooltip provides interactive crime-type and count details on hover.

Centered US Choropleths Map

A choropleth map of US states displays state-level rates using a green color scale, with state boundaries from the US Atlas TopoJSON and state rate data from a TSV file. The visualization uses React with D3’s `geoAlbers` projection and `geoPath` to render SVG paths, applying a `d3.scaleThreshold` color lookup based on each state’s rate. The map includes a sphere background and interior state borders, with loading handled via `Promise.all` to fetch both TopoJSON and TSV data.

Mass Map 3

A choropleth of Massachusetts is rendered as an enlarged SVG map using a custom d3.geoAlbers projection with adjusted center, rotation, and parallels for regional focus. The code loads TopoJSON from a GitHub gist, converts it to GeoJSON via topojson.feature, and draws each polygon with d3.geoPath. Individual county paths appear in white with teal strokes, emphasizing the state’s borders. The React app fetches and displays the map within a fixed 960×500 viewport, providing a clean, minimalist view of the geography.

Mass Map 2

This example renders a choropleth map of Massachusetts using the Albers equal-area conic projection. It displays the state’s geographic boundaries as SVG paths, colored with a teal stroke and fill. The visualization uses React to manage state and rendering, calling `d3.geoPath` with `d3.geoAlbers` to project the GeoJSON data fetched from a GitHub gist via `d3.json`. The `topojson` library’s `feature` function converts the TopoJSON structure into GeoJSON features for plotting.

Massachusetts Crime Proportion by Community

This example visualizes the proportion of different crime types across Massachusetts communities using a 100% stacked bar chart. Each bar represents a community type, with segments showing the normalized share of burglary, robbery, motor vehicle theft, and violent crime. The chart reveals that rural areas have a higher proportion of burglary, while cities show more robbery and motor vehicle theft. Built with d3.v5, the visualization uses the vega-lite-api to aggregate crime counts by community and crime type, with data loaded from a CSV via d3.csv. The view is rendered as an SVG, with customized axis and label styling for improved readability.

Oct 2, 2019

Insurance charge in differnet US area

This visualization displays the average medical insurance charges across four U.S. regions, revealing that the Southeast has the highest average charge. The chart encodes region on the x-axis and the mean of the `charges` field on the y-axis, with tooltips showing the region name on hover. Built with Vega-Lite API on top of d3.v5, it uses the `markArea` mark for a single colored band per region and applies a custom dark theme from the config file. Data is loaded asynchronously from a remote CSV of medical cost records via d3's `csv` function.

Oct 2, 2019

Massachussetts Top 10 Crime City filter works

This example displays the top 10 Massachusetts cities by crime rate, presented as a bar chart with a dropdown menu to filter by community type (all, city, rural, or suburb). The visualization uses React for state management and D3 v5’s `scaleBand` and `scaleLinear` for axes, with data from a 2016 crime dataset loaded via `d3.csv`. The dropdown is implemented with `react-dropdown`, and selecting an option updates the chart, though the filtering logic is incomplete. SVG rendering with tick marks and formatting via `d3.format` displays percentages on the y-axis.

Oct 2, 2019

Massachussetts Top 10 Crime City add filter

A bar chart displays the top 10 Massachusetts cities by crime rate, filtered by community type (all, city, rural, suburb). The visualization uses React with D3 v5's `scaleLinear`, `scaleBand`, and `format` to render SVG rectangles. Crime ratio data comes from a CSV of the 2016 Massachusetts crime dataset. A Dropdown component controls the community filter, re-filtering the data and updating the chart dynamically.

Oct 1, 2019

Massachussetts Top 10 Crime City by Crime Count/Population

This interactive bar chart visualizes the top 10 Massachusetts cities by crime count relative to population. Built with React and D3 v5, it renders an SVG that displays the crime ratio as a percentage on the y-axis, with city names along the x-axis. The visualization utilizes `scaleBand` and `scaleLinear` for coordinate mapping, while `csv` loads the 2016 crime dataset from a GitHub gist. Hovering over each bar reveals the exact crime ratio via a `title` tooltip, filtering the data to rural communities.

Oct 1, 2019

Polished Massachussetts Top 10 Crime City add filter

A dropdown menu filters a bar chart of the top 10 Massachusetts cities by crime rate, showing the percentage for either all communities or only city, rural, or suburb types. The SVG chart uses d3.scaleBand and d3.scaleLinear to position bars, with d3.axis formatting for tick labels. Data comes from a CSV file loaded via d3.csv, and the interface is built with React components and ReactDropdown.

Sep 30, 2019

Massachussetts Top 10 Crime City by Crime Count/Population

This bar chart displays the top 10 Massachusetts cities by crime rate, calculated as the ratio of crime count to population for 2016. Users see the cities ranked along the x-axis, with each bar’s height representing its crime rate percentage. The visualization employs React and D3 v5, using `scaleBand` for the categorical axis and `scaleLinear` for the numeric scale, with SVG rendering. Data is loaded from a CSV via the `d3.csv` method, and hover tooltips show exact percentage values.

Sep 28, 2019

Polished Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset, with dropdown menus allowing the user to select which attributes appear on the x and y axes. The visualization uses React for component management and state, while D3 v5 provides scales and the CSV data loading via `d3.csv`. Points are rendered as SVG circles with tooltips, and axis ticks are generated using `xScale.ticks()` and `yScale.ticks()`. The layout uses fixed dimensions and margins, with axis labels updating dynamically based on the selected attributes.

Sep 28, 2019

annoted Menus with React

This example demonstrates a dropdown menu for selecting a pet, with the chosen option displayed in the selection field. Built with React, it uses the `useState` hook to track the selected value, initializing it to `hamster`. The `Dropdown` component maps over an options array to render `<option>` elements, marking the current selection with the `selected` attribute. React DOM renders the app into the root element, and the console logs each state change for inspection.

Sep 28, 2019

Camera Dataset

This example loads a camera dataset from a remote CSV file and displays basic summary statistics: file size in kilobytes, row count, and column count. The visualization is intentionally minimal, showing only text in a large <pre> element. It uses the D3 v5 library, specifically the `d3.csv` method to parse the data and `d3.csvFormat` to measure the raw CSV length. The code also includes commented alternatives using the Fetch API with `async/await` and nested promises, demonstrating different approaches to asynchronous data loading. The dataset contains camera specifications such as model, release date, resolution, zoom range, weight, and price.

Sep 27, 2019

Massachussetts Top 10 Crime city Refactor Code

This example presents a bar chart of the top 10 Massachusetts cities by crime ratio, using data from a 2016 city crime population dataset. The chart displays crime ratios as vertical bars without axes, showing values through a y-axis scale and city names as x-axis labels. Built with React for component rendering and D3 v5 for data loading and scaling, it uses `scaleLinear` and `scaleBand` to map coordinates, while rendering the visualization as SVG elements.

Sep 24, 2019

Massachussetts Top 10 Crime city with margin and axis

This visualization displays the top 10 Massachusetts cities by crime rate using a vertical bar chart with axes. The bars show each city’s crime ratio from a 2016 dataset, ordered by descending value. Built with React and D3 v5, the code uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `csv` to load data from a GitHub gist. SVG rendering draws gridlines, tick labels, and rectangles, with margins separating the axes from the plot area.

Sep 24, 2019

Use my own Mass Crime data

This example visualizes the ten highest-crime cities in Massachusetts as a simple column chart, with bars sized proportionally to each city’s crime ratio. The chart uses `d3.csv` to load the 2016 city crime dataset and `d3.scaleLinear` and `d3.scaleBand` for positioning, while rendering bars as SVG `<rect>` elements via React. The visualization omits axes and labels, focusing solely on the relative bar heights to compare crime rates across the selected cities.

Sep 22, 2019

Convert Curran's Bar chart to Column Chart

This example displays the top 10 most populous countries as vertical bars, using a column chart format without axes or labels. The visualization loads population data from the United Nations World Population Prospects 2019 dataset via a CSV file. The React component fetches and processes the data with `d3.csv`, then renders SVG rectangles positioned using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The chart is built with d3.v5 and React 16.9, and the bar heights correspond to each country's 2020 population figures.

Sep 22, 2019

Annotated Stylized Bar Chart

This example presents the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The visualization uses React with D3.js v5 utilities, employing `d3.scaleBand` for categorical y-axis positioning and `d3.scaleLinear` for the x-axis population scale. Each bar is rendered as an SVG rectangle with a tooltip showing the formatted population value, and custom Poppins typography styles the axes and labels.

Sep 22, 2019

Massachusetts crime count by community

This visualization compares crime type distributions across Massachusetts communities using a small-multiple bar chart, with each panel representing a community type (city, suburban, or rural) and bars encoding logged crime counts for categories like burglary and property crime. The data is aggregated via `vl.aggregate` and grouped by community and crime type, then rendered with `vl.markBar`, using VEGA-Lite alongside D3 for CSV loading and Vega Tooltip for hover details. The logged y-axis reveals proportionally higher property crimes in rural areas despite lower absolute counts.

Sep 18, 2019

Smiley Face Part I

This example renders a smiley face using React and D3 version 5. The face is composed of SVG circles for the yellow head, eyes, and red nose, with a black stroke outline. A mouth is drawn using the `d3.arc` generator with configured inner and outer radii and angular extents. All shapes are positioned relative to a central point using a group transform, and the layout adapts to fixed width and height dimensions.

Sep 18, 2019

Massachusetts City Population by Burglary

This example plots Massachusetts cities as points on a scatterplot, with burglary counts on the x-axis and population on a logarithmic y-axis. It reveals that among similarly populated cities, New Bedford and Fall River experience notably higher burglary rates. The visualization is built with the vega-lite-api, which registers Vega and Vega-Lite, and uses d3.csv to load the crime dataset from a GitHub gist. Custom axis styling and tooltips are configured through Vega-Lite’s API, with points colored by city and rendered via SVG.

Sep 17, 2019

Camera Max Resolution Vesus Price

A scatter plot compares camera price and maximum resolution, using circular marks to reveal that no simple relationship exists between the two—many factors influence cost. The visualization, built with Vega-Lite API and D3, loads camera data from a GitHub CSV and encodes price on the x-axis, resolution on the y-axis, and model as color, with tooltips for details. The plot is rendered dynamically, filling the browser window.

Sep 17, 2019

BMI in different US Region and Comparison Between Smoker/Nonsmoker

This example visualizes average BMI across US regions, split by smoker status, using a faceted bar chart. The chart shows that the southeast region has the highest BMI, while smokers do not necessarily have higher BMIs than nonsmokers. The visualization is built with Vega-Lite API and D3, reading data from a CSV file. It uses aggregated bar marks, with region as columns, smoker status on the x-axis, and average BMI on the y-axis, with tooltips for detailed values.

Sep 17, 2019

Massachusetts Crime Dataset

This example displays the size and structure of the Massachusetts Crime Dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads the CSV from a GitHub gist using D3 v5’s `d3.csv` method, which parses the data into an array of objects. The code then uses `d3.csvFormat` to re-serialize the data for size calculation and accesses the `length` and `columns` properties to count rows and fields. The resulting information is rendered into a large `<pre>` element using plain text manipulation via the Document Object Model.

Aug 31, 2019

Medical Cost Data

This example summarizes a medical cost dataset loaded from a CSV file, displaying its size in kilobytes, row count, and column count in a large text element. It uses D3 v5’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to measure the data size. The code also includes commented-out alternatives using `fetch` with `async/await` and a nested promise chain to illustrate different loading patterns.

Aug 30, 2019