Skip to main content
Log in
M

mihir2709

@mihir2709·6 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository Auto MPG dataset, allowing users to dynamically select which columns map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for scaling, and `d3.axisLeft` and `d3.axisBottom` for axes. Each selection triggers a re-render where circles transition smoothly over two seconds into their new positions using `transition.attr`. The SVG-rendered plot features red, semi-transparent points and labeled axes that update to reflect the chosen variables.

Jul 31, 2020
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy category using an ordinal color scale derived from the World Atlas TopoJSON dataset, which is joined with tab-separated metadata. The visualization uses d3.geoPath with a Natural Earth projection and supports zooming via d3.zoom. A custom color legend, built with SVG circles and text, displays the color scale categories. Countries are interactive, showing their name and economy group in a tooltip on hover, with a red highlight effect.

Jul 30, 2020
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays a world map using the Natural Earth projection, with countries rendered in light green against a blue sphere backdrop. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON features using the topojson library. The map is drawn with D3.js v5’s geoPath and geoNaturalEarth1 projection functions onto an SVG canvas. A simple stylesheet defines the color scheme, while the map appears static without interactions or tooltips.

Jul 21, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, measured in degrees Celsius, over time. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for grid lines and labels, and a `line` generator with `curveBasis` to smooth the temperature curve. The data is loaded from a CSV file hosted on VizHub, sourced from the Data Canvas - Sense Your City project. The chart includes axis labels, a title, and a maroon smoothed line to show temperature fluctuations.

Jul 15, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5, with its eyebrows animating upward and back down in a continuous loop. The visualization demonstrates fundamental DOM manipulation by building the face from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses `d3.select` and `d3.arc` to construct elements, while chained `transition` calls with a 2000-millisecond duration animate the eyebrow group's transform. The resulting animation repeats, showcasing how D3's data-driven approach applies to static and dynamic visual elements.

Jul 6, 2020
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using D3.js v5, with its eyebrows animating upward and back down in a continuous loop. The visualization demonstrates fundamental DOM manipulation by building the face from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses `d3.select` and `d3.arc` to construct elements, while chained `transition` calls with a 2000-millisecond duration animate the eyebrow group's transform. The resulting animation repeats, showcasing how D3's data-driven approach applies to static and dynamic visual elements.

Jul 5, 2020