N

Navak94

@Navak94·37 public vizzes

Loading thumbnail…

nh_solar_data_map_Just_indiana_5

This interactive map displays solar energy installation data across Indiana, with each data point rendered as a yellow circle positioned by latitude and longitude, and sized proportionally to maximum wattage using d3.scaleSqrt. The visualization uses d3.geoAlbersUsa with custom scaling and translation to generate a projection, while d3.geoPath renders the county boundaries from a TopoJSON file. The React-based application loads data from a CSV file and includes dropdown menus to switch between minimum, maximum, and average wattage values, though the menu selection currently does not control the circle sizing.

Loading thumbnail…

Fork of nh_solar_data_map_Just_indiana_4

This map shows solar energy data for Indiana, with each yellow circle representing a city and its radius scaled by the city’s maximum wattage output. Built with React and D3 v5, the visualization uses `d3.geoAlbersUsa` and `d3.geoPath` to render county boundaries from a TopoJSON source, while data points are loaded from a CSV using `d3.csv`. The map is an interactive fork that includes a dropdown menu for selecting data attributes, though the menu’s filtering functionality is not yet implemented in the current code.

Loading thumbnail…

spinning_globe_NH

A spinning orthographic globe displays world countries as filled paths, rotating smoothly around a tilted axis. The visualization uses d3-geo’s `geoOrthographic` projection, `geoPath`, and `geoGraticule` to render landmasses and grid lines. Country boundaries come from the visionscarto-world-atlas TopoJSON dataset, fetched via `fetch` and converted with `topojson-client`. The animation is driven by React state updates, with rotation angles changing each frame via `requestAnimationFrame`, redrawing the map on every render.

Loading thumbnail…

nh_solar_data_map_Just_indiana_3

This visualization displays solar energy data points as a scatter plot overlaid on a map of Indiana’s counties. Each circle’s radius encodes the `watt_max` value using a square-root scale, with the state boundaries rendered in black and county interiors in gray. The map is created with `d3.geoPath` and a custom Albers projection, while the data is loaded via `d3.csv` from a GitHub repository. The visualization uses React for component management, with D3 v5 handling the geographic projections and scaling.

Loading thumbnail…

nh_solar_data_map_proof

This map plots solar energy data points across the United States, with circle size scaled to each location's watt_max value. The visualization uses a React framework with d3.geoAlbersUsa projection and d3.geoPath to render state boundaries and interiors from TopoJSON data. The solar dataset is loaded via d3.csv from a GitHub repository, and point radii are calculated using d3.scaleSqrt with a maximum radius of 8 pixels. The SVG rendering displays yellow circles over black states with gray interior borders.

Loading thumbnail…

nh_solar_data_map_Just_indiana_2

This visualization plots solar energy data points across Indiana on a county-level map, with circle size scaled by watt_max using a square-root scale. The map renders U.S. county boundaries via TopoJSON and d3.geoPath, while data loading uses d3.csv from a GitHub-hosted CSV. React manages state and rendering, with SVG circles projected through d3.geoAlbersUsa. The zoom behavior is configured with d3.zoom, and loading states display a text fallback.

Loading thumbnail…

Interactive Color Legend_With_Menu_NH_2

This interactive scatter plot displays daily solar power generation data from Kaggle, plotting maximum wattage against data point (date) for Banneker and Davies solar sites. A drop-down menu switches between sites, while a color legend highlights points by site name and dims unrelated circles on hover. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for coloring, and custom modules for axes, legend, and menu rendering. The fetched CSV data is parsed and coerced to numeric types before being plotted as circles.

Loading thumbnail…

Interactive Color Legend_With_Menu_NH

An interactive scatter plot visualizes daily solar power generation data from Kaggle, plotting maximum wattage against sequential data points. The visualization uses D3.js v7 with a dropdown menu to filter results by site, and a color legend that highlights specific data categories on hover. The implementation builds the chart from a CSV dataset, using D3's `csvParse`, `scaleLinear`, and `scaleOrdinal` APIs to render axes, circles, and interactive elements.

Loading thumbnail…

nh_solar_data_map_Just_indiana

This map displays solar energy data points across Indiana, with circle size encoding each location’s maximum watt output. The visualization uses a React framework with D3 v5, employing `geoAlbersUsa` projection and `geoPath` for rendering county boundaries from TopoJSON. City coordinates are plotted from a CSV file, with `scaleSqrt` mapping watt values to circle radii. The map highlights just Indiana’s counties in black with yellow semi-transparent data points, making regional solar capacity variations immediately visible.

