himanshigoyal23

@himanshigoyal23·15 public vizzes

Fork of Polished World Map

This example renders a polished world map using the Natural Earth projection, displaying landmasses, country borders, graticules, and the sphere outline. The visualization combines React for component structure with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features. Country boundaries and land polygons come from the World Atlas TopoJSON dataset, processed via the `topojson` library’s `feature` and `mesh` functions. The map is styled with SVG paths, using teal land fills, muted graticules, and contrasting strokes for interiors, all rendered within a fixed 960×500 viewport.

Jun 18, 2021

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Auto MPG dataset, allowing users to interactively select which columns map to the X and Y axes via two dropdown menus. Built with D3 v5, the visualization renders SVG circles with a staggered transition animation, updating each point’s position as the axes change. The code uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component to enable dynamic querying of the dataset’s numeric fields.

Nov 26, 2020

Loading thumbnail…

Let's Make a Face Part I

A simple face is drawn in the center of the browser window using React and SVG, with a pink circular head, black stroke outline, and two black eyes offset symmetrically from the center. The code defines dimensions as constants (width, height, center coordinates, eye offsets, and radii) and renders the shape with React's JSX syntax inside an SVG `<g>` transform group. D3's `arc` function is imported but not used; the static circles are positioned purely through SVG attributes like `cx`, `cy`, and `r`. The example serves as a half-completed smiley, with the mouth intentionally omitted.

Oct 30, 2020

Loading thumbnail…

lets make a map with d3

This example shows a blank SVG canvas awaiting map data, loading world geography from the world-atlas TopoJSON dataset. The code initializes a d3 selection on the SVG element, extracts its width and height, and fetches the 110m resolution world data using d3.json. Though the data is logged to the console, the visualization does not yet render any map features—it demonstrates the initial setup for building a geographic projection and path generator in d3 v5.

Oct 29, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes a week of temperature data in San Francisco, using time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v5, with an orange area fill and purple stroke. The code leverages D3's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to generate the smooth area path. Data is loaded from a CSV file via `d3.csv` and parsed into a date and numeric temperature value.

Apr 22, 2020

Loading thumbnail…

Area Chart of San Fransisco

This area chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area` generator with `curveBasis`, and `axisBottom`/`axisLeft` to render the smooth filled path. Data is loaded via `csv` from an external dataset, and the SVG output includes labeled axes and a title.

Apr 22, 2020

Loading thumbnail…

Line Chart of San Fransisco

This line chart visualizes a week of temperature data in San Francisco, showing temperature on the y-axis against time on the x-axis with a smooth green curve. The chart includes labeled axes and a title, using D3 v5 APIs such as `scaleTime`, `scaleLinear`, `line`, `curveBasis`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV via `d3.csv`, with timestamps parsed as dates and temperatures as numbers. The rendered SVG also includes a yellow point marker at each data location, though no circles are explicitly appended in the code shown.

Apr 22, 2020

Loading thumbnail…

Temprature Scatter plot of San Fransisco

This scatter plot displays temperature readings over time for a week in San Francisco, with yellow circles outlined in maroon plotted against time on the x-axis and temperature on the y-axis. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render axes with grid lines, and appends circle elements to an SVG. The data originates from a CSV file hosted on VizHub, parsed with the `csv` function and mapped to `Date` and numeric temperature values.

Apr 20, 2020

Loading thumbnail…

Cars Scatter Plot!

This scatter plot visualizes the relationship between MPG and horsepower for a dataset of cars. Each pink circle represents a car, positioned according to its fuel efficiency and engine power, with axes labeled accordingly. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and loading data from a CSV file via `csv()`. The SVG rendering includes grid lines and a title, with circles styled through CSS.

Apr 20, 2020

Loading thumbnail…

Making a Scatter Plot!

This scatter plot displays the population of ten countries, using the y-axis for country names and the x-axis for population values. It visualizes the data from a CSV file, with circles representing each country. The chart is built with D3 version 5, using `scaleLinear` and `scalePoint` for axes, `axisLeft` and `axisBottom` for ticks, and custom tick formatting to abbreviate large numbers. The SVG rendering includes grid lines, axis labels, and a title, with pink circles and orange strokes.

Apr 19, 2020

Loading thumbnail…

Customizing a barchart!

This example shows a horizontal bar chart of the top 10 most populated countries, using population data loaded from a CSV file. The bars are styled with orange fills and purple strokes, and the chart includes custom axes, a title, and axis labels. The visualization uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with the x-axis tick format converting large numbers to abbreviations like “B” for billions. The SVG rendering applies margins and a translated group for layout, and population values are multiplied by 1000 to reflect the data accurately.

Apr 19, 2020

Loading thumbnail…

D3 starting-face

A yellow face with black-outlined eyes and brows animates its eyebrows upward and back down over two seconds, using D3 v5’s `transition().duration()` chaining. The SVG is centered via a `g` transform, and the mouth is drawn with `d3.arc()` using an inner and outer radius. The example demonstrates basic shape composition and animated attribute interpolation in D3.

Apr 10, 2020

Loading thumbnail…

I m Learning D3

This example displays the make of the first car from a hardcoded JSON array, rendered as text in an HTML `<pre>` element. It uses a React setup with an imported `cars.js` module that parses the JSON data, and `index.js` accesses `cars[0].make` to set the message via `document.getElementById`. The page is minimal, with SVG markup commented out, and styling in `styles.css` hides overflow.

Apr 6, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by a maximum price, output directly into an HTML page. It initially shows a "Loading..." message before presenting the cars. The code uses JavaScript modules with `import` and `export`, an array's `filter` and `map` methods to process data from a JSON string, and `Promise` with `setTimeout` to simulate an asynchronous data fetch. The DOM is updated via `document.getElementById`, with the report generated by `generateReport.js` and `formatCar.js`.

Apr 6, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain page, establishing a minimal baseline for web-based visualization projects. It uses a simple HTML document with inline CSS to set the body’s font size and text alignment, and includes a link to a React-based alternative. The page serves as a starting point for embedding charts or graphics, though it currently renders no data or interactive elements.

Mar 30, 2020