MyCode

@striver13·6 public vizzes

Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale to distinguish categories. Built with D3 v5, it renders geographic boundaries as SVG paths via the `geoPath` projection. The visualization includes an interactive color legend generated with a custom `colorLegend` module, and supports zooming through D3's `zoom` event. Data merges TopoJSON country shapes with a TSV containing economy classifications from the world-atlas package.

Apr 17, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses D3 v5 to visualize the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus allow users to select which numeric columns map to the X and Y axes, with the plot updating through D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. SVG circles represent individual cars, animating to their new positions over two seconds via `transition().duration(2000)` and staggered delays. The code demonstrates reusable functions for the dropdown menu and the scatter plot, with axis labels dynamically reflecting the selected columns.

Apr 15, 2019

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, with the x-axis representing years and the y-axis showing population counts labeled in billions. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed filled region, and `axisBottom` and `axisLeft` with custom tick formatting. Data is loaded via `csv` from a VizHub dataset, with population values parsed as numbers and years as dates.

Apr 13, 2019

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, sourced from a World Population by Year 2015 dataset. The SVG visualization uses d3.area with a curveBasis to create a smooth maroon region, while d3.scaleTime and d3.scaleLinear map the temporal and population axes. The chart includes gridlines via d3.axisBottom and d3.axisLeft with custom tick formatting that converts billions to "B".

Apr 13, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to draw a smooth path over the data. Data is loaded as CSV from a remote dataset, converted to JavaScript Date and numeric values, then rendered as an SVG with styled axis labels, gridlines, and a title.

Apr 13, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each circle representing a vehicle. It uses d3.scaleLinear to map the data to x and y scales, d3.axisBottom and d3.axisLeft to render the axes, and SVG circles for the points. The code loads the CSV with d3.csv, then renders the chart into a static SVG using margin-based layout.

Apr 13, 2019