Loading thumbnail…

Menu_NH_2

This example shows a dropdown menu with six pet options—dog, cat, hamster, parrot, spider, and goldfish—where changing the selection updates the application state, though no visible output reflects the current choice. The visualization is built with D3 v7, using a unidirectional data flow where a `viz` function renders the menu and a `setState` callback updates the state and triggers re-rendering. The `menu` module uses D3’s `.join()` to create the `select` and `option` elements, binding the change event to `onChange`, while the `index.js` orchestrates the state management and rendering cycle.

Loading thumbnail…

Menu_NH

A single circle follows the mouse cursor across a full-screen SVG canvas. The example uses D3 v7’s `select` and `append` methods to create the SVG and circle element, then listens for `mousemove` events on the SVG to update the circle’s `cx` and `cy` attributes with the cursor’s coordinates. The page has no margins and hides overflow, so the interaction fills the entire viewport.

Loading thumbnail…

nh_solar_data_map

This visualization displays solar energy data points across the United States, with each city’s maximum watt output represented by the size of a yellow circle overlaid on a black state map. The code uses React for component structure, d3.geoAlbersUsa and d3.geoPath for map projection and rendering, and d3.scaleSqrt to map watt values to circle radii. State boundaries and interior lines come from TopoJSON data, while city coordinates and watt measurements are loaded from a CSV file.

Loading thumbnail…

nh_solar_data_map_just_indiana

A map of the United States shows solar energy capacity data as yellow circles, with Indiana highlighted from other states. The visualization uses D3 v5 with `geoAlbersUsa` projection and `geoPath` to render state boundaries and `scaleSqrt` to size circles by maximum wattage. It loads US TopoJSON from unpkg and CSV data from GitHub, using React hooks to manage data fetching. The code filters the USAtlas to display only Indiana, though all states remain visible.

Loading thumbnail…

Fork of World Map Simple

This example displays a world map using the Natural Earth projection, with country boundaries, a graticule grid, and an outline. It loads GeoJSON data from the visionscarto world-atlas via `fetch` and converts it using `topojson.feature`. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1`, drawing paths for each country, the graticule, and the map outline. The visualization uses a React-style state management loop where data loading is triggered lazily, updating the SVG when the fetched data becomes available.

Loading thumbnail…

Interactive Color Legend_NH

This interactive scatter plot visualizes daily solar power generation data from Kaggle, showing maximum wattage on the y-axis against data point number (date) on the x-axis. Points are colored by site location using a categorical color scale, with an interactive legend that highlights or dims points when hovering over site names. The visualization uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for scales, with `axisLeft` and `axisBottom` for axes. Data is loaded and parsed from a local CSV file using `csvParse`.

Loading thumbnail…

Scatter Plot_NH_with_legend

This scatter plot visualizes daily solar power generation data from Kaggle, plotting maximum wattage on the y-axis against data point number on the x-axis. The visualization uses d3.scaleLinear to map the data values, with circles rendered at each data point. The code imports axes and scatterPlot components that leverage d3's axisLeft and axisBottom for axis generation. Data is loaded asynchronously via fetch and parsed with d3.csvParse, then converted to numeric fields before being passed to the scatter plot function.

Loading thumbnail…

World Map Simple

This example displays a scatter plot of the Iris Dataset on a world map, but the map itself is not rendered—only the data points appear. It loads geographic JSON from the visionscarto-world-atlas package, parses it with `csvParse`, and scales the sepal and petal length values using `scaleLinear` and `extent`. The visualization is drawn with D3 v7, using `selectAll` and `join` to bind circles that represent each flower sample. The code fetches the atlas data asynchronously and updates the state to trigger re-rendering.

Loading thumbnail…

Fork of project_NH_US_Map_2

A fork of a U.S. map project, this visualization plots solar energy data points as blue circles over a green state map. The code uses D3’s `geoAlbersUsa` projection and `geoPath` to render the states from a TopoJSON atlas, while the `scaleSqrt` function sizes circles based on `watt_max` values from a CSV dataset. The interactive React app loads data via `d3.csv` and `d3.json` hooks, with circles positioned by converting latitude and longitude coordinates through the projection.

Loading thumbnail…

project_NH_US_Map

This example displays a map of the United States with circles overlaid on major cities, using a square-root scale to size each circle based on the city’s population. The map is rendered with SVG paths generated by d3.geoPath, while the city coordinates are projected using d3.geoAlbersUsa. The visualization loads US state boundaries and city data from external CSV and TopoJSON sources, and is built with React and D3 v5.

Loading thumbnail…

project_nh

This example displays a globe with countries rendered in light green against a blue sphere, using SVG. The visualization leverages D3.js version 5 and TopoJSON to load and project geographic data. The code constructs the map using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, while `d3.select` and `d3.arc` handle basic DOM manipulation. It demonstrates fundamental SVG element creation and styling through D3’s selection methods, with the final output framed in a fixed 960 by 500 pixel viewport.

Loading thumbnail…

Line_graph_NH

This example visualizes daily solar power generation data from a Kaggle dataset, plotting the maximum wattage recorded at each data point (date) as a line graph. The y-axis shows watt max values while the x-axis represents the sequence of data points. The visualization uses D3 v7 with `d3.scaleTime`, `d3.scaleLinear`, and a `d3.line` generator to draw the path. Axes are rendered using D3's `axisLeft` and `axisBottom`, with CSV data loaded via `d3.csvParse` and custom SVG rendering in a full-viewport layout.

Loading thumbnail…

Scatter Plot_NH

This scatter plot visualizes daily solar power generation data from Kaggle, plotting each data point by its sequential index on the x-axis against the maximum wattage recorded on the y-axis. The visualization uses D3 v7 with `d3.scaleLinear` for both axes and `d3.axisLeft`/`d3.axisBottom` for tick marks, rendering circles with a fixed radius of 10 pixels. The data is loaded via `d3.csvParse` and includes fields such as watt_max, site location, and date.

Loading thumbnail…

Scatter Plot Simple NH

This scatter plot visualizes daily solar power generation data from a Kaggle dataset, showing the maximum wattage produced on the y-axis against the sequential data point number on the x-axis. Each circle represents a single day’s peak output from the Banneker site in Bloomington. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to map the data, with `scatterPlot` handling the circle rendering. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then converted to numeric values before plotting.

Loading thumbnail…

Marks and Channels_3_NH

This example demonstrates marks and channels by encoding a simple array of numbers (0–6) in three different ways: as bar length, circle size, and hue. It uses d3-selection and d3-scale-chromatic’s `schemeCategory10` to map each data value to a distinct color. The visualization renders seven fixed-position elements in an SVG canvas, with the length channel using `rect` elements and the size channel using `circle` elements scaled by the square root of the data. D3’s data join (`selectAll().data().join()`) updates the marks, while the `viz.js` file selectively applies the length encoding.

Loading thumbnail…

Marks and Channels_NH_2

This example visualizes daily solar energy production data from a Bloomington Parks & Recreation site by encoding wattage values through bar length. The visualization arranges seven rectangles along an x-axis, where each bar’s height corresponds to the wattage measurement for a given day. The implementation uses D3 v7 with a band scale for positioning the bars and renders them as SVG rectangles. Color is applied via the `schemeCategory10` palette, and the code structure separates the bar-drawing logic into a reusable `length` function that receives the dataset and height parameters.

Loading thumbnail…

Marks and Channels_NH

This example demonstrates how different visual channels can encode the same quantitative data. Seven circles are horizontally positioned by value, with their size, position, and color all reflecting the data. The visualization cycles through three distinct encoding methods: length, where bars of varying height represent values; size, where circles use square-root scaling for area; and hue, which assigns categorical colors from `d3.schemeCategory10`. Built with D3 v7, it uses data joins and selection methods to render the SVG marks.

Loading thumbnail…

Transforming Data_NH

This visualization demonstrates binned aggregation and data transformation techniques using D3.js (v7). It loads solar energy data from a CSV file and computes the average maximum wattage per site address using `flatRollup` and `sum` functions. The resulting summary is displayed as formatted JSON text within a `<pre>` element, showcasing how raw tabular data can be programmatically summarized. The example uses D3's `csvParse` for data parsing and `select` for DOM manipulation.

Loading thumbnail…

loading_data_NH_2_solar_data_data_transformation

This example loads a CSV of daily solar power generation data from Bloomington Parks & Rec and transforms it for analysis. The visualization initially displays the parsed data as JSON text in a `<pre>` element, showing categorical fields like address and department alongside quantitative metrics like watt_hours and latitude. It uses d3.csvParse to load the dataset, then coerces numeric columns with the unary plus operator. A d3.flatRollup operation groups records by address and counts observations, logging an array of `{address, count}` objects to the console. The code demonstrates data loading, type conversion, and aggregation before any visual rendering occurs.

Loading thumbnail…

loading_data_NH_2_stocks

This example demonstrates how daily stock trading data from the National Stock Exchange of India can be loaded and displayed as raw JSON text. The data includes categorical fields like stock symbol, series, and ISIN, alongside quantitative measures such as open, high, low, and close prices. Using d3.csvParse and d3.select, the visualization fetches a CSV file from Kaggle and converts numerical strings to numbers. The current implementation shows the parsed dataset in a preformatted block, with a loading state indicated before data arrives.

Loading thumbnail…

loading_data_NH_2_gps_data

This example loads a CSV of world capitals with their GPS coordinates and displays the raw dataset as a JSON string in the browser. The visualization fetches `data.csv` using the Fetch API and parses it with `d3.csvParse`, converting latitude and longitude values to numbers. Each row is then rendered as a `pre` element using D3’s data join. The data comes from a Kaggle dataset listing capital cities by country and continent.

Loading thumbnail…

loading_data_NH_2_solar_data

This visualization displays daily solar power generation data from multiple sites, comparing metrics like watt hours and expected output across different locations. It loads a CSV file containing site information, dates, power measurements, and geographic coordinates, parsing the data with `d3.csvParse`. The visualization renders the raw data as a JSON-formatted pre element using `d3.select` and `selectAll().join()`, showing the data in its text form. The code demonstrates a simple data-loading state machine that fetches the CSV, parses it into typed numeric and string columns, and displays the structured result.

Loading thumbnail…

loading_data_NH_2

This example demonstrates asynchronous data loading with D3 v7, displaying the contents of a CSV file as formatted JSON text in a pre element. It uses `fetch()` to retrieve `data.csv`, `csvParse` from D3 to convert the raw CSV string into an array of objects, and then iterates through the parsed data to coerce the numeric columns (`sepal_length`, `sepal_width`, `petal_length`, `petal_width`) from strings to numbers. The visualization implements a unidirectional data flow where a `setState` function updates the application state, triggering a re-render that initially shows "LOADING" before the fetched data appears.

Loading thumbnail…

loading_data_NH

A circle follows the mouse within a unidirectional data flow. The visualization loads the Iris dataset from a CSV file, parses it using `d3.csvParse`, and then renders the data. The example demonstrates a simple state management pattern where a `setState` callback triggers a re-render of the visualization via the `viz` function. The chart uses D3 v7 and is built with an unidirectional flow, where the state is passed to the rendering function. The mouse-following circle is the sole visual element.

Loading thumbnail…

mouse follower NH

A red circle follows the mouse in an inverted, mirrored motion across a full-window SVG canvas, growing in radius as the cursor moves horizontally. It uses an SVG `circle` element bound to `mousemove` events on the root `<svg>` via D3 v7's `select` and `attr` methods. The circle's `cx` and `cy` coordinates are set to negative mouse positions offset by 400, while its `r` scales with `event.x`, with `fill` hardcoded to red.

Loading thumbnail…

trying_out_shapes_and_colors

This example demonstrates a basic SVG composition, presenting a red circle to the left of a black-outlined square. The visualization serves as a static canvas for exploring fundamental shape manipulation and color application. The HTML file defines a 960 by 500 pixel SVG canvas, which is then scaled up by a factor of 1.7 using a transformation group. The code directly uses the SVG `rect` and `circle` elements, while an external stylesheet (`styles.css`) sets the page margin and provides styling classes for potential line elements, though these are not utilized in the visible output.

Loading thumbnail…

first_assignment

This example shows a black outlined circle that tracks the mouse across the screen, growing larger when the user moves the cursor faster. It uses `d3.select` and `selection.on('mousemove')` to capture pointer coordinates and movement deltas, then calculates a radius based on the movement speed, capping it at 100 pixels. The visualization renders in an SVG that dynamically resizes to the window dimensions via `window.innerWidth` and `window.innerHeight`. The state updates through a custom `setState` function that triggers a re-render through the `viz` function.

Loading thumbnail…

first assignment

This example demonstrates the simplest possible D3 version 7 setup: a blank page that writes the text "Hello D3 version 7" into the body element. The visualization uses the `select` function from the D3 library to target the body and the `.text` method to set its content. The page loads D3 v7.6.1 from a CDN and runs the script from a separate `bundle.js` file. No data source or rendering is involved beyond this direct DOM manipulation.