L

LokeshBachu5

@LokeshBachu5·17 public vizzes

Loading thumbnail…

Loki_Social_Network_ICE_8

This interactive network diagram shows friendships among a group of nine people, with directed, arrow-headed links connecting person nodes. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to determine node placement. Nodes are rendered as gray circles with labels, and users can drag them to rearrange the layout. The code styles all nodes with `colorScale` and adds hover effects via the `nodeHover` CSS class, while the data comes from a JSON file defining relationships.

Loading thumbnail…

Family Tree Loki ICE 8

This example displays an interactive family tree using a D3.js hierarchical layout, loading relationships from a JSON file and rendering them as an SVG with animated node expansion. The code uses `d3.layout.tree` to compute node positions, with custom tooltips and zoom/drag behavior via `d3.behavior.zoom`. Distinct node types are color-coded (blue, green, yellow, purple) based on the `type` field, and links include directional arrows. The visualization is built with D3 v3 and jQuery, demonstrating recursive tree traversal and dynamic sizing of the SVG container.

Loading thumbnail…

Untitled

This example displays a map of Canada loaded from a GeoJSON file and rendered as SVG paths using D3 v7. When the mouse moves over a province, the code positions an HTML tooltip div through its style attributes. The tooltip reveals the province name, sourced from the GeoJSON properties. The D3 geoPath and geoAlbers APIs handle the map projection and path generation, while province colors change via CSS :hover rules.

Loading thumbnail…

World_Map_Loki_ICE_8

A world map rendered with a natural Earth projection displays country boundaries as blue strokes on a cyan background. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. Country features are extracted using topojson.feature, then bound to the SVG with a data join, while CSS controls stroke color and opacity.

Loading thumbnail…

ICE7_Reusable Charts_Loki

This interactive scatter plot visualizes the Iris dataset, with points colored by species (setosa in yellow, versicolor in black, virginica in red) to show relationships between sepal and petal measurements. The visualization cycles through different variable pairings every two seconds, allowing comparison of petal width, sepal width, petal length, and sepal length. Built with D3 v6, it uses reusable chart functions with scaleLinear, axisLeft, and axisBottom for axes, while a setInterval timer switches the x-axis variable. The SVG renders animated circles with a title and axis labels.

Loading thumbnail…

Fork of ICE7 Area Chart_Loki

The visualization shows India’s death counts from 1960 to 2020 as a yellow area chart with a red outline, plotted against blue year and death axes. Using d3.csv to load data, it applies scaleTime and scaleLinear for scales, axisBottom and axisLeft for axes, and d3.area with curveBasis to generate the filled path. The SVG rendering includes a title, rotated axis labels, and gridlines via tickSize, with data formatted as parsed Date objects and numeric deaths.

Loading thumbnail…

ICE7 Area Chart_Loki

This area chart displays India’s annual deaths from 1960 to 2020, with time on the x-axis and death counts on the y-axis. The visualization uses d3.csv to load the data, then d3.scaleTime and d3.scaleLinear to map values, d3.axisBottom and d3.axisLeft for ticks, and d3.area with curveBasis to generate a smooth filled path. The SVG rendering includes labeled axes and a title, with the data fetched from a GitHub gist containing the ICE7 dataset.

Loading thumbnail…

Sales_Line_Chart_Loki_ICE_7

This visualization displays car sales trends in India over time, using a line chart to plot annual sales figures against years. The chart employs D3 v5 with SVG rendering, utilizing scaleTime and scaleLinear for axes, and a line generator to create the path. Data is loaded from a CSV file, with sales values parsed as numbers and dates formatted. The design includes styled grid lines, colored axis labels, and a blue line path, all configured with custom margins and tick formatting.

Loading thumbnail…

PieChart of EV_Cars_ICE7

This pie chart visualizes the top speeds of electric vehicles from a CSV dataset. The D3.js v5 code uses `d3.pie` to compute arc segments for each data slice, `d3.arc` to render the pie geometry, and `d3.scaleOrdinal` for the categorical color scheme. A legend on the right displays each Brand with its corresponding TopSpeed_KmH value. The chart is rendered as an SVG element, with data loaded asynchronously from a GitHub Gist URL.

Loading thumbnail…

ICE7 Pie Chart_Loki

This pie chart visualizes the revenue generated by the ten most-sold beauty products, showing the proportional share of each product's sales. The chart is rendered as an SVG using D3 v5, with pie segments generated by the `d3.pie` layout and `d3.arc` for the sector geometry. Color mapping employs `d3.scaleOrdinal` with the Category10 scheme, applied to each revenue value. A legend to the right lists product names and their formatted revenue values, using `d3.format` with a `'.4~g'` pattern. Data is loaded from `Data.json`.

Loading thumbnail…

ICE 7-1 Reusable Scatter Plot_Lokesh

This interactive scatter plot visualizes the Iris dataset, encoding species with categorical colors and distinct SVG symbol shapes (spade, heart, ace) via d3.scaleOrdinal and d3.symbol. It uses d3.scaleLinear for axes and d3.axisLeft/axisBottom, with data loaded through d3.csv. Every ten seconds, the x-axis dynamically cycles between four measurements—petal width, sepal width, petal length, and sepal length—updating the positions of the 150 points with animated transitions. The chart is built as a reusable function following Mike Bostock’s reusable charts pattern, rendered with SVG paths.

Loading thumbnail…

ICE_6_Penguin_Data_Set_Scatter_Plot_Loki

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and body mass on the y-axis, with points colored by species (Adelie, Chinstrap, and Gentoo). It also encodes culmen length and depth as properties in the data, though circles render with a fixed radius. Built with React and D3 v5, the code uses `csv` to load the data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. SVG circles are joined to the data with `selectAll` and `join`, while the title and axis labels are styled with cursive fonts.

Loading thumbnail…

Lokesh_ICE_6_ScatterPlot_Penguin_Data

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color to distinguish Adelie, Chinstrap, and Gentoo penguins. The visualization loads a CSV dataset and uses D3 v5 scaleLinear, extent, axisLeft, and axisBottom to map data to SVG circles within a React framework.

Loading thumbnail…

Lokesh_Rendering Marks and Channels using React and D3.js

This example shows the top speeds of fifteen electric vehicles using a horizontal bar chart, with brand names on the y-axis and speed values on the x-axis. It uses React hooks (`useState`, `useEffect`) to load data from a CSV file via `d3.csv`, then renders SVG rectangles with dimensions computed by D3’s `scaleBand` and `scaleLinear`. Custom tick marks and gridlines are drawn manually, and the chart updates through React’s declarative rendering without D3’s join/update pattern.

Loading thumbnail…

ICE_5_Bg_Data_Loki

This visualization displays metadata about an electric vehicle dataset, showing its size in kilobytes, row count, and column count. The page presents EV car data sourced from a CSV file linked to basketball-reference.com, though the title references ICE_5_Bg_Data_Loki. Using D3.js v7, the code fetches the CSV via `d3.csv`, formats it with `d3.csvFormat`, and computes the data size in kilobytes before displaying the information in a styled `<pre>` element. A background SVG image is applied through CSS, while the layout includes a 2000x2000 SVG canvas.

Loading thumbnail…

Lokesh_Bachu_ICE_5_BG_Data

A grid of 300 white circles arranged in a single row moves vertically in a sine wave pattern across a black background. The animation updates each circle's y-coordinate using a continuously running timer. The code uses D3 v7 to bind data, append SVG circle elements, and drive the motion with `d3.timer`. Circle positions are computed from a sine function of the index and elapsed time, producing a smooth, rolling wave effect. The data is generated procedurally via `d3.range`, with no external dataset involved.

Loading thumbnail…

Loki_New_Face_EMOT_Coin

A stylized smiley face is rendered with a green-to-yellow gradient background circle, uneven ellipsoid eyes, a curved mouth, and radiating black and red lines suggesting teeth. The composite facial elements are assembled through modular React components, while D3's arc function generates the mouth and teeth paths. The SVG canvas uses a declared linear gradient and D3 arc geometry to construct the character, with an asymmetrical eye and tooth arrangement